Making A Paypal Button To Checkout Items In React.js?

So coming from an angular background where I'm familiar doing a PayPal button, I'm unable to get it to work for React.js. What are methods to build the PayPal button component for

Solution 1:

Anyone who has the same question: this concise step-by-step guide can be used to write up your own React component which uses the PayPal REST API.

In the below code fragment, note:

1. API loaded asynchronously and isScriptLoad* props to check load status
2. showButton to hold the state (can be rendered or not)
3. binding to DOM
4. componentDidMount vs componentWillReceiveProps to check loading status of API
5. Props to be passed to the componet to manage the transaction: total, currency, env, commit, client, onSuccess, onError, onCancel
6. payment and authorize methods to actually implement the transaction

importReactfrom'react';
importReactDOM from'react-dom';
import scriptLoader from'react-async-script-loader';

classPaypalButtonextendsReact.Component {
  constructor(props) {
super(props);

this.state = {
  showButton: false,
};

window.React = React;
window.ReactDOM = ReactDOM;
  }

  componentDidMount() {
const {
  isScriptLoaded,
  isScriptLoadSucceed
} = this.props;

if (isScriptLoaded && isScriptLoadSucceed) {
  this.setState({ showButton: true });
}
  }

  componentWillReceiveProps(nextProps) {
const {
  isScriptLoaded,
  isScriptLoadSucceed,
} = nextProps;

const isLoadedButWasntLoadedBefore =
  !this.state.showButton &&
  !this.props.isScriptLoaded &&
  isScriptLoaded;

if (isLoadedButWasntLoadedBefore) {
  if (isScriptLoadSucceed) {
    this.setState({ showButton: true });
  }
}
  }

  render() {
const {
  total,
  currency,
  env,
  commit,
  client,
  onSuccess,
  onError,
  onCancel,
} = this.props;

const {
  showButton,
} = this.state;

constpayment = () =>
  paypal.rest.payment.create(env, client, {
    transactions: [
      {
        amount: {
          total,
          currency,
        }
      },
    ],
  });

constonAuthorize = (data, actions) =>
  actions.payment.execute()
    .then(() => {
      const payment = {
        paid: true,
        cancelled: false,
        payerID: data.payerID,
        paymentID: data.paymentID,
        paymentToken: data.paymentToken,
        returnUrl: data.returnUrl,
      };

      onSuccess(payment);
    });

return (
  <div>
    {showButton && <paypal.Button.reactenv={env}client={client}commit={commit}payment={payment}onAuthorize={onAuthorize}onCancel={onCancel}onError={onError}
    />}
  </div>
);
  }
}

exportdefaultscriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);