CODEWITHSUNDEEP
javascriptvue.jspaypalcheckout
Gradient
Gradient

Reputation: 145

How to get Paypal Checkout to work with Vue.JS 3

I am trying to make Paypal Checkout work with Vue.JS 3 (using the loader)

Right now I got this far:

setPaypal() {
        const script = document.createElement('script');
        script.src = 'https://www.paypal.com/sdk/js?client-id=AdlvqGHWrrwVpGXreZuf5VHBXjIeUWGLHBJmDzbI44Ib2w1MMN7P-UJysCHFb_W7BWTvpz0ofji0SiYB';
        document.body.appendChild(script);
        script.addEventListener('load', this.setLoaded())
    }

This function is called in the mounted(): and inserts the script tag in my page.

setLoaded() {
        window.paypal.Buttons({
            createOrder: (actions) => {
                return actions.order.create({
                    purchase_units: [
                        {
                            description: this.prestation.courtedescription,
                            amount: {
                                currency_code: "EUR",
                                value: this.total
                            }
                        }
                    ]
                });
            },
            onApprove: async () => {
                this.paidFor = true;
                this.loading = false;
            },
            onError: err => {
                console.log(err)
            }
        })
        .render(this.$refs.paypal)
    }

This is the setLoaded() function called when the script is loaded.

Well obviously window.paypal is undefined

I tried using the official docs and same shit, they ask you to

const PayPalButton = paypal.Buttons.driver("vue", window.Vue);

But hey, paypal is not defined

For reference, this is the official docs

  1. Add the SDK <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
  2. Vue integration
<div id="container">
  <app></app>
</div>
<script>
  const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
  Vue.component("app", {
    template: `
      <paypal-buttons :on-approve="onApprove" :create-order="createOrder" />
    `,
    components: {
      "paypal-buttons": PayPalButton,
    },
    computed: {
      createOrder: function () {
        return (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: "10",
                },
              },
            ],
          });
        }
      },
      onApprove: function () {
        return (data, actions) => {
          return actions.order.capture();
        }
      },
    },
  });
  const vm = new Vue({
    el: "#container",
  });
</script>

Upvotes: 2

Views: 2624

Answers (1)

Enoch Chejieh
Enoch Chejieh

Reputation: 136

Instead of using this in your setPaypal() function

script.addEventListener('load', this.setLoaded())

Use this

script.addEventListener('load', () => this.setLoaded())

Upvotes: 3

Related Questions