Understanding how to retrieve the tokenId from Stripe's createToken method and effectively utilize it in a separate function within the Vuex store

When I call the Stripe.card.createToken function in my api.js file, I am trying to retrieve the generated token in order to utilize it within my Vuex. How can I achieve this?

// api.js

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

I am attempting to use the token in my Vuex actions like so. However, it seems to return undefined:

//vuex

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

Answer №1

While I may not be well-versed in vuex, the Stripe.card.createToken function requires a JavaScript object with user input credit card details and a callback function to manage the response. For more information, refer to the official Stripe documentation.

If you wish to display the token ID using Stripe.card.createToken, here's an example:

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

It is worth noting that Stripe.card.createToken belongs to the deprecated Stripe.js v2, so transitioning to Stripe.js v3 is recommended for better functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript is unable to identify one of the JSON values

I am trying to extract the email field from a JSON file using JavaScript. Here is the snippet of code: "contacts": [ { "addedAt": 1332358711001, "vid": 1, "properties": { ...

Pop-up with interactive content

I am trying to create a single popup that appears when different list elements are clicked, with each list element providing information for the popup. I attempted to implement this functionality but I am having trouble dynamically fetching the text from t ...

I found myself unable to execute a query with varying conditions using mongoose

These are my Operator Models: const operatorSchema = new Schema({ operatorName: { type: String }, users:[{ email:String, payment:Number, paymentsData: Date, product: String, }], }); I am lookin ...

Enhancing MEAN Stack Application by Updating Table Post Database Collection Modification

In my efforts to ensure that my table data remains synchronized with the database information, I have encountered an issue. Whenever Data Changes: $scope.changeStatus = function($event,label,status){ var target = $event.currentTarget; target ...

Implementing asynchronous node.js output on Azure platform

Although I usually work with different programming languages, I find myself needing to incorporate some node.js code, which is entirely new to me. Currently, my goal is to have the outcome of my azure function app reliant on calling an API. To achieve this ...

Utilize moment.js to filter an array of objects based on 'last month' and 'last week' when clicked

In my database, each object has a dateCreated value of 2015-12-11T11:12:14.635Z I'm trying to filter this array for the past week and month. The issue is that if today is March 19th, I want to search from the 11th to the 18th for the last 7 days, st ...

Pressing the enter key will submit the form

After receiving feedback from users in my live chat room, one common request was to add a feature that allows them to send a message by pressing the enter button, instead of creating a new line in the text box. Despite attempting to implement some jQuery ...

SSR with Material UI Drawer encounters issue during webpack production build meltdown

When I attempted to utilize the Material UI SSR example provided by Material-UI (Link), it worked successfully. However, my next step was to integrate the Material-UI Drawer into this example. To do so, I utilized the Persistent drawer example code also pr ...

Is there a way to update the value of a property using jQuery?

Is there a way to retrieve the "top" property value along with its inline CSS adjustment? <article class="stack" style="position: absolute; left: 741px; top: 1000px;"> </article> I'm looking to subtract 200px from the top value, in this ...

Explore search results that include values nested within map arrays

I have an array with multiple objects, each containing a nested array of subValues. My goal is to filter components based on search criteria. While I can successfully search the parent level objects' values, I am struggling with filtering based on the ...

JavaScript - Output an undefined value of a property within a function

While the question of checking for null or undefined values has been raised before, I am encountering a unique issue. I have created a function to split a string, which works perfectly. However, when I pass a null or undefined value, the program stops. Ins ...

Hide buttons on click in textarea

I am working on a user input interface which includes a textarea for typing, along with a cancel and submit button. Is there a way to show the cancel and submit buttons only when the user clicks inside the textarea? (I prefer using vanilla JavaScript inst ...

Troubleshooting: Why Isn't Calling a PHP Function from AJAX Working

I'm attempting to utilize AJAX to call a PHP function. Here's the script I've implemented. <script type="text/javascript" src="jquery.1.4.2.js"> $(document).ready(function () { // after EDIT according to ...

An error occurred with Express and Passport: ['ERR_HTTP_HEADERS_SENT']

Currently, I am diving into an ebook tutorial and have encountered a roadblock in a particular piece of code. The code is designed to take a username and password in JSON format through Insomnia or Postman, and it should return a login success cookie. Howe ...

Using the await keyword in the useEffect() React Hook: A comprehensive guide on implementation

When using several async functions within useEffect(), I am struggling to properly include the await keyword to wait for their results // Assume func1 and func2 are defined elsewhere async function func1() {...}; async function func2() {...}; // Import f ...

Fixing 500 (Internal Server Error) in Vue.js and Laravel: The Ultimate Guide

Working on a university project using Vue.js and Laravel, I need assistance with sending information to the API. I'm trying to use axios for the POST request, but it's giving me an error: 500 (Internal Server Error). I can't seem to identif ...

Is it possible for a popup to appear without any user interaction

Do you ever wonder how certain websites are able to trigger pop-ups without being blocked by Chrome's pop-up blocker? I had always thought that pop-up blockers only allowed window.open if it was initiated by a user action. However, the situation seem ...

Hovers and click effects for navigating through images

The website I'm currently working on is stipz.50webs.com. p.s. HOME functionality is not active at the moment. Having successfully implemented the onhover and onmouseout features, my next goal is to enhance the navigation effects for each div/img so ...

Creating a unified object from faceted results in MongoDB: Streamlining keys and values for easy access

I'm currently working on a query to determine the equipment required by teams at specific times. By analyzing the list of teams and their allocated equipment, I aim to calculate the total equipment in use at any given moment. The team data looks like ...

In IE11, the property of table.rows.length is not functioning as expected

In my HTML page, I have the following script: var table = document.getElementById(tableID); var rowCount = table.rows.length; While this script works fine in IE8, in IE11 it does not return the exact row count. Instead, it only returns "0" when the actua ...