Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matfish2/vue-stripe
Vue.js 2 Stripe checkout component
https://github.com/matfish2/vue-stripe
stripe vue vue-stripe
Last synced: 15 days ago
JSON representation
Vue.js 2 Stripe checkout component
- Host: GitHub
- URL: https://github.com/matfish2/vue-stripe
- Owner: matfish2
- License: mit
- Created: 2016-10-21T18:27:39.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-01T17:12:52.000Z (almost 6 years ago)
- Last Synced: 2024-10-02T06:29:00.777Z (about 1 month ago)
- Topics: stripe, vue, vue-stripe
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-stripe
- Size: 170 KB
- Stars: 58
- Watchers: 2
- Forks: 18
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Stripe
This package provides a convenient wrapper around Stripe's [checkout component](https://stripe.com/checkout) for vue.js 2
## Installation
```js
npm install vue-stripe
```
Require the script:
```js
import { StripeCheckout } from 'vue-stripe'
```
Register the component:
```js
Vue.component('stripe-checkout', StripeCheckout);
```
--- or ----
```js
new Vue({
components: {
'stripe-checkout': StripeCheckout
}
});
```
## Usage
Embed the component in your form as a direct HTML child.
If you are selling a single product this will do:
```html
```
The `product` object should match at least the bare minimum required by Stripe. E.g:
```js
{
name: 'Moby Dick',
description: 'I love whales',
amount: 100000 // 100$ in cents
}
```
Additional props:
* `options` Additional options to be merged into the main configuration object (e.g `zipCode:true`)
* `button` Button text. Default: 'Purchase'
* `formId` Set the id for the div containing the form, allows for multiple components per page
* `button-class` HTML `class` attribute for the button. Default: `btn btn-primary`
* `on-success` How to proceed once the checkout form was submitted.
Defaults to `submit`, which submits the main form. Set to `broadcast` to handle submission by yourself.
When 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`>=0.9.0).
Both options require a `product-id` prop, which references the current product id on your instance.
This would normally be a value from a select box or a router param.
Option A:
```html
Product A
Product B
Product C
```
```js
{
data: {
products:[
{
id:1,
name:'Product A',
description:'Product A Description',
amount:100000
},
{
id:2,
name:'Product B',
description:'Product B Description',
amount:50000
},
{
id:3,
name:'Product C',
description:'Product C Description',
amount:60000
}
]
}
}
```
Option B:
```html
Product A
Product B
Product C
```
Server side Example (Laravel)
```php
Route::get('products', function() {
$productId = request('productId');
return Product::find($productId);
});
```
Once the checkout form was submitted the main form will be automatically submitted.
The request will include the `stripeEmail` and `stripeToken` parameters, which will enable you to process the payment and redirect back.
If you wish to handle submission by yourself set the `on-success` prop to `broadcast`.
## Events
Listen to events using the event bus:
```js
import { Bus } from 'vue-stripe';
Bus.$on('vue-stripe.success', payload => {
//
});
```
* `vue-stripe.not-found` Fires off when the selected product was not found
* `vue-stripe.error` Fires off when an invalid response was returned from the server using the `products-url` prop
* `vue-stripe.success` Fires off if `on-success` is set to `broadcast`. Sends through the email and the token.
## Development
To build the project:
```
npm run build
```