Paypal-checkout-components: React integration for v5?

[aetheryx]

We were previously using the v4 Checkout script which had clear documententation for integration with React (and other frameworks). I am unable to find any similar documentation, rather any kind of documentation at all for integration with React. Does the SDK still support these frameworks? If so, how/where is this documented?

[bluepnume]

For now please see https://github.com/paypal/paypal-checkout-components/blob/master/demo/react.htm -- I'm working on getting full docs for this onto the developer.paypal.com site.

[aetheryx]

Thank you so much for the quick response. I think it's a good idea to keep this issue opened until then, do you agree?

[bluepnume]

I'd definitely agree! Thanks for raising this.

[Heher]

Any update with this? I'm currently trying to upgrade our current PayPal integration and I'm not finding any React-specific documentation.

[TheImpressionist]

Any update with this? I'm currently trying to upgrade our current PayPal integration and I'm not finding any React-specific documentation.

Here's a quick solution I posted on another issue: https://github.com/paypal/paypal-checkout-components/issues/1109#issuecomment-507247259

The solution is pretty basic, but you should get the gist of it. This includes loading the script async when the component is rendered.

[ericelliott]

I'm trying to get this working right now. I haven't figured out all the parameters I'm supposed to pass yet, but I have the script loading and the buttons rendering. I made a React component to wrap the PayPal API.

Here's what I have so far. IMO, something like this could and should be exported from this library:

/* global paypal */
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import t from 'prop-types';

let Component = () => <></>;

const PayPal = ({ client, env = 'sandbox', ...props }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (isLoaded) return;

    if (typeof paypal !== 'undefined') {
      Component = paypal.Buttons.driver('react', { React, ReactDOM });
      setIsLoaded(true);
    }
  }, [isLoaded]);

  return (
    <>
      <script
        src={`https://www.paypal.com/sdk/js?client-id=${client}`}
      ></script>
      {isLoaded && <Component env={env} client={client} {...props} />}
    </>
  );
};
PayPal.propTypes = {
  client: t.string,
  env: t.string,
};

export default PayPal;

[TheImpressionist]

I'm trying to get this working right now. I haven't figured out all the parameters I'm supposed to pass yet, but I have the script loading and the buttons rendering. I made a React component to wrap the PayPal API.

Here's what I have so far. IMO, something like this could and should be exported from this library:

/* global paypal */
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import t from 'prop-types';

let Component = () => <></>;

const PayPal = ({ client, env = 'sandbox', ...props }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (isLoaded) return;

    if (typeof paypal !== 'undefined') {
      Component = paypal.Buttons.driver('react', { React, ReactDOM });
      setIsLoaded(true);
    }
  }, [isLoaded]);

  return (
    <>
      <script
        src={`https://www.paypal.com/sdk/js?client-id=${client}`}
      ></script>
      {isLoaded && <Component env={env} client={client} {...props} />}
    </>
  );
};
PayPal.propTypes = {
  client: t.string,
  env: t.string,
};

export default PayPal;

I'm not fully versed in the new useEffect. How does it check whether the script itself has loaded? Normally you'd have onload and onerror methods on the HTMLElement.

[ericelliott]

useEffect runs on every render by default. We have passed a second parameter, so it will only run when the component mounts, or isLoaded changes. We're loading the PayPal script synchronously in the component, so the first time useEffect runs after mounting the component, we should be ready to use it.

[stevethatcodes]

IMO, something like this could and should be exported from this library:

+1 for this, having to jump through hoops like this to utilise this library is really painful!

[fandy]

Any updates on React docs for this? Right now it's easier to just use the unofficial React components

[mnicpt]

@fandy Sincere apologies that we haven't gotten to this yet. We now have this on our backlog and will be actively working on Components for all of our supported drivers. I will update this thread when it is complete. Thank you for your patience.

[mnicpt]

SPA docs are on review and will be released after the current work cycle. Thank you all for bringing this need to our attention.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.