how to return Stripe's createToken tokenId and use it in another function in vuex

Question

so I call Stripe.card.createToken in my api.js file and want to return the token this function generates so I can use it in my vuex, how can I do that?

// api.js

export const stripeToken = async ({ cardInfo }) => {
  const { data } = await Stripe.card.createToken({
    cardInfo,
  });
  return data;
};

So I want to use it in my actions in vuex like this. I did this and it doesn't work, it returns undefined:

//vuex

import { stripeToken } from '@src/store/api';
async stripeToken({ dispatch }, { cardInfo }) {
  const { data } = await stripeToken({ cardInfo });
  console.log('tokenId: ', data.tokenId);
},

Answer 1

I'm not familiar with vuex, but the Stripe.card.createToken method takes two parameters: a JavaScript object containing credit card data entered by the user, and a callback function to handle the response.You can learn more about it in the Stripe documentation here .

Here's how you could display the ID of a token with Stripe.card.createToken :

Stripe.card.createToken(cardInfo, (status, response) => {
  if (response.error) {
    console.log(response.error);
  } else {
    console.log(response.id);
  }
});

Note that Stripe.card.createToken is an old method from Stripe.js v2 that is now deprecated, so I would recommend upgrading to Stripe.js v3 if possible.