如何在 ReactJS 中使用 PayPal 的 Express In-Context Checkout? [英] How to use PayPal's Express In-Context Checkout with ReactJS?
问题描述
我正在关注这个 PayPal关于如何生成 PayPal 按钮的教程,但没有任何效果.它提供的使按钮神秘地出现的代码对我来说只工作了一次,但刷新后,它消失了,没有基督让它再次出现.
这是在 React 组件内部执行的代码
class Storefronts extends Component {使成为() {返回 (<div className="layout-wrapper">{this.props.location.pathname === '/shops' ?<商店{...this.props}/>:<基本{...this.props}/>}<脚本>window.paypalCheckoutReady = 函数(){paypal.checkout.setup('MERCHANTID', {环境:沙箱",容器:'test1',})}
);}}
这是一个 Storefront
组件,其中包含一个 Shop
,其中有一个 Card
组件.基本上,它是一个展示其产品的商店,每个产品(Card
)都需要有一个按钮:
class Card extends Editor {使成为() {const {list} = this.props;让 img = '/images/logo-v2-small.jpg';返回 (<行>{list.map(item =>{返回 (<Col xs={6} md={3}><Link to={{ pathname: '/shops/' + item.id }}><缩略图 src={img} alt={item.name}><h3>{item.name}</h3><p>{this.parseHtmlToReact(item.description)}</p><p>{item.address}</p><p><Button bsStyle="primary">Book</Button><a id="test1" href="/checkout"/>//按钮应该出现在这里.<p className="pull-right">{item.rating}</p></p></缩略图></链接></Col>)})}</行>);}}
关于它在 React 中的使用没有什么可说的,也没有最近的模块.
您可以创建自己的 PayPal 按钮组件.
class PayPalButton 扩展 React.Component {构造函数(){极好的();//例如,您可以从 config.js 模块中获取此值.this.merchantId = '6XF3MPZBZV6HU';}componentDidMount() {让容器 = this.props.id;让merchantId = this.merchantId;window.paypalCheckoutReady = 函数(){paypal.checkout.setup(merchantId, {语言环境:'en_US',环境:沙箱",容器:容器,});}}使成为() {返回(<a id={this.props.id} href="/checkout"/>);}}ReactDOM.render(<PayPalButton id="button"/>, document.getElementById('View'));
I'm following this PayPal tutorial about how to generate a PayPal button, but nothing works. The code it provides to make the button appear mysteriously worked only once for me, but after a refresh, it disappear and there's no Christ to make it appear again.
This is the code being executed inside of a React component
class Storefronts extends Component {
render() {
return (
<div className="layout-wrapper">
{this.props.location.pathname === '/shops' ? <Shops {...this.props}/> : <Basic {...this.props}/>}
<script>
window.paypalCheckoutReady = function() {
paypal.checkout.setup('MERCHANTID', {
environment: 'sandbox',
container: 'test1',
})
}
</script>
</div>
);
}
}
This is a Storefront
component that holds a Shop
, and inside this one has a Card
component. Basically, it's a shop that shows its products, and each product (Card
) needs to have a button:
class Card extends Editor {
render() {
const {list} = this.props;
let img = '/images/logo-v2-small.jpg';
return (
<Row>
{list.map(item =>{
return (
<Col xs={6} md={3}>
<Link to={{ pathname: '/shops/' + item.id }}>
<Thumbnail src={img} alt={item.name}>
<h3>{item.name}</h3>
<p>{this.parseHtmlToReact(item.description)}</p>
<p>{item.address}</p>
<p>
<Button bsStyle="primary">Book</Button>
<a id="test1" href="/checkout"/> // The button should appear here.
<p className="pull-right">
{item.rating}
</p>
</p>
</Thumbnail>
</Link>
</Col>
)
})}
</Row>
);
}
}
There's nothing saying about its usage with React and no recent module for it.
You could create your own PayPal Button component.
class PayPalButton extends React.Component {
constructor() {
super();
// you can take this value from a config.js module for example.
this.merchantId = '6XF3MPZBZV6HU';
}
componentDidMount() {
let container = this.props.id;
let merchantId = this.merchantId;
window.paypalCheckoutReady = function() {
paypal.checkout.setup(merchantId, {
locale: 'en_US',
environment: 'sandbox',
container: container,
});
}
}
render() {
return(
<a id={this.props.id} href="/checkout" />
);
}
}
ReactDOM.render(<PayPalButton id="button" />, document.getElementById('View'));
这篇关于如何在 ReactJS 中使用 PayPal 的 Express In-Context Checkout?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!