cocoastorm / vue-paypal-checkout Goto Github PK

Hello,

I would like to inform you that 2 important variables are missing from your package(unless I missed something):
:custom and :item_number1

When an app is detached from the backend, it is good to have them to pass the user id for example. Right now I will be using instead the invoice number but is it not ideal.

Thank you for the package.

I tried locale: 'fr_FR' , but it does not change the button... seems your are using the browser locale wo taking in account the locale: 'fr_FR' . parameter ?

Hello,

I have a problem with the local prop. When I try to change it when the hook updated is called nothing happend. I try the same thing with the amount prop and it's work.

Their is my paypal button :

<PayPal
        :amount="total"
        currency="EUR"
        :locale="paypalLocale"
        :client="credentials"
        :button-style="paypalStyle"
        env="sandbox"
        v-on:payment-completed="paymentCompleted">
</PayPal>

My data :

data () {
    return {
      paypalLocale: ''
   }
}

And my updated hook :

updated: function(){
    if(this.$store.state.lang == "fr"){
      this.paypalLocale = "fr_FR"
    } else {
      this.paypalLocale = "en_US"
    }
},

Thank you for your help and sorry for my english :)

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.

Hi, how to create button type of subscription payment?

i'm going to use vue paypal checkout for my project in nuxt, but before I use it, i'm going ask, is it vue paypal checkout is support SSR ?

thank you

So out of nowhere, my vue-paypal-checkout started redirecting to the home page of PayPal when trying to check out instead of finishing the checkout process.

Do you have any idea why, or what might have changed? I just updated to the latest version to see if that would fix it or not, but it didn't.

It also now opens in a different tab, vs as a modal on the current page on Chrome

I also just updated my redirect URL on PayPal to see if that may be the issue. It says it takes up to 3 hours, so I will let you know if that was it.

Hi, thank you for developing and sharing this component. It's a really nice encapsulated module.

I've been debugging into vue-paypal-checkout-common.js to understand the internals and how it works with Paypals' checkoutlib.js. I'm able to receive the payment-completed event handler if I pass only the amount; but I really want to show the line item details to the customer when he/she has navigated to Paypal. After several days of debugging and comparing my binding values with the Paypal payments API API, I'm still blocked and failing. Hope you can help steer me in the right direction or learn how to fix the issue and submit a pull request.

Heres my Paypal button binding:
<Paypal env='sandbox' currency='USD' v-bind:client='paypalCredentials' v-bind:button-style='paypalStyle' v-on:payment-cancelled='onPaypalPaymentCancelled' v-on:payment-authorized='onPaypalPaymentAuthorized' v-on:payment-completed='onPaypalPaymentCompleted' v-bind:amount='orderTotalWithoutShipping()' v-bind:items='paypalTransactionRequest()'> </Paypal>

I've tried different bindings and values that more closely mirror the raw REST API but (there are some transformations possibly??) but without success The browser console emitted error for me is
`Uncaught Error: Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 400 error. Correlation id: dac1bbeba1a99, dac1bbeba1a99
{
"name": "MALFORMED_REQUEST",
"message": "Incoming JSON request does not map to API request",
"information_link":
"https://developer.paypal.com/webapps/developer/docs/api/#MALFORMED_REQUEST",
"debug_id": "dac1bbeba1a99"
}
at XMLHttpRequest. (https://www.paypalobjects.com/api/checkout.4.0.223.js:14044:39)

I've attached a screenshot that shows how I've configured my Paypal Bindings and several debug callstack frames with locals window variable to capture state.

I'd really appreciate a response on what I'm doing wrong, how I can debug and fix the problem. Thanks in advance.

Hi,

I've been looking to implement your package today, and I kept running into the same problem of Error: No handler found for post message: xcomponent_init from

My code is as follows:

<template>
    <PayPal
            amount="10.00"
            currency="USD"
            :client="credentials"
            :items="myItems"
            :invoice-number="'201705051001'"
            env="sandbox"></PayPal>
</template>

<script>
    import PayPal from 'vue-paypal-checkout';

    export default {
        components: {
            PayPal
        },

        data(){
            return {
                credentials: {
                    sandbox: '<SANDBOX ID>',
                    production: ''
                },
                myItems: [
                    {
                        "name": "hat",
                        "description": "Brown hat.",
                        "quantity": "1",
                        "price": "5",
                        "currency": "USD"
                    },
                    {
                        "name": "handbag",
                        "description": "Black handbag.",
                        "quantity": "1",
                        "price": "5",
                        "currency": "USD"
                    }
                ]
            }
        }
    }
</script>

I've done some googling and apperently it may be something to do with how VueJS handles the button? See https://github.com/paypal/paypal-checkout/issues/130 and https://github.com/paypal/paypal-checkout/issues/126 or am I doing something completely wrong here?

I look forward to hearing back from you.
James.

Hi possible is add to props a key of 'notification_url'.
I mean a place for IPN

PayPal posts HTML FORM variables to a program at a URL you specify. You can specify this URL either in your account profile or with the notify_url variable on each transaction.

The version you are using is v2, which has been deprecated by paypal. Is there plan to change the core of this module to use v3 for paypal-checkout package?

Thanks for your awesome work !
For helping developers in debugging, could it be possible to include also the non-minified version if the js file ... we'll load it via webpack.. thanks a lot

hi, thanks for awesome plugin, but how if i want to get data of detail transaction after transaction is successfull?

or how to know if the transaction is successfull?

According to your doc for local prop, I used:

`<PayPal v-show="displayPaypalButtons" :buttonStyle="aStyle" locale="fr_FR" :client="credentials" amount="10.00" currency="EUR" env="sandbox" :invoice-number="invoiceNumber"></PayPal>

It workd ...but I get a . warning message

`Invalid prop: type check failed for prop "locale". Expected Object, got String.

I use the vue-paypal-checkout to payment.

<PayPal
    :amount="amount"
    currency="USD"
    :client="credentials"
    :env="paypal_env"

    @payment-authorized="payment_authorized_cb"
    @payment-completed="payment_completed_cb"
    @payment-cancelled="payment_cancelled_cb"
    
    :items="pay_items"
  >

  </PayPal>

and in the payment_completed_cb I will request a API for change order status or change the account balance.

but I have a question, if someone of customer is evil with technology, he call the payment_completed_cb directly, not pass the paypal payment.

I am trying to use specific button styles as described in the doc ... but the label, locale, size , color and shape are not taken in account
script

  `
  <script>
import TopNavTwo from '@/components/TopNavTwo'
import PageHeader from '@/components/PageHeader'
import PayPal from 'vue-paypal-checkout'
export default {
  mounted () {
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  data () {
    return {
      credentials: {
        sandbox: '<sandbox client id>',
        production: '<production client id>'
      },
      aStyle: { label: 'pay', locale: 'fr_FR', size: 'small', shape: 'rect', color: 'blue' },
      bStyle: { label: 'pay', locale: 'fr_FR', size: 'small', shape: 'rect', color: 'gold' }
    }
  },
  components: { PageHeader, TopNavTwo, PayPal }
}
</script>

`
html

  `<PayPal :buttonStyle="aStyle" :client="credentials" amount="10.00" currency="EUR" env="sandbox" invoice-number="[email protected]"></PayPal>
    <PayPal :buttonStyle="bStyle" :client="credentials" amount="10.00" currency="EUR" env="sandbox" invoice-number="[email protected]"></PayPal>`

Please Help [ I tried to follow all the instructions in the readme that you provided..

Here is the code

<paypal-checkout
				style="height:5em; width:100%; padding:20px;"
				v-show="form.payment_option == 1"
				amount="form.offer_bounty"
				currency="USD"
				:env="environment"
				:style="button_style"
				:client="paypal">
			</paypal-checkout>

and this is in my data object

data(){
		return {
			form: { 
				offer_bounty : 10,
				currencyCode : 4,
				payment_option : 1,
			},
			my_items : [
			{
				"name": "hat",
				"description": "Brown hat.",
				"quantity": "1",
				"price": "5",
				"currency": "USD"
			},
			{
				"name": "handbag",
				"description": "Black handbag.",
				"quantity": "1",
				"price": "5",
				"currency": "USD"
			}
			],

			paypal: {
				sandbox: 'ASKgsenjMcu30HAZQM_IRrlaEXjEkD5iJQaCO095cO8cL714mr6aIcIJO-TZ9xDgd-50ViBkfryO1-Jw',
				production: 'ARVBy7D7n5t2sHfx56TXtszDOKWlsl9Rhww9tW7AFGCh--mJdOWr7-VFP1Qy9SSSNhqo7j5i4uWvHnZm'
			},
			environment : "sandbox",
			button_style : {
				label: 'checkout',
			size:  'large',    // small | medium | large | responsive
			shape: 'pill',         // pill | rect
			color: 'blue'         // gold | blue | silver | black
		},

	}
}

it all gives me successful message but when I press on the

but this time it's 400 error. Specifically something that says

Uncaught Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 400 error. Correlation id: 8831010276d3e, 8831010276d3e

{
    "name": "VALIDATION_ERROR",
    "message": "Invalid request - see details",
    "debug_id": "8831010276d3e",
    "information_link": "https://developer.paypal.com/docs/api/payments/#errors",
    "details": [
        {
            "field": "transactions.amount",
            "location": "body",
            "issue": "Cannot construct instance of `com.paypal.platform.payments.model.rest.common.Amount`, problem: INVALID_CURRENCY_AMOUNT_FORMAT line: 1, column: 74"
        }
    ]
}

    at XMLHttpRequest.xhrLoad (http.js:114)
    at Object._RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (app.js:86593)
    at receiveMessage (app.js:86698)
    at messageListener (app.js:86722)
    at Object._RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (types.js:121)
    at receiveMessage (index.js:114)
    at messageListener (index.js:140)

I tried to capture the authorized, completed and cancelled events ...

`  mounted () {
this.$on('paypal-paymentAuthorized', function (params) {
  console.log('paypal-paymentAuthorized fired: ', params)
})
this.$on('paypal-paymentCompleted', function (params) {
  console.log('paypal-paymentCompleted fired: ', params)
})
this.$on('paypal-paymentCancelled', function (params) {
  console.log('paypal-paymentCancelled fired: ', params)
})

},`
I also tried:

 `events: {
'paypal-paymentAuthorized': function (params) {
  console.log('paypal-paymentAuthorized fired: ', params)
},
'paypal-paymentCompleted': function (params) {
  console.log('paypal-paymentCompleted fired: ', params)
},
'paypal-paymentCancelled': function (params) {
  console.log('paypal-paymentCancelled fired: ', params)
}

},`

but it does not log anything? am I wrong ? or missing any paramter ?
thanks

I didn't found a way to add PayPal-Request-Id in headers :(
It's actually pretty close to experience options but, should be sanded in the header instead of body.
Maybe you know how to solve this issue?
https://developer.paypal.com/docs/api/reference/api-requests/#http-request-headers

hi~
I'am comfused why is this package packed so large?
Is there any way to reduce its size?
I used vue-cli to build the program
thanks~

Hey @khoaNguyen96 any plan on adding the PayPal experience options?

It'd be great to stop users filling in shipping info if not needed.

Cheers!

Hey, I think your wrapper is great! But could you document setting :dev="true" as setting env="sandbox"?
Or I would also suggest using :env="sandbox" or :env="production" in your wrapper to mimic the same language as the component.

Cheers!

I noticed there is a change on the card buttons. (Visa, Mastercard, etc).
It used to be once you click on them, they opened a new tab and the user filled his details on Paypal.
Now when a user clicks on a card button an inline form appears for the user to fill his/her data, and it always asks for a shipping address.
Has anyone a way to fix this to either revert to the previous way of working or at least disabling the shipping form?

Instead of "Paypal" in would like to show Pay here or just "Pay"

Regards

Hello,

<template>
<PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      :braintree="braintreeSdk"
      env="sandbox"
      @payment-authorized="test($event)"
      @payment-completed="test($event)"
      @payment-cancelled="test($event)"
    >
</PayPal>
</template>

<script>
import braintree from 'braintree-web'
import PayPal from 'vue-paypal-checkout'
...
methods: {
    test(event) {
      console.log(event)
    }
},
data() {
    return {
      credentials: {
        sandbox: '<sandbox client id>', // I set sandbox client id correctly
        production: '<production client id>'
      },
      braintreeSdk: braintree
    }
  }
</script>

I tried to test callbacks via test() function. Now I got an error called BraintreeError code: "CLIENT_INVALID_AUTHORIZATION", message: "Authorization is invalid. Make sure your client token or tokenization key is valid.", type: "MERCHANT" on browser console after I submit paypal checkout modal.

According to the braintree doc for paypal checkout, I have to set a client token properly which I generate on my server side to initiate braintree on browser side, but there is nothing about client token on README.md .

Am I missing something ?

How can I use this with your plugin?

https://developer.paypal.com/docs/checkout/integration-features/validation/#asynchronous-validation

I tried to modify it but it seems that this part of PayPal npm package is missing actions:

onClick: {
      type: 'function',
      required: false,
      noop: true,
      decorate: function decorate(original) {
        return function decorateOnClick(data) {

Long story short how can you validate form first and then allow PayPal actions to proceed?

I'm still learning view so please excuse my ignorance if this is overly obvious.

Currently I'm trying to watch the event emissions like so on my component:

this.$on('paypal-paymentAuthorized', data => { console.log('authorized:') console.log(data) })

however i have all 3 set up and haven't been able to get one to work yet. could you help me understand what i'm doing wrong.

Hi I am just figuring out how to include the shipping charge for the amount as i have line of item and i have fixed delivery charge but need to be from database to the paypal
{ currency_code: 'USD', value: (<?=$total;?> + <?=$delivery_charge;?>).toFixed(2), breakdown: { item_total: { currency_code: 'USD', value: <?=$total;?> }, shipping: { currency_code: 'USD', value: <?=$delivery_charge;?> } } },

i want to use configuration some think like about but i can't figure out how to overwrite the amount

can you please let me know how i can do that or provide any reference or guide

Based on the documentation , Specify allowed and disallowed funding sources :

// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
  allowed: [
    paypal.FUNDING.CARD,
    paypal.FUNDING.CREDIT
  ],
  disallowed: []
},

It looks like passing experience options is broken. When i use

<paypal-checkout
    ...
    :experience="experienceOptions"
    ...
>

...

data () {
  return {
    experienceOptions: {
      input_fields: {
        no_shipping: 1
      }
    }
  }
}

it ends up with error. Examining JSON data sent to the server it looks like the options are passed verbatim as part of the payment call, but when i do the same on PayPal Integration Demo it passes experience_profile_id: TXP-6LE46586NC7700531 instead.

Demo on the example site generates this WebProfile beforehand with POST call to https://www.sandbox.paypal.com/v1/payment-experience/web-profiles with following data:

{"input_fields":{"no_shipping":1},"name":"0.12354225931261098","temporary":true}

server response:

{"id":"TXP-6LE46586NC7700531","name":"0.12354225931261098","temporary":true,"input_fields":{"no_shipping":1}}

Quick grep through paypal-checkout sources for experience_profile_id shows the support should be there.

Basically, I would like the UI to get the customers' authorization only and capture the payment in my backend code. This allows my customers to be able to cancel the payment in a period (3 days from PayPal) without any PayPal transaction fee on me. Thanks.

Hello,

How to trigger paypal functions only if passed my own API validation? I see even @click event doesn't work in vue-paypal-checkout.

Thanks in advance

seems like there is no way to catch errors, such as "DUPLICATE_TRANSACTION"?
Unless i am mistaken?

style: {
    label: 'checkout',
    size:  'responsive',    // small | medium | large | responsive
    shape: 'pill',     // pill | rect
    color: 'gold'      // gold | blue | silver | black
}

I tried editing your package directly as I need this importantly for an specific project, but seems like it's loading compiled file and not vue file components?

Appreciate it if you can implement this soon.

I'm currently trying to implement vue-paypal-checkout as a nuxt plugin, but can’t get it to work.

/plugins/vue-paypal.js

import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'

Vue.use(PayPal, {name: 'paypal'})

nuxt.config.js

plugins: [
    { src: '~/plugins/vue-paypal.js', ssr: false }
]

Console error

[Vue warn]: Unknown custom element: <paypal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Any idea why this is not working?

What the product should be fill?

    credentials: {
          sandbox: 'AcW3Gianx9XLI34YI3elOy2zsxRuZmTImNC7qAEGC2S0huoCrlM-oUo6jDkGY3rvMW0V6JMek2dyeRui',
          production: 'xxx'
        },

Hi, I have read the documentation in the README.md file, but I haven't found a way to use sandbox mode.
I check the code and find that i have to set the prop "dev" to true to use the sandbox mode but it will be helpful if it is explained in the README.
Thanks

I don't know how to send the address to paypal. I hope I can choose the address on the page and pass it to PayPal instead of checking the address in PayPal after it logs in.
Can you tell me how to transmit and how to write the data?
Thank you very much.

That's what the official document says, but I don't know how to write it in vue.

When I click on the Paypal checkout button, I get these errors

Any plan on that?

I think you just need to allow developers to pass the braintree parameter in.

https://developer.paypal.com/demo/checkout/#/pattern/braintree

Everything works fine but how about I only want to save an order after the payment is successful? Is it possible? I want to execute a method after payment. thanks.

How to prevent this warning message from appearing in the browser

Is it possible to use this repo for advanced integration like this: https://github.com/paypal/paypal-checkout/blob/master/docs/button.md#advanced-integration ?

I don't see the finely grained control in docs.

Hi there,

this might not be the component's fault, but as the docs state that a "valid object with the Experience options" can be passed, I'm posting this here in the hope that someone has an idea.

This is what my experienceOptions look like:

      experienceOptions: {
        presentation: {
            ...
        },
        flow_config: {
          landing_page_type: 'Billing',
          user_action: 'Continue'
        },
        input_fields: {
          no_shipping: 1,
          address_override: 1
        }
      }

However, as soon as I set the user_action to 'Continue' (also tried small-caps 'continue'), I get an error from the API:

{
    "name": "VALIDATION_ERROR",
    "debug_id": "9a81813a1c23",
    "message": "Invalid request - see details",
    "information_link": "https://developer.paypal.com/docs/api/payment-experience/#errors",
    "details": [
        {
            "field": "flow_config.user_action",
            "issue": "Value is invalid (must be commit)"
        }
    ]
}

Any idea why I shouldn't be able to set the user_action to anything other than 'commit'? Maybe a combination with another (default) setting that prevents it? I don't want to use the "Pay now" approach, because I fear that a tech-savvy user could tamper with the cart amount, so I want to get the Payment ID and check that server-side before making the actual purchase. And as the component doesn't support Advanced Integration yet (see #36), I think there's no other option.

Any help appreciated.

I input a card information when I use the PayPal for payment, and success, then in my account I can fond the card, see the bellow snapshot:

Now, I use the account for second payment, it still need a more band card.

if I input the first card number, it will say

What happens when I click on an iPhone device and it doesn't respond?

Hi i'm using Nuxt and the products do not appear at the time of payment
my itemsPaypal variable
[ { "name": "kit 2K20", "quantity": 1, "description": "Brown hat.", "price": 15, "currency": "EUR" }, { "name": "kit 2 2K20", "quantity": 1, "description": "Brown hat.", "price": 20, "currency": "EUR" } ]

<no-ssr> <paypal-checkout env="sandbox" locale="fr_FR" :amount="total" currency="EUR" :client="credentials" :items="itemsPaypal" :experience="experienceOptions" v-on:payment-authorized="paymentAuthorized" v-on:payment-completed="paymentCompleted" v-on:payment-cancelled="paymentCancelled" ></paypal-checkout> </no-ssr>