Ember.js integrate Paypal

To use PayPal  install PayPal JavaScript SDK

npm install @paypal/paypal-js --save-dev 

Create a component for PayPal

ember g component paypal

// components/paypal.js

import Component from '@glimmer/component';
import { loadScript } from "@paypal/paypal-js";

export default class PaypalComponent extends Component {
  YOUR_CLIENT_ID = 'Your client id here';


  constructor(...args) {
    super(...args);

    let self = this;
    loadScript({
      "client-id": this.YOUR_CLIENT_ID,
      "disable-funding": "paylater",
    })
      .then(async (paypal) => {
        // start to use the PayPal JS SDK script
        console.log('Paypal JS SDK script loaded success ', paypal);
        self.paypal = paypal;
        //for testing with amount of 15$
        self.loadButton(15);
      })
      .catch((err) => {
        console.error("failed to load the PayPal JS SDK script", err);
      });


  }

  paypalButtons;

  async loadButton(amount) {
    console.log('amount selected', amount);

    const self = this;

    try {
      let paypalcontainer = document.querySelector('#paypalcontainer')

      if (paypalcontainer.children[0] != undefined) {
        paypalcontainer.children[0].remove()
      }

    } catch (e) {
      console.log('error ', e);
    }

    this.paypalButtons = await this.paypal.Buttons({
      createOrder: function (data, actions) {
        // This fnc sets up the details of the transaction, including the amount
        return actions.order.create({
          purchase_units: [
            {
              "description": 'Autocheck amount',
              "amount": {
                "value": amount,
              },
            }
          ],
          application_context: {
            shipping_preference: 'NO_SHIPPING'
          }
        });
      },

      onApprove: function (data, actions) {

          console.log('OnApprove ', data);
          return actions.order.capture().then(function(details) {
            console.log('Transaction completed ', details);

            self.confirmPayment(details.id);
          });
      },

      onCancel: function (data, actions) {
        console.log('onCancel');
      },

      onError: function (err) {

        console.log('onError ',err);
      }

    }).render("#paypalcontainer");
  }

  async confirmPayment(response){

    console.log('confirmPayment response ',response);

  }

}

Template

<!-- components/paypal.hbs -->
<div id="paypalcontainer"></div>

<!-- templates/application.hbs -->
<Paypal/>