Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/khoanguyen96/vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout
https://github.com/khoanguyen96/vue-paypal-checkout

paypal vue

Last synced: 10 days ago
JSON representation

A simple Vue.js wrapper component for paypal-checkout

Lists

README 

        
# vue-paypal-checkout



## Deprecated

Please use the official PayPal Checkout Components: https://github.com/paypal/paypal-checkout-components



[![Greenkeeper badge](https://badges.greenkeeper.io/khoanguyen96/vue-paypal-checkout.svg)](https://greenkeeper.io/)



> A simple Vue.js wrapper component for `paypal-checkout`



[![Travis](https://img.shields.io/travis/khoanguyen96/vue-paypal-checkout.svg)](https://travis-ci.org/khoanguyen96/vue-paypal-checkout)

[![npm](https://img.shields.io/npm/v/vue-paypal-checkout.svg)](https://www.npmjs.com/package/vue-paypal-checkout)

[![David](https://img.shields.io/david/khoanguyen96/vue-paypal-checkout.svg)](https://david-dm.org/khoanguyen96/vue-paypal-checkout)



## BREAKING CHANGES

Recently changed [event names](#events-fired-by-the-simple-paypal-component) 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)



``` html



```



By including vue-paypal-checkout in a script tag, it will automagically register the component into Vue.js

``` html



  

  



```



``` html



var app = new Vue({

  el: '#app',

  data: {

    paypal: {

      sandbox: '<sandbox client id>',

      production: '<production client id>'

    }

  }

})



```



## Usage with Vue Loader

Simply import the package into your .vue file.



``` javascript

import PayPal from 'vue-paypal-checkout'



export default {

  data() {

    return {

      paypal: {

        sandbox: '',

        production: ''

      }

    }

  },

  components: {

    PayPal

  }

}

```



### Using the PayPal component:

``` html

 



```



``` html



export default {

  data () {

    return {

      credentials: {

        sandbox: '<sandbox client id>',

        production: '<production client id>'

      }

    }

  }

}



```



### Specifying the PayPal environment



For testing purposes, just pass in the `env` prop as `sandbox`:

``` html

 



```



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:



``` html

 



```



### 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](https://developer.paypal.com/docs/api/payments/#definition-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:

``` html

 



```



``` html



export default {

  data () {

    return {

      credentials: {

        sandbox: '<sandbox client id>',

        production: '<production client id>'

      },

      myItems: [

        {

          "name": "hat",

          "description": "Brown hat.",

          "quantity": "1",

          "price": "5",

          "currency": "USD"

          },

          {

          "name": "handbag",

          "description": "Black handbag.",

          "quantity": "1",

          "price": "5",

          "currency": "USD"

          }

      ]

    }

  }

}



```



#### Using PayPal Experience Options (v2.2.0+)



Just pass a valid object with the [Experience options](https://developer.paypal.com/docs/api/payment-experience/) you require in the `experience` prop:



Kudos to @ilrock for mentioning the PayPal Experience options!



``` html

 



```



``` html



export default {

  data () {

    return {

      credentials: {

        sandbox: '<sandbox client id>',

        production: '<production client id>'

      },

      experienceOptions: {

        input_fields: {

          no_shipping: 1

        }

      }

    }

  }

}



```



#### 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!



``` html

 



```



``` html



export default {

  data () {

    return {

      credentials: {

        sandbox: '<sandbox client id>',

        production: '<production client id>'

      },

      braintreeSdk: window.braintree

    }

  }

}



```



``` html



import braintree from 'braintree-web'



export default {

  data () {

    return {

      credentials: {

        sandbox: '<sandbox client id>',

        production: '<production client id>'

      },

      braintreeSdk: braintree

    }

  }

}



```



## Usage with Nuxt JS

Simply add the script at nuxt.config.js head property



```

export default {

  head: {

    script: [

      { src: 'https://unpkg.com/[email protected]/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

``` html

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

``` html

  plugins: [

    { src: '~/plugins/paypal.js', ssr: false }

  ],



```



and use it like this

``` html

 

	

	



```



#### 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:



``` html

 



```



#### 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.



``` html



```



For more information on implementing IPN, take a look at the [PayPal docs](https://developer.paypal.com/docs/classic/ipn/integration-guide/IPNIntro/).



#### Button Style

`paypal-checkout` allows changing the style of the button via a style object like so:



``` js

{

    label: 'checkout',

    size:  'responsive',    // small | medium | large | responsive

    shape: 'pill',         // pill | rect

    color: '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.



``` js

data () {

  myStyle: {

    {

      label: 'checkout',

      size:  'responsive',

      shape: 'pill',

      color: 'gold'

    }

  }

}

```



``` html

 



```



#### 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:



``` json

{  

  "intent": "sale",

  "payerID": "UVGR8M6W9V7ZA",

  "paymentID": "PAY-3L661344P7749433KLD2R5ZQ",

  "paymentToken": "EC-0H346145A8442392H",

  "returnUrl" :"https://www.sandbox.paypal.com/?paymentId=PAY-3L661344P7749433KLD2R5ZQ&token=EC-0H346145A8442392H&PayerID=UVGR8M6W9V7ZA"

}

```



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](https://developer.paypal.com/docs/integration/direct/payments/paypal-payments/#execute-payment)



``` json

{

  "id": "PAY-4N746561P0587231SKQQK6MY",

  "create_time": "2014-09-22T23:22:27Z",

  "update_time": "2014-09-22T23:31:13Z",

  "state": "approved",

  "intent": "sale",

  "payer": {

    "payment_method": "paypal",

    "payer_info": {

      "email": "[email protected]",

      "first_name": "Brian",

      "last_name": "Robinson",

      "payer_id": "JMKDKJ4D7DG7G",

      "shipping_address": {

        "line1": "4thFloor",

        "line2": "unit#34",

        "city": "SAn Jose",

        "state": "CA",

        "postal_code": "95131",

        "country_code": "US",

        "phone": "011862212345678",

        "recipient_name": "HelloWorld"

      }

    }

  }

}

```



## License and Reference

vue-paypal-checkout is available under the [MIT license](http://opensource.org/licenses/MIT).



vue-paypal-checkout is a wrapper Vue component that uses `paypal-checkout` which is under the [Apache 2.0 License](https://opensource.org/licenses/Apache-2.0)



For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).