Paypal-checkout-components: PayPal integration w/ React.JS | paypal.Button.driver | paypal is not defined

Created on 7 Feb 2019 · 6Comments · Source: paypal/paypal-checkout-components

Description

I'm trying to implement paypal to a react app and the only complete doc that I found was from here:
https://www.robinwieruch.de/react-paypal-payment/

The doc uses paypal.Button.react which is deprecated and paypal.Button.driver should be used instead - as said on the official doc. BUT once I add that to react, got the following error:
Uncaught ReferenceError: paypal is not defined
This is my code:

import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';


class PaypalButton extends React.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 PayPalButton = paypal.Button.driver('react', { React, ReactDOM });
    const {
      total,
      currency,
      env,
      commit,
      client,
      onSuccess,
      onError,
      onCancel,
    } = this.props;

    const {
      showButton,
    } = this.state;

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

    const onAuthorize = (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 && <PayPalButton
          env={env}
          client={client}
          commit={commit}
          payment={payment}
          onAuthorize={onAuthorize}
          onCancel={onCancel}
          onError={onError}
        />}
      </div>
    );
  }
}

export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);

Where does paypal.Button.driver comes from since it is not imported?

Thanks

outdated

Source

rfdc

👍1

Most helpful comment

@rfdc : as said on the official doc => Where is the official doc? I can't find this information anywhere

Another question is, I see that you use prop payment={payment} in PaypalButton.
What is the difference between payment and createOrder ?

I used createOrder and it works normally

piavgh on 22 Aug 2019

👍4

All 6 comments

Where does paypal.Button.driver comes from since it is not imported?

It gets exposed to the window once you load https://www.paypalobjects.com/api/checkout.js. I'm not super familiar with this scriptLoader, but looking at the docs it looks like the script will be loaded asynchronously with your component, so you'll have to do something like...

render() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props;
    const PayPalButton = (isScriptLoaded && isScriptLoadSucceeded) ? paypal.Button.driver('react', { React, ReactDOM }) : null;

    // ...

    return (
        <div>
            {showButton && isScriptLoaded && isScriptLoadSucceeded && <PayPalButton .../>}
        </div>
    );
}