{"id":13475045,"url":"https://github.com/matfish2/vue-stripe","last_synced_at":"2025-04-11T01:01:40.742Z","repository":{"id":57396640,"uuid":"71587864","full_name":"matfish2/vue-stripe","owner":"matfish2","description":"Vue.js 2 Stripe checkout component","archived":false,"fork":false,"pushed_at":"2019-02-01T17:12:52.000Z","size":174,"stargazers_count":58,"open_issues_count":7,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T21:42:30.904Z","etag":null,"topics":["stripe","vue","vue-stripe"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-stripe","language":"Vue","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/matfish2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T18:27:39.000Z","updated_at":"2024-03-29T19:17:51.000Z","dependencies_parsed_at":"2022-09-13T12:02:42.227Z","dependency_job_id":null,"html_url":"https://github.com/matfish2/vue-stripe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matfish2","download_url":"https://codeload.github.com/matfish2/vue-stripe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322600,"owners_count":21084336,"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":["stripe","vue","vue-stripe"],"created_at":"2024-07-31T16:01:16.938Z","updated_at":"2025-04-11T01:01:40.678Z","avatar_url":"https://github.com/matfish2.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Vue Stripe\n\nThis package provides a convenient wrapper around Stripe's [checkout component](https://stripe.com/checkout) for vue.js 2\n\n## Installation\n\n```js\nnpm install vue-stripe\n```\n\nRequire the script:\n\n```js\nimport { StripeCheckout } from 'vue-stripe'\n```\n\nRegister the component:\n\n```js\nVue.component('stripe-checkout', StripeCheckout);\n```\n\n--- or ----\n\n```js\nnew Vue({\n    components: {\n        'stripe-checkout': StripeCheckout\n    }\n});\n```\n\n## Usage\n\nEmbed the component in your form as a direct HTML child.\n\nIf you are selling a single product this will do:\n\n```html\n\u003cform action=\"/process-payment\" method=\"POST\"\u003e\n    \u003cstripe-checkout\n        stripe-key=\"my-stripe-key\"\n        product=\"product\"\u003e\n    \u003c/stripe-checkout\u003e\n\u003c/form\u003e\n```\n\nThe `product` object should match at least the bare minimum required by Stripe. E.g:\n\n```js\n{\n    name: 'Moby Dick',\n    description: 'I love whales',\n    amount: 100000 // 100$ in cents\n}\n```\n\nAdditional props:\n\n*  `options` Additional options to be merged into the main configuration object (e.g `zipCode:true`)\n*  `button` Button text. Default: 'Purchase'\n*  `formId` Set the id for the div containing the form, allows for multiple components per page\n* `button-class` HTML `class` attribute for the button. Default: `btn btn-primary`\n*  `on-success` How to proceed once the checkout form was submitted.\nDefaults to `submit`, which submits the main form. Set to `broadcast` to handle submission by yourself.\n\nWhen selling multiple products you can either pass them all to the client (Option A) or, if you are dealing with an espescially large number of products, get the relevant product via ajax (Option B. Requires `vue-resource`\u003e=0.9.0).\n\nBoth options require a `product-id` prop, which references the current product id on your instance.\nThis would normally be a value from a select box or a router param.\n\nOption A:\n\n```html\n\u003cform action=\"/process-payment\" method=\"POST\"\u003e\n    \u003cselect v-model=\"productId\"\u003e\n        \u003coption value=\"1\"\u003eProduct A\u003c/option\u003e\n        \u003coption value=\"2\"\u003eProduct B\u003c/option\u003e\n        \u003coption value=\"3\"\u003eProduct C\u003c/option\u003e\n    \u003c/select\u003e\n\n    \u003cstripe-checkout\n        stripe-key=\"my-stripe-key\"\n        :products=\"products\"\n        :product-id=\"productId\"\u003e\n    \u003c/stripe-checkout\u003e\n\u003c/form\u003e\n```\n\n```js\n{\n    data: {\n        products:[\n            {\n                id:1,\n                name:'Product A',\n                description:'Product A Description',\n                amount:100000\n            },\n            {\n                id:2,\n                name:'Product B',\n                description:'Product B Description',\n                amount:50000\n            },\n            {\n                id:3,\n                name:'Product C',\n                description:'Product C Description',\n                amount:60000\n            }\n        ]\n    }\n}\n```\n\nOption B:\n\n```html\n\u003cform action=\"/process-payment\" method=\"POST\"\u003e\n    \u003cselect v-model=\"productId\"\u003e\n        \u003coption value=\"1\"\u003eProduct A\u003c/option\u003e\n        \u003coption value=\"2\"\u003eProduct B\u003c/option\u003e\n        \u003coption value=\"3\"\u003eProduct C\u003c/option\u003e\n    \u003c/select\u003e\n\n    \u003cstripe-checkout\n        stripe-key=\"my-stripe-key\"\n        products-url=\"/products\"\n        :productId=\"productId\"\u003e\n    \u003c/stripe-checkout\u003e\n\u003c/form\u003e\n```\n\nServer side Example (Laravel)\n\n```php\nRoute::get('products', function() {\n    $productId = request('productId');\n\n    return Product::find($productId);\n});\n```\n\nOnce the checkout form was submitted the main form will be automatically submitted.\nThe request will include the `stripeEmail` and `stripeToken` parameters, which will enable you to process the payment and redirect back.\nIf you wish to handle submission by yourself set the `on-success` prop to `broadcast`.\n\n## Events\n\nListen to events using the event bus:\n\n```js\nimport { Bus } from 'vue-stripe';\n\nBus.$on('vue-stripe.success', payload =\u003e {\n    //\n});\n```\n\n* `vue-stripe.not-found` Fires off when the selected product was not found\n* `vue-stripe.error` Fires off when an invalid response was returned from the server using the `products-url` prop\n* `vue-stripe.success` Fires off if `on-success` is set to `broadcast`. Sends through the email and the token.\n\n## Development\n\nTo build the project:\n\n```\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfish2%2Fvue-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatfish2%2Fvue-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfish2%2Fvue-stripe/lists"}