vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout

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

<div id="app">
  <paypal-checkout
    amount="10.00"
    currency="USD"
    :client="paypal"
    invoiceNumber="201701011000">
  </paypal-checkout>
</div>

Usage with Vue Loader

Simply import the package into your .vue file.

import PayPal from 'vue-paypal-checkout'

...
components: {
  PayPal
}

Using the PayPal component:

 <PayPal
  amount="10.00"
  currency="USD"
  :client="credentials"
  invoiceNumber="201701011000">
</PayPal>

<script>
  export default {
    data () {
      return {
        credentials: {
          sandbox: '<sandbox client id>',
          production: '<production client id>'
        }
      }
    }
  }
</script>

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"
  invoiceNumber="201701011000"
  :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>

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 buttonStyle 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"
  :buttonStyle="myStyle"
  currency="USD"
  :client="credentials"
  invoiceNumber="201701011000"
  :items="myItems">
</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.

• paypal-paymentAuthorized
• paypal-paymentCompleted
• paypal-paymentCancelled

In the instance of paypal-paymentAuthorized, 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 paypal-paymentCompleted, 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.