如何在ReactJS上使用PayPal的Express In-Context Checkout？

问题描述

我正在关注此，但没有任何作用。它提供的代码让按钮看起来神秘地只为我工作一次，但刷新后，它消失了，并且没有基督让它再次出现。

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.

这是在React组件内执行的代码

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>
      );
    }
  }

这是店面包含 Shop 的组件，在这个组件中有一个卡组件。基本上，它是一个展示其产品的商店，每个产品（卡）都需要一个按钮：

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>
    );
  }
}

没有任何关于它与React一起使用的说法它的模块。

There's nothing saying about its usage with React and no recent module for it.

推荐答案

您可以创建自己的PayPal按钮组件。

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'));

。

Working example on JSFiddle.

这篇关于如何在ReactJS上使用PayPal的Express In-Context Checkout？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！