{"id":13472676,"url":"https://github.com/cocoastorm/vue-paypal-checkout","last_synced_at":"2025-03-26T17:31:05.854Z","repository":{"id":57158373,"uuid":"81982824","full_name":"cocoastorm/vue-paypal-checkout","owner":"cocoastorm","description":"A simple Vue.js wrapper component for paypal-checkout","archived":true,"fork":false,"pushed_at":"2020-03-24T07:24:59.000Z","size":6168,"stargazers_count":153,"open_issues_count":38,"forks_count":65,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-24T05:54:44.987Z","etag":null,"topics":["paypal","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cocoastorm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-14T19:49:39.000Z","updated_at":"2023-12-03T09:53:35.000Z","dependencies_parsed_at":"2022-09-02T15:50:38.787Z","dependency_job_id":null,"html_url":"https://github.com/cocoastorm/vue-paypal-checkout","commit_stats":null,"previous_names":["khoanguyen96/vue-paypal-checkout"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cocoastorm%2Fvue-paypal-checkout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cocoastorm%2Fvue-paypal-checkout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cocoastorm%2Fvue-paypal-checkout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cocoastorm%2Fvue-paypal-checkout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cocoastorm","download_url":"https://codeload.github.com/cocoastorm/vue-paypal-checkout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245702204,"owners_count":20658562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["paypal","vue"],"created_at":"2024-07-31T16:00:56.980Z","updated_at":"2025-03-26T17:31:05.499Z","avatar_url":"https://github.com/cocoastorm.png","language":"JavaScript","funding_links":["https://developer.paypal.com/docs/api/payments/","https://developer.paypal.com/docs/api/payment-experience/","https://developer.paypal.com/docs/classic/ipn/integration-guide/IPNIntro/","https://www.sandbox.paypal.com/?paymentId=PAY-3L661344P7749433KLD2R5ZQ\u0026token=EC-0H346145A8442392H\u0026PayerID=UVGR8M6W9V7ZA","https://developer.paypal.com/docs/integration/direct/payments/paypal-payments/"],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-paypal-checkout\n\n## Deprecated\nPlease use the official PayPal Checkout Components: https://github.com/paypal/paypal-checkout-components\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/khoanguyen96/vue-paypal-checkout.svg)](https://greenkeeper.io/)\n\n\u003e A simple Vue.js wrapper component for `paypal-checkout`\n\n[![Travis](https://img.shields.io/travis/khoanguyen96/vue-paypal-checkout.svg)](https://travis-ci.org/khoanguyen96/vue-paypal-checkout)\n[![npm](https://img.shields.io/npm/v/vue-paypal-checkout.svg)](https://www.npmjs.com/package/vue-paypal-checkout)\n[![David](https://img.shields.io/david/khoanguyen96/vue-paypal-checkout.svg)](https://david-dm.org/khoanguyen96/vue-paypal-checkout)\n\n## BREAKING CHANGES\nRecently changed [event names](#events-fired-by-the-simple-paypal-component) due to handlers not firing in HTML.\n\n## Usage with Vue itself\nSimply include Vue and `vue-paypal-checkout` into your html file (using unpkg cdn)\n\n``` html\n\u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-paypal-checkout@2.0.0/dist/vue-paypal-checkout.min.js\"\u003e\u003c/script\u003e\n```\n\nBy including vue-paypal-checkout in a script tag, it will automagically register the component into Vue.js\n``` html\n\u003cdiv id=\"app\"\u003e\n  \u003cpaypal-checkout\n    amount=\"10.00\"\n    currency=\"USD\"\n    :client=\"paypal\"\u003e\n  \u003c/paypal-checkout\u003e\n\u003c/div\u003e\n```\n\n``` html\n\u003cscript\u003e\nvar app = new Vue({\n  el: '#app',\n  data: {\n    paypal: {\n      sandbox: '\u003csandbox client id\u003e',\n      production: '\u003cproduction client id\u003e'\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n## Usage with Vue Loader\nSimply import the package into your .vue file.\n\n``` javascript\nimport PayPal from 'vue-paypal-checkout'\n\nexport default {\n  data() {\n    return {\n      paypal: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      }\n    }\n  },\n  components: {\n    PayPal\n  }\n}\n```\n\n### Using the PayPal component:\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\u003e\n\u003c/PayPal\u003e\n```\n\n``` html\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      credentials: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Specifying the PayPal environment\n\nFor testing purposes, just pass in the `env` prop as `sandbox`:\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  env=\"sandbox\"\u003e\n\u003c/PayPal\u003e\n```\n\nBy default, the environment is for `production`...\n\nFurther 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.\n\n### Specifying an Invoice Number\n\nYou can also specify a specific invoice number if you need so:\n\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  invoice-number=\"\u003csome invoice number\u003e\"\u003e\n\u003c/PayPal\u003e\n```\n\n### Specifying Items\nOptionally, according to the PayPal Payments API documents, you can list out any items along with your transaction.\n\nFor more information, [PayPal Item List](https://developer.paypal.com/docs/api/payments/#definition-item_list)\n\n**NOTE** \n\nThe 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.\n\n### Using the PayPal component:\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  :items=\"myItems\"\u003e\n\u003c/PayPal\u003e\n```\n\n``` html\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      credentials: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      },\n      myItems: [\n        {\n          \"name\": \"hat\",\n          \"description\": \"Brown hat.\",\n          \"quantity\": \"1\",\n          \"price\": \"5\",\n          \"currency\": \"USD\"\n          },\n          {\n          \"name\": \"handbag\",\n          \"description\": \"Black handbag.\",\n          \"quantity\": \"1\",\n          \"price\": \"5\",\n          \"currency\": \"USD\"\n          }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### Using PayPal Experience Options (v2.2.0+)\n\nJust pass a valid object with the [Experience options](https://developer.paypal.com/docs/api/payment-experience/) you require in the `experience` prop:\n\nKudos to @ilrock for mentioning the PayPal Experience options!\n\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  :experience=\"experienceOptions\"\u003e\n\u003c/PayPal\u003e\n```\n\n``` html\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      credentials: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      },\n      experienceOptions: {\n        input_fields: {\n          no_shipping: 1\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n#### Using Braintree SDK (v2.2.0+)\n\nUsing Braintree with the PayPal Button is possible as well. Just pass in the Braintree (Web) SDK via the `braintree` prop:\n\nKudos to @portwatcher for suggesting Braintree support!\n\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  :braintree=\"braintreeSdk\"\u003e\n\u003c/PayPal\u003e\n```\n\n``` html\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      credentials: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      },\n      braintreeSdk: window.braintree\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n``` html\n\u003cscript\u003e\nimport braintree from 'braintree-web'\n\nexport default {\n  data () {\n    return {\n      credentials: {\n        sandbox: '\u003csandbox client id\u003e',\n        production: '\u003cproduction client id\u003e'\n      },\n      braintreeSdk: braintree\n    }\n  }\n}\n\n\u003c/script\u003e\n```\n\n## Usage with Nuxt JS\nSimply add the script at nuxt.config.js head property\n\n```\nexport default {\n  head: {\n    script: [\n      { src: 'https://unpkg.com/vue-paypal-checkout@2.0.0/dist/vue-paypal-checkout.min.js' }\n    ]\n  }\n }\n```\n\nBy including vue-paypal-checkout in a script tag, it will automagically register the component into Nuxt js\n\n## Usage with Nuxt JS - NPM\n```\nnpm install vue-paypal-checkout\n```\ncreate a plugins called paypal.js\n``` html\nimport Vue from 'vue'\nimport PayPal from 'vue-paypal-checkout'\nVue.component('paypal-checkout', PayPal)\n```\n\n\nin nuxt-config don't forget to add it on plugins, and make sure you disable SSR\n``` html\n  plugins: [\n    { src: '~/plugins/paypal.js', ssr: false }\n  ],\n\u003c/script\u003e\n```\n\n\nand use it like this\n``` html\n \u003cno-ssr\u003e\n\t\u003cpaypal-checkout\n\tenv=\"sandbox\"\n\tamount=\"10000\"\n\tcurrency=\"IDR\"\n\tlocale=\"fr_FR\"\n\t:client=\"paypal\"\n\t:invoice-number=\"'201705051001'\"\u003e\n\t\u003c/paypal-checkout\u003e\n\u003c/no-ssr\u003e\n```\n\n#### Changing Locale (v2.3.3+)\n`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:\n\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  locale=\"en_US\"\n  :client=\"credentials\"\u003e\n\u003c/PayPal\u003e\n```\n\n#### Setting UP IPN Notifications (v2.3.5+)\nAccording to the Payments API of PayPal, setting a `notify_url` on the transaction object will allow notifications to be sent to an IPN Listener.\n\nThere's a `notify_url` prop you can use to accomplish the same.\n\n``` html\n\u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :client=\"credentials\"\n  notify-url=\"\u003cyour-ipn-url\u003e\"\u003e\n\u003c/PayPal\u003e\n```\n\nFor more information on implementing IPN, take a look at the [PayPal docs](https://developer.paypal.com/docs/classic/ipn/integration-guide/IPNIntro/).\n\n#### Button Style\n`paypal-checkout` allows changing the style of the button via a style object like so:\n\n``` js\n{\n    label: 'checkout',\n    size:  'responsive',    // small | medium | large | responsive\n    shape: 'pill',         // pill | rect\n    color: 'gold'         // gold | blue | silver | black\n}\n```\n\nDue 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.\n\n``` js\ndata () {\n  myStyle: {\n    {\n      label: 'checkout',\n      size:  'responsive',\n      shape: 'pill',\n      color: 'gold'\n    }\n  }\n}\n```\n\n``` html\n \u003cPayPal\n  amount=\"10.00\"\n  currency=\"USD\"\n  :button-style=\"myStyle\"\n  :client=\"credentials\"\u003e\n\u003c/PayPal\u003e\n```\n\n#### Events fired by the Simple PayPal component:\n\nEach of these events fired also contain a payload which is essentially the response sent back from PayPal.\n\nv3.0.0+:\n\n+ `payment-authorized`\n+ `payment-completed`\n+ `payment-cancelled`\n\nv2.3.5 and below:\n\n+ `paypal-paymentAuthorized`\n+ `paypal-paymentCompleted`\n+ `paypal-paymentCancelled`\n\nIn the instance of `payment-authorized` or `paypal-paymentAuthorized` (v2.3.5 and below), you will get back a response object similar to this:\n\n``` json\n{  \n  \"intent\": \"sale\",\n  \"payerID\": \"UVGR8M6W9V7ZA\",\n  \"paymentID\": \"PAY-3L661344P7749433KLD2R5ZQ\",\n  \"paymentToken\": \"EC-0H346145A8442392H\",\n  \"returnUrl\" :\"https://www.sandbox.paypal.com/?paymentId=PAY-3L661344P7749433KLD2R5ZQ\u0026token=EC-0H346145A8442392H\u0026PayerID=UVGR8M6W9V7ZA\"\n}\n```\n\nIn the instance of `payment-completed` or `paypal-paymentCompleted` (v2.3.5 and below), you will get back a response object similar to this:\n\n[Sample Payment Execute Response](https://developer.paypal.com/docs/integration/direct/payments/paypal-payments/#execute-payment)\n\n``` json\n{\n  \"id\": \"PAY-4N746561P0587231SKQQK6MY\",\n  \"create_time\": \"2014-09-22T23:22:27Z\",\n  \"update_time\": \"2014-09-22T23:31:13Z\",\n  \"state\": \"approved\",\n  \"intent\": \"sale\",\n  \"payer\": {\n    \"payment_method\": \"paypal\",\n    \"payer_info\": {\n      \"email\": \"npurayil-uspr-60@paypal.com\",\n      \"first_name\": \"Brian\",\n      \"last_name\": \"Robinson\",\n      \"payer_id\": \"JMKDKJ4D7DG7G\",\n      \"shipping_address\": {\n        \"line1\": \"4thFloor\",\n        \"line2\": \"unit#34\",\n        \"city\": \"SAn Jose\",\n        \"state\": \"CA\",\n        \"postal_code\": \"95131\",\n        \"country_code\": \"US\",\n        \"phone\": \"011862212345678\",\n        \"recipient_name\": \"HelloWorld\"\n      }\n    }\n  }\n}\n```\n\n## License and Reference\nvue-paypal-checkout is available under the [MIT license](http://opensource.org/licenses/MIT).\n\nvue-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)\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcocoastorm%2Fvue-paypal-checkout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcocoastorm%2Fvue-paypal-checkout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcocoastorm%2Fvue-paypal-checkout/lists"}