vue-stripe/vue-stripe

Stripe Checkout & Elements for Vue.js

Jan 23, 2024 - See major updates here

Discussion here - #236

Vue Stripe 💳

Vue Stripe is now an official Stripe partner 🎉

Stripe Checkout & Elements for Vue.js (support for Vue3 is currently in development)

You can support this project by giving it a star, or following the author. You can also send your love through Open Collective ❤️.

Documentation

• Website (https://vuestripe.com)
• Documentation
• Stripe Checkout
• Stripe Elements
• Stripe Plugin

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

SPECIAL THANKS TO:

Vue Stripe is now powered by GitBook

Made with ❤️ by Joff Tiquez

vue-stripe's Issues

typescript type definition file missing

Hi,
could you please add typescript type definition files. I really want to use this plugin in Typescript.
Many thanks.

Warn on runtime-only build

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
```>
 

Multiple Stripe Checkout

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.

Wondering how to best pass data to server. (PHP)

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!

Variable from vuex/nuxt store

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)

When passing in new data, component requires a second reload to load correctly

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.

Got error `StripeCheckout is not defined`

I use sentry for our production issue tracking, and I got like around 100s of this error
Any suggestions on how to figure out if theres anything wrong?

closed() function

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
          }
        })

Calling Vue Code from within Token Callback

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?

Unexpected character '`'

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.

Unable to override key in this.$checkout.open()

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) => {
                        //
                    }
                });
            }
        },
    }

CORS errors with Safari…

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.

Provide confirmation callback

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…

Preventing Checkout from being blocked

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.

Error when passing Stripe Label option

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

How to access stripeEmail and other attributes?

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!

unpkg.com link broken: Cannot find "/build/vue-stripe-checkout.js" in [email protected]

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]

Use in single component instead of globally

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?

Cannot read property 'install' of undefined

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);

Better testing

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?

Initialization clarification

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.

Feature request - Add support of 3D Secure

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/

Question, FEE

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,

How to handle Stripe errors?

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!

Cannot Get Amount From Vue Store On Subsequent Checkouts

Checkout

<script> export default {

    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)

                    }
        }




}

</script>

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

Use of the plugin with nuxt

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

Done method no longer return the token object

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 ?

Feature request - Callback if canceled

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.

How to get decimal places to show up correctly on the right?

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?

How to make it work with stripe firebase cloud functions?

Currently doesn't work with https://github.com/firebase/functions-samples/blob/master/stripe/functions/index.js

Save rollup-plugin-commonjs in package.json

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)

This version of Stripe's Checkout API is going into legacy mode

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?

Update to Stripe V3

Stripe data-zip-code expects a boolean value

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

Cannot read property 'open' of undefined

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.

Cannot read property 'open' of undefined

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);
        } 
      });
    }

"Converting circular structure to JSON" error when opening the modal

When opening the modal, an error is shown in the console:

How to add the user name below the email in the widget ?

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...

Make Amount Field Reactive

The amount field on the checkout is currently not reactive, any changes made on the vue instance are not reflecting on checkout component

The payments sent through this popup doesnot reflect in the Stripe account

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.

Pay with card not translating

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 😎

normalize-component.js dependency not found

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:

• vue-runtime-helpers/dist/normalize-component.js in ./node_modules/vue-stripe-checkout/dist/index.js

TypeError: this.$refs.checkoutRef is undefined

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"

Create build for browsers

Use rollup

README.md update

Inside the README.md you forgot a comma after opened method.

    opened () {
      // do stuff 
    }
    closed () {
      // do stuff 
    }

Thank you for your package. Very useful.

Question: handle bill and shipping address in stripe form?

Is it easy possible to ask for the shipping address in the stripe checkout form and store it somewhere at stripe?

Doesn't work with multiple components

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!

It works but : Failed to mount component: template or render function not defined.

Sorry i'am new in vuejs and js ^^

I have the popup with payment that works but in console i have this error :

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>

I have a file "Stripe.vue" with an integration of vue-stripe-checkout

And a basic implementation in a "Shop.vue" :

Do you have any idea why its works but i have this error ?
Thank you for the help and the package :)

is there anyway to localize the error message ?

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

Can I add more fields to card

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: