Frontend Integration

const payPalOptions = {
    clientId: PayPalConfig.CLIENT_ID,
    merchantId: PayPalConfig.MERCHANT_ID,
    commit: true,
    enableFunding: ['venmo', 'paylater'],
    disableFunding: ['card'],
    intent: 'authorize',
    components: ['buttons', 'messages'],
    dataCspNonce: nonce,
    dataPageType: pageType,
    dataPartnerAttributionId: 'BroadleafCommerce_SP_PPCP',
  };
...
<PayPalScriptProvider options={payPalOptions}>
  <CurrentLayout>
    <Component {...pageProps} />
  </CurrentLayout>
</PayPalScriptProvider>
...

{PayPalConfig.CLIENT_ID && (
  <script
    data-partner-attribution-id="BroadleafCommerce_SP_PPCP"
    data-csp-nonce={this.props.nonce}
    defer
    src={`https://www.paypal.com/sdk/js?client-id=${PayPalConfig.CLIENT_ID}&merchant-id=${PayPalConfig.MERCHANT_ID}&intent=authorize&commit=true`}
  />
)}

export const usePayPal = (): PayPalState => {
  const [state, setState] = useState<PayPalState>(
    isPayPalLoaded()
      ? { api: window['paypal'], button: getButtonComponent() }
      : {}
  );

  useEffect(() => {
    setState(
      isPayPalLoaded()
        ? { api: window['paypal'], button: getButtonComponent() }
        : {}
    );
  }, []);

  return state;
};

function isPayPalLoaded() {
  return window && window['paypal'];
}

function getButtonComponent() {
  return window['paypal'].Buttons.driver('react', { React, ReactDOM });
}

const { api, button: Button } = usePayPal();

return (
    <Button
      appSwitchWhenAvailable={true}
      fundingSource={api.FUNDING[funding]}
      funding={api.FUNDING[funding]}
      createOrder={createOrder}
      onApprove={handleApprove}
      onError={error => {
        if (error.message === 'Expected an order id to be passed') {
          // don't want to show this message
          return;
        }

        setError(error.message);
      }}
      style={style}
    />
)