vue-paypal-checkout
A simple Vue.js wrapper component for
paypal-checkout
BREAKING CHANGES
Recently changed event names due to handlers not firing in HTML.
Usage with Vue itself
Simply include Vue and vue-paypal-checkout
into your html file (using unpkg cdn)
By including vue-paypal-checkout in a script tag, it will automagically register the component into Vue.js
Usage with Vue Loader
Simply import the package into your .vue file.
{returnpaypal:sandbox: '<sandbox client id>'production: '<production client id>'}components:PayPal
Using the PayPal component:
Specifying the PayPal environment
For testing purposes, just pass in the env
prop as sandbox
:
By default, the environment is for production
...
Further examples will be using the format for VueJS Single File Components with Vue Loader. There really shouldn't be any major changes required to get it to work in a basic HTML + Vue template.
Specifying an Invoice Number
You can also specify a specific invoice number if you need so:
Specifying Items
Optionally, according to the PayPal Payments API documents, you can list out any items along with your transaction.
For more information, PayPal Item List
NOTE
The items you specify must total up to the be the same amount you specified in the amount
prop. In this example the items total up to be 10 USD.
Using the PayPal component:
Using PayPal Experience Options (v2.2.0+)
Just pass a valid object with the Experience options you require in the experience
prop:
Kudos to @ilrock for mentioning the PayPal Experience options!
Using Braintree SDK (v2.2.0+)
Using Braintree with the PayPal Button is possible as well. Just pass in the Braintree (Web) SDK via the braintree
prop:
Kudos to @portwatcher for suggesting Braintree support!
Usage with Nuxt JS
Simply add the script at nuxt.config.js head property
export default {
head: {
script: [
{ src: 'https://unpkg.com/vue-paypal-checkout@2.0.0/dist/vue-paypal-checkout.min.js' }
]
}
}
By including vue-paypal-checkout in a script tag, it will automagically register the component into Nuxt js
Usage with Nuxt JS - NPM
npm install vue-paypal-checkout
create a plugins called paypal.js
import Vue from 'vue'import PayPal from 'vue-paypal-checkout'Vue.component('paypal-checkout', PayPal)
in nuxt-config don't forget to add it on plugins, and make sure you disable SSR
plugins: [{ src: '~/plugins/paypal.js', ssr: false }],
and use it like this
Changing Locale (v2.3.3+)
paypal-checkout
allows changing the locale of the button via a locale
parameter. There's a locale
prop you can use to accomplish the same:
Setting UP IPN Notifications (v2.3.5+)
According to the Payments API of PayPal, setting a notify_url
on the transaction object will allow notifications to be sent to an IPN Listener.
There's a notify_url
prop you can use to accomplish the same.
For more information on implementing IPN, take a look at the PayPal docs.
Button Style
paypal-checkout
allows changing the style of the button via a style object like so:
label: 'checkout'size: 'responsive' // small | medium | large | responsiveshape: 'pill' // pill | rectcolor: 'gold' // gold | blue | silver | black
Due to a Vue.js restriction, you'll have to pass it as a button-style
prop to the component instead if you want to style your PayPal Checkout Button.
{myStyle:label: 'checkout'size: 'responsive'shape: 'pill'color: 'gold'}
Events fired by the Simple PayPal component:
Each of these events fired also contain a payload which is essentially the response sent back from PayPal.
v3.0.0+:
payment-authorized
payment-completed
payment-cancelled
v2.3.5 and below:
paypal-paymentAuthorized
paypal-paymentCompleted
paypal-paymentCancelled
In the instance of payment-authorized
or paypal-paymentAuthorized
(v2.3.5 and below), you will get back a response object similar to this:
In the instance of payment-completed
or paypal-paymentCompleted
(v2.3.5 and below), you will get back a response object similar to this:
Sample Payment Execute Response
License and Reference
vue-paypal-checkout is available under the MIT license.
vue-paypal-checkout is a wrapper Vue component that uses paypal-checkout
which is under the Apache 2.0 License
For detailed explanation on how things work, consult the docs for vue-loader.