vue-stripe / vue-stripe Goto Github PK
View Code? Open in Web Editor NEWStripe Checkout & Elements for Vue.js
Home Page: https://vuestripe.com
License: MIT License
Stripe Checkout & Elements for Vue.js
Home Page: https://vuestripe.com
License: MIT License
There are breaking changes in recent update. I guess it would be helpful to mention it in the docs. I just had to quickly downgrade to 1.0.11 to keep my app working. I'll try to create a PR with docs update.
Is it easy possible to ask for the shipping address in the stripe checkout form and store it somewhere at stripe?
For my usecase of the plugin, I would need to know if the user closed the checkout window of the transaction to return sooner in my own steps.
As I see, the actual closed method is called whenever the modal is closed, even if it worked. Is it possible to have a way to know that the transaction has not been fullfilled?
Would be appreciated. And thanks again for your nice plugin.
I am attempting to get javascript to make the right number have a decimal point in it example 9999.99 however i cannot seem to get it to behave properly. Do you have any advice?
This doc shows additional parameters that are also passed as part of token but I don't see how to use them. I want to ask user to fill in their name for example so I could register them at the same time instead ask them again for registration. Like the image:
Since 3D Secure is needed for some cards it would be nice that this plugin implements it.
Here is an exemple I fould about supporting 3D Secure for Stripe Checkout if it can be useful : https://jsfiddle.net/ywain/5j580jxa/
This might seem like a dumb question, but is there a way to import and use this in one component instead of registering the plugin globally?
Getting the following error in console from Stripe Component.
StripeCheckout.open: Unrecognized option 'label'. Did you mean 'name'?
You can learn about the available configuration options in the Checkout docs:
https://stripe.com/docs/checkout
This is solved by specifying the following in package.json as a dependency, then running npm install
:
"rollup-plugin-commonjs": "^ 10.0.1",
Originally posted by @seeARMS in #66 (comment)
I need to use stripeEmail to create a customer on my server, how do I access this after creating the charge with this plugin?
I can send the token, but what else can I grab + how?
Thanks!
The amount field on the checkout is currently not reactive, any changes made on the vue instance are not reflecting on checkout component
As I'm sure you've seen, Stripe is planning to retire this version of their Checkout API.
The new version of Checkout is actually completely incompatible with typical SPA design (requires navigating away from the site). It might be possible to adapt the Elements API to do what the current Checkout API does, but I'm not sure yet…
Any plans to tackle this?
Is there a way to get notified when the transaction fails so that we can react to stripe error codes?
I only see errors in the developer console but I was not able to detect them in any callback provided by VueStripeCheckout.
Thank you in advance!
https://codesandbox.io/s/7j4kj488yx < click on checkout 1, then click on checkout 2 and checkout 1's data is still on there. it's not until a click out and second click of checkout 2 when the data actually loads correctly.
Since the $checkout mixin was removed, it doesn't seem possible to add any pre-confirmation code to the checkout button (e.g. displaying a confirm dialog warning about something).
Ideal solution would be to add a :confirm
option that takes a callback function and cancels the checkout on false
…
before firing the Stripe checkout , I ask the user to enter his user name and email
I display the user email within the Stripe widget with
this.$checkout.open({
email: this.email,
Is there anyway to add the user name in the widget and transmit it with the email and amount for better checking the received payments ??
name; this.username
thanks for awesome work... it's running well in my first test !!! I left out PP upset with their sandbox stuff...
Hi @jofftiquez,
I tried using multiple vue-stripe-checkout on the same page and I'm having this error:
Error in mounted hook: "ReferenceError: StripeCheckout is not defined"
Here's an example:
https://codesandbox.io/s/mq2poqz5pj
Any idea how to fix this?
Thanks a lot!
This probably isn't an issue with the checkout, but probably just me not knowing what I am doing. I am having trouble calling any other methods inside the token()
callback:
export default {
data () {
return {
email: '',
...
}
},
methods: {
submit(token){
console.log("submit data to server");
....
},
checkout () {
this.$checkout.open({
name: 'Widgets',
currency: 'USD',
amount: 300,
token(token) {
console.log(token)
this.submit(token)
}
});
}
}
}
I am getting a Uncaught TypeError: this.submit is not a function
. I've tried some other variations of calling submit(), this.submit, this.$submit, and it's not working. I'm assuming it has something to do with context?
data(){
return{
cartTotalAmount:0,
}
},
methods: {
checkout () {
let vm=this;
console.log("Checkout cart total",this.cartTotalAmount)
this.$checkout.open({
image: 'https://cytonn.com/assets/img/logos/cytonn_logo.svg',
locale: 'en',
currency: 'Ksh',
name: 'Vue Store!',
description: 'Thank you for shopping with us',
amount: vm.cartTotalAmount,
panelLabel: 'Amount to Pay : {{amount}}',
token: (token) => {
vm.$store.dispatch('clearCart','');
}
})
},
},
watch:{
'$store.getters.cartItems': function (newValue) {
this.cartTotalAmount=
newValue.filter(catitem=>catitem.total>0)
.reduce((ac,cr)=>{ return Number(ac)+ Number((Number(cr.price ) * Number(cr.total)))},0)
}
}
}
when I checkout for the first time the amount is correct but on subsequent calls , the amount is empty on the checkout form even though console.log picks the amount from the store correctly. It forces me to refresh the browser for it to work again
Weirdly, the done method doesn't return the token object anymore.
I have the same behavior from multi projects.
"vue-stripe-checkout": "^1.2.6"
Anything I need to know :O ?
Hi, I would like to use this plugin with Nuxt.js, grabbing the stripe id from the store.
Is there any way to do it? So far I've tried with this based in this question in stackoverflow with no luck
// vue-stripe-checkout.js
import Vue from 'vue';
import VueStripeCheckout from 'vue-stripe-checkout';
const options = {
install(vue, { store }){
if (!store) {
throw new Error("Please provide vuex store.")
}
store.registerModule({states, mutations, actions })
if (store.state.deployment.production) {
return store.deployment.stripe_prod
} else {
return store.deployment.stripe_dev
}
}
}
Vue.use(VueStripeCheckout, options)
In the Stripe docs it shows an example of a form like so:
<form action="/create_subscription.php" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_QGwMfqnkIW0ycKln03fjoWMO"
data-image="/images/marketplace.png"
data-name="Emma's Farm CSA"
data-description="Subscription for 1 weekly box"
data-amount="2000"
data-label="Sign Me Up!">
</script>
</form>
While I can get the token data and log it to the console, passing it to a PHP file from Vue seems to be giving me issues like 404 errors. I am not sure that I can hit a PHP file, like the example, from the front-end since the request is likely blocked.
This is not an issue with this component, but I am wondering how to best accomplish this without just going the direction that the docs show above? Do you happen to have any example of getting the data over to the server side? Thanks!
Have you tried using this plugin with nuxt?
I've created the following plugin file:
/plugins/stripeCheckOut.js
import Vue from 'vue'
import VueStripeCheckout from 'vue-stripe-checkout'
// base/global options
// these options can be overridden
// by the options in the .open(options)
// function.
const options = {
key: process.env.stripePublishableKey
}
Vue.use(VueStripeCheckout, options)
I've added the plugin to the nuxt.config.js file:
module.exports = {
plugins: ['~/plugins/stripeCheckOut.js']
}
And, as soon as I try to invoke it I recevie the following error:
2018-05-02T06:13:48.358Z nuxt:render Rendering url /_nuxt/d8f891abb4bf2182ee5d.hot-update.json
[1] { C:\Users\juan.pablo.perez\OneDrive\Training\Vue.js\NodeWithVuejsFullStackWebDevelopment\server\client\node_modules\vue-stripe-checkout\index.js:1
[1] (function (exports, require, module, __filename, __dirname) { import VueStripeCheckout from './dist';
[1] ^^^^^^
[1]
[1] SyntaxError: Unexpected token import
[1] at new Script (vm.js:51:7)
[1] at createScript (vm.js:138:10)
[1] at Object.runInThisContext (vm.js:199:10)
[1] at Module._compile (module.js:624:28)
[1] at Object.Module._extensions..js (module.js:671:10)
[1] at Module.load (module.js:573:32)
[1] at tryModuleLoad (module.js:513:12)
[1] at Function.Module._load (module.js:505:3)
[1] at Module.require (module.js:604:17)
[1] at require (internal/module.js:11:18)
[1] at r (C:\Users\juan.pablo.perez\OneDrive\Training\Vue.js\NodeWithVuejsFullStackWebDevelopment\server\client\node_modules\vue-server-renderer\build.js:8330:16)
[1] at Object.<anonymous> (server-bundle.js:3939:18)
[1] at __webpack_require__ (webpack:/webpack/bootstrap 62983f5897d401670f09:25:0)
[1] at Object.<anonymous> (plugins/stripeCheckOut.js:1:0)
[1] at __webpack_require__ (webpack:/webpack/bootstrap 62983f5897d401670f09:25:0)
[1] at Object.<anonymous> (.nuxt/index.js:1:0) statusCode: 500, name: 'SyntaxError' }
Any help it would be highly appreciated.
Thanks,
Juan
The component gives us the possibility to change the language, which is nice, but I would prefer if the button "Pay with card" was translated too, which is not the fact.
Please correct it to allow me to show the form in the correct language of my users.
Otherwise this plugin is super nice and easy to use, thanks to you 😎
When I am trying to override the key, as hinted at in your documentation, it is loading in the Stripe JS library with an API error
"Stripe Checkout can't communicate with our payment processor because the API key is invalid. Please contact the website owner or [email protected]."
However, when I put the key in the stripeCheckoutOptions in app.js, it will load as intended.
In my app.js
const stripeCheckoutOptions = {
key: 'placeholder-key-data',
image: 'https://via.placeholder.com/100x100',
locale: 'auto',
currency: 'PHP',
billingAddress: true,
panelLabel: 'Purchase {{amount}}'
};
window.Vue.use(VueStripeCheckout, stripeCheckoutOptions);
And in my component.vue
export default {
methods: {
checkout() {
this.$checkout.open({
key: 'pk_test_jHADJs8d9alkjhddhjks',
name: 'Shut up and take my money!',
currency: 'USD',
amount: 99999,
token: (token) => {
//
}
});
}
},
}
with vue version 2.5.17
and vue-stripe-checkout version 1.1.3
I get Cannot read property 'install' of undefined
import VueStripeCheckout from 'vue-stripe-checkout'
console.log(VueStripeCheckout,'VueStripeCheckout') --> VueStripeCheckout is undefined
Vue.use(VueStripeCheckout, APP.stripe);
when we raise a procesing error .. is there anyway to localize the message ?
An error occurred processing your card. try again in a little bit
thanks fo feedback
Any idea how to deal with the CORS errors generated when loading the Stripe frame? I noticed they even happen on the demo page:
Blocked a frame with origin "https://checkout.stripe.com" from accessing a frame with origin "https://jofftiquez.github.io". Protocols, domains, and ports must match.
Hi,
I want multiple Stripe checkout on same page.
<button @click="checkout('hobby')" class="btn btn-primary btn-block btn-sm">Pay with Stripe</button>
I define checkout options before open Stripe modal but this is the default checkout options who opened.
data () {
return {
checkoutOptions: {
image: '',
name: '',
description: '',
currency: 'EUR',
amount: 0
}
}
},
methods: {
async checkout (plan) {
switch (plan) {
case 'free':
this.checkoutOptions.image = 'images/subscriptions/plan-free.svg';
this.checkoutOptions.name = 'Free Plan';
this.checkoutOptions.description = '';
this.checkoutOptions.amount = 0;
await this.$refs.checkoutRef.open();
break;
case 'hobby':
this.checkoutOptions.image = 'images/subscriptions/plan-hobby.svg';
this.checkoutOptions.name = 'Hobby Plan';
this.checkoutOptions.description = '';
this.checkoutOptions.amount = 990;
await this.$refs.checkoutRef.open();
break;
}
}
}
Thanks to help me please.
Hi there,
I have inserted my publishable key in the code. When i fill the details and send the payment, it shows the green tick as if it has been paid successfully but it doesnot show up in my Stripe account.
Any help would be highly appreciable.
Thanks in advance.
After an npm update i got that error when i try to checkout .
That's normal ?
How i fix that ?
[Vue warn]: Error in v-on handler: "TypeError: this.$refs.checkoutRef is undefined"
It seems like the closed()
function is not supported? I have a spinner that I need to hide if a user closed the stripe via the "x"...
I tried adding closed()
to the open function in the component (preferred) and also to the options object in the set up. Neither seems to get called...
Any ideas?
(I'm using nuxt btw)
this.$checkout.open({
name: 'Checkout',
amount: this.total * 100,
email: this.client.email,
token: (token) => {
},
closed: () => {
console.log('closed')
this.spinner = false
}
})
Hi,
could you please add typescript type definition files. I really want to use this plugin in Typescript.
Many thanks.
Inside the README.md you forgot a comma after opened method.
opened () {
// do stuff
}
closed () {
// do stuff
}
Thank you for your package. Very useful.
Receiving error from Stripe stating the expected value is boolean but component is raising an error stating expecting string.
zipCode: String should be zipCode: Boolean
I am investigating your vue-stripe-checkout for the first time and your documentation says:
Initialization options now only accepts stripe publishable token. E.g.:
Vue.use(VueStripeCheckout, process.env.PUBLISHABLE_TOKEN)
searching for the implementation steps before actually installing with YARN this is the documentation:
https://vuejsfeed.com/blog/check-out-with-stripe-using-a-vue-js-plugin
with this example:
import VueStripeCheckout from 'vue-stripe-checkout'
// base/global options
// these options can be overridden
// by the options in the .open(options)
// function.
const options = {
key: 'your-publishable-key',
image: 'https://cdn.meme.am/images/100x100/15882140.jpg',
locale: 'auto',
currency: 'PHP',
billingAddress: true,
panelLabel: 'Subscribe {{amount}}'
}
Vue.use(VueStripeCheckout, options)
Is this article now out of date as it was posted a year ago?
For someone who is new to these implementations could you expand on process.env.PUBLISHABLE_TOKEN for implementing vue-stripe-checkout for the first time?
Apologies if this is obvious - I am new to this. Many thanks for any help you can provide.
Everything seems to work great when running npm run dev
, but I'm getting an error when I try to export for production by running npm run build
:
ERROR in build.js from UglifyJs
Unexpected character '`' [./~/vue-stripe-checkout/index.js:1,0][build.js:16789,36]
This library looks awesome. Thanks.
This is taken from the stripe checkout documentation.
I was wondering how to implement this using this plugin? Or has it been implemented already?
Apologies I am a relatively new developer.
You can prevent Checkout's popup from being blocked by calling handler.open when the user clicks on an element on the page. Do not call handler.open in a callback. This design indicates to the browser that the user is explicitly requesting the popup. Otherwise, mobile devices and some versions of Internet Explorer will block the popup and prevent users from checking out. This only applies to custom integrations.
document.getElementById("button").addEventListener("click", function() {
handler.open({
image: '/square-image.png',
name: 'Demo Site',
description: '2 widgets',
amount: 2000
});
});
After trying to look at the source code for the plugin I think .open gets called inside a callback (correct me if I'm wrong):
const configStripe = handler => {
if(!window.StripeCheckout) return;
window.StripeCheckout.configure(options).open(opts);
console.warn('StripeCheckout configured!');
if(handler)
clearTimeout(handler);
};
That's in src/index.js line 31.
Thanks!
and thanks for the amazing plugin.
I think a new update has caused an issue with unpkg.
Using the (from the docs): https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js
Causes a redirect to https://unpkg.com/[email protected]/build/vue-stripe-checkout.js
Which results in this error page with the following text:
Cannot find "/build/vue-stripe-checkout.js" in [email protected]
As evidenced by this file, there needs to be better testing.
But since this requires downloading and parsing a script, and letting it make an iframe, I would imagine proper testing would only work inside a browser.
I'm not sure what the best test framework is for this, perhaps Karma? I've only ever used Jest, so I'm not sure.
Any ideas?
Thanks for this amazing script! really simple :)
More of a question than a bug, I cant seem to figure out how can I get the fee that was charged after i get the token.
this.$checkout.open({})
Any help you can give me to retrievng the FEE, i see there is balance_transtion just cant figure how to integrate it into this flow...
https://stripe.com/docs/api#balance_transaction_object
Appreciate the help.
Cheers,
Not able to get this working as I'm seeing this when I try to build the project with the Beta installed.
This dependency was not found:
Installed version is : 1.1.0 , getting error as :
Cannot read property 'open' of undefined
Here is the function I have
checkout() {
this.$checkout.open({
name: 'Update Card Details',
currency: 'USD',
amount: 0,
token: (token) => {
console.log(token);
}
});
}
Hello,
Since my update from 1.0.X to 1.1.X i have this warning in console.
Can you help me please ?
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <VueStripeCheckout
```>
Sorry i'am new in vuejs and js ^^
vue.esm.js?a026:591 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <VueStripeCheckout> <Stripe> at src\components\Stripe.vue <Shop> at src\components\Shop.vue <App> at src\App.vue <Root>
Do you have any idea why its works but i have this error ?
Thank you for the help and the package :)
Currently doesn't work with https://github.com/firebase/functions-samples/blob/master/stripe/functions/index.js
Use rollup
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.