Standard payments with JavaScript frameworks: paypal is not defined

[DavideI75]

Hi to all, 

I'm trying to add a paypal button in my React app and I found this: https://developer.paypal.com/docs/checkout/standard/customize/single-page-app/

In public/index.html I added a line like this:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

then I try to create my custom component like this:

import React from "react";
import ReactDOM from "react-dom"
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
class YourComponent extends React.Component {
  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [
        {
          amount: {
            value: "0.01",
          },
        },
      ],
    });
  }
  onApprove(data, actions) {
    return actions.order.capture();
  }
  render() {
    return (
      <PayPalButton
        createOrder={(data, actions) => this.createOrder(data, actions)}
        onApprove={(data, actions) => this.onApprove(data, actions)}
      />
    );
  }
}

the app fails to compile: 'paypal' is not defined. Any suggestions? Thanks

[DavideI75 · Accepted solution]

just added this line:let paypal = window.paypal; 

before this:const PayPalButton = paypal.Buttons.driver('react', { React, ReactDOM }); 

and resolved

const paypal = window.paypal;

const PayPalButton = paypal.Buttons.driver('react', { React, ReactDOM });

[JussiHirvi]

I got the same error, using the same remote paypal script as the OP. This happened after I had upgraded my app from Rails 6 to 7 and switched javascript bundler from webpacker to jsbundling.

The new js bundlers for Rails don't seem to like inline javascript. As soon as I moved my client-side paypal script (starting with "paypal.Buttons...") to app/javascript, it started working. I also placed it inside

$(document).on('ready turbo:load', function(){
});