我正在关注有关如何生成PayPal按钮的PayPal教程,但是没有任何效果。它提供的使按钮看起来神秘的代码对我来说只有一次,但是刷新之后,它消失了,没有基督使它再次出现。
这是在React组件内部执行的代码
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> ); } }
这是一个Storefront包含的组件Shop,并且在其中有一个Card组件。基本上,这是一家展示产品的商店,每个产品(Card)需要有一个按钮:
Storefront
Shop
Card
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> ); } }
关于它在React中的用法,也没有最新的模块,这没有什么可说的。
您可以创建自己的PayPal Button组件。
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'));
JSFiddle上的工作示例 。