cocoastorm / vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout
MIT License
153 stars 67 forks source link

PayPal methods `paypal-paymentAuthorized`, `paypal-paymentCompleted` and `paypal-paymentCancelled` are not working #24

Closed koddr closed 6 years ago

koddr commented 6 years ago

Hmm.. why PayPal methods paypal-paymentAuthorized, paypal-paymentCompleted and paypal-paymentCancelled are not working at 2.3.5 version? O_o

My code is:

// ./js/script.js

// Include libraries
import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'

// Vue
const app = new Vue({
  el: '#app',
  components: {
    PayPal
  },
  data: {
    paypal_api_keys: {
      sandbox: '<sandbox client id>',
      production: '<production client id>'
    },
    // ... other data
  },
  methods: {
    paypalPaymentAuthorized: function (data) {
      console.log(data)
    },
    paypalPaymentCompleted: function (data) {
      console.log(data)
    },
    paypalPaymentCancelled: function (data) {
      console.log(data)
    }
  }
})

On template:

<!-- ./index.html -->

<div id="app">
  <pay-pal
    amount="10.0"
    currency="USD"
    :client="paypal_api_keys"
    v-on:paypal-paymentAuthorized="paypalPaymentAuthorized"
    v-on:paypal-paymentCompleted="paypalPaymentCompleted"
    v-on:paypal-paymentCancelled="paypalPaymentCancelled"
    env="sandbox">
  </pay-pal>
</div>

...so, payment is success, but console log is always empty!

I need this function, because my project (with Django on backend) need to catch complete payment information and save it to Database (and create user account).

How to solve this? Help please.

cocoastorm commented 6 years ago

https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

Can you try this instead?

<!-- ./index.html -->

<div id="app">
  <pay-pal
    amount="10.0"
    currency="USD"
    :client="paypal_api_keys"
    v-on:paypal-payment-authorized="paypalPaymentAuthorized"
    v-on:paypal-payment-completed="paypalPaymentCompleted"
    v-on:paypal-payment-cancelled="paypalPaymentCancelled"
    env="sandbox">
  </pay-pal>
</div>

image

cocoastorm commented 6 years ago

Actually I think I'm going to change the event names to something simpler and more compatible to use in HTML.

Thanks for bringing up this issue!

cocoastorm commented 6 years ago

Hey @koddr,

Published with v3.0.0 :rocket:

Event names were changed! Here are the new ones

Additionally, there's an example for interacting with the emitted events.

koddr commented 6 years ago

Awesome! Thanks!