vue-paypal-checkout

    3.2.0 • Public • Published

    vue-paypal-checkout

    Greenkeeper badge

    A simple Vue.js wrapper component for paypal-checkout

    Travis npm David

    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)

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-paypal-checkout@2.0.0/dist/vue-paypal-checkout.min.js"></script>

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

    <div id="app">
      <paypal-checkout
        amount="10.00"
        currency="USD"
        :client="paypal">
      </paypal-checkout>
    </div>
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        paypal: {
          sandbox: '<sandbox client id>',
          production: '<production client id>'
        }
      }
    })
    </script> 

    Usage with Vue Loader

    Simply import the package into your .vue file.

    import PayPal from 'vue-paypal-checkout'
     
    export default {
      data() {
        return {
          paypal: {
            sandbox: '<sandbox client id>',
            production: '<production client id>'
          }
        }
      },
      components: {
        PayPal
      }
    }

    Using the PayPal component:

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials">
    </PayPal>
    <script>
    export default {
      data () {
        return {
          credentials: {
            sandbox: '<sandbox client id>',
            production: '<production client id>'
          }
        }
      }
    }
    </script> 

    Specifying the PayPal environment

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

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      env="sandbox">
    </PayPal>

    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:

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      invoice-number="<some invoice number>">
    </PayPal>

    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:

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      :items="myItems">
    </PayPal>
    <script>
    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"
              }
          ]
        }
      }
    }
    </script> 

    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!

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      :experience="experienceOptions">
    </PayPal>
    <script>
    export default {
      data () {
        return {
          credentials: {
            sandbox: '<sandbox client id>',
            production: '<production client id>'
          },
          experienceOptions: {
            input_fields: {
              no_shipping: 1
            }
          }
        }
      }
    }
    </script> 

    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!

     <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      :braintree="braintreeSdk">
    </PayPal>
    <script>
    export default {
      data () {
        return {
          credentials: {
            sandbox: '<sandbox client id>',
            production: '<production client id>'
          },
          braintreeSdk: window.braintree
        }
      }
    }
    </script> 
    <script>
    import braintree from 'braintree-web'
     
    export default {
      data () {
        return {
          credentials: {
            sandbox: '<sandbox client id>',
            production: '<production client id>'
          },
          braintreeSdk: braintree
        }
      }
    }
     
    </script> 

    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 }
      ],
    </script>

    and use it like this

     <no-ssr>
        <paypal-checkout
        env="sandbox"
        amount="10000"
        currency="IDR"
        locale="fr_FR"
        :client="paypal"
        :invoice-number="'201705051001'">
        </paypal-checkout>
    </no-ssr>

    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:

     <PayPal
      amount="10.00"
      currency="USD"
      locale="en_US"
      :client="credentials">
    </PayPal>

    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.

    <PayPal
      amount="10.00"
      currency="USD"
      :client="credentials"
      notify-url="<your-ipn-url>">
    </PayPal>

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

    data () {
      myStyle: {
        {
          label: 'checkout',
          size:  'responsive',
          shape: 'pill',
          color: 'gold'
        }
      }
    }
     <PayPal
      amount="10.00"
      currency="USD"
      :button-style="myStyle"
      :client="credentials">
    </PayPal>

    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:

    {  
      "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

    {
      "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": "npurayil-uspr-60@paypal.com",
          "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.

    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.

    Keywords

    none

    Install

    npm i vue-paypal-checkout

    DownloadsWeekly Downloads

    1,336

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    2.67 MB

    Total Files

    8

    Last publish

    Collaborators

    • khoanguyen96