Getting IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string

Question

I am following a Amazon clone guide to get me started with React JS. While being 4 days in im getting stuck after processing my Orders. I am using Stripe, Firebase, Axios and Express to do this. After clicking the Buy now button im getting the error:

Tried every possible solution and the videoguide doesnt get this error or discuss this error in anyway.

Thanks in advance!

I wouldnt mind sharing my github so your getting a full look at all my codes if need be.

This is my payment page code:

 import React, { useState, useEffect } from 'react'; import Checkout from './Checkout'; import './Payment.css' import { useStateValue } from './StateProvider'; import CheckoutProduct from './CheckoutProduct'; import { Link, useHistory } from "react-router-dom"; import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'; import CurrencyFormat from 'react-currency-format'; import { getBasketTotal } from './reducer'; import axios from './axios'; function Payment() { const [{ basket, user}, dispatch] = useStateValue(); const history = useHistory(); const stripe = useStripe(); const elements = useElements(); const [succeeded, setSucceeded] = useState(false); const [processing, setProcessing] = useState(""); const [error, setError] = useState(null); const [disabled, setDisabled] = useState(true); const [clientSecret, setClientSecret] = useState(true); useEffect(() => { //generate the special stripe secret which allows us to charge a customer const getClientSecret = async () => { const response = await axios({ method: 'post', //Stripe expects the total in a currencies subunits url: "/payments/create?total=${getBasketTotal(basket) * 100}" // Currency subunit }); setClientSecret(response.data.clientSecret) } getClientSecret(); }, [basket]) console.log('THE SECRET IS >>>', clientSecret) const handleSubmit = async (event) => { //do all the fancy stripe stuff... event.preventDefault(); setProcessing(true); const payload = await stripe.confirmCardPayment(clientSecret, { payment_method: { card: elements.getElement(CardElement) } }).then(({ paymentIntent }) => { //paymentIntent = payment confirmation setSucceeded(true); setError(null) setProcessing(false) history.replace('/orders') }) } const handleChange = event => { //Listen for changes in the CardElement //and display any errors as the customer types their card details setDisabled(event.empty); setError(event.error ? event.error.message : ""); } return ( <div className='payment'> <div className='payment_container'> <h1> Checkout ( <Link to="/checkout">{basket?.length} items</Link> ) </h1> {/* Payment section - delivery address */} <div className='payment_section'> <div className='payment_title'> <h3>Delivery Address</h3> </div> <div className='payment_address'> <p>{user?.email}</p> <p>123 KN Katju Marg</p> <p>Rohini, New Delhi</p> </div> </div> {/* Payment section - Review Items */} <div className='payment_section'> <div className='payment_title'> <h3>Review items and delivery</h3> </div> <div className='payment_items'> {basket.map(item => ( <CheckoutProduct id={item.id} title={item.title} image={item.image} price={item.price} rating={item.rating} /> ))} </div> </div> {/* Payment section - Payment method */} <div className='payment_section'> <div className='payment_title'> <h3>Payment Method</h3> </div> <div className='payment_details'> {/* Stripe magic will go*/} <form onSubmit={handleSubmit}> <CardElement onChange={handleChange}/> <div className='payment_priceContainer'> <CurrencyFormat renderText={(value) => ( <> <h3>Order Total: {value}</h3> </> )} decimalScale={2} value={getBasketTotal(basket)} displayType={"text"} thousandSeparator={true} prefix={"$"} /> <button disabled={processing || disabled || succeeded}> <span>{processing ? <p>Processing</p> : "Buy Now"}</span> </button> </div> {/* Error */} {error && <div>{error}</div>} </form> </div> </div> </div> </div> ) } export default Payment

This is my index.js code or my server:

 const functions = require("firebase-functions"); const express = require("express"); const cors = require("cors"); const stripe = require("stripe")("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx") // API // - App config const app = express(); // - Middlewares app.use(cors({ origin: true })); app.use(express.json()); // - API routes app.get('/', (request, response) => response.status(200).send('hello world')) app.post('/payments/create', async (request, response) => { const total = request.query.total; console.log('Payment Request Recieved for this amount >>> ', total); const paymentIntent = await stripe.paymentIntents.create({ amount: total, //Subunits of the currency currency: "usd", }); // OK - Created response.status(201).send({ clientSecret: paymentIntent.client_secret, }) }) // - Listen command exports.api = functions.https.onRequest(app)

This is my axios.js

 import axios from "axios"; const instance = axios.create({ baseURL: "http://xxx/xxx" // The API (cloud function) URL }); export default instance;

Now this is the error I am getting always. enter image description here enter image description here

Answer 1

based on the console error message. You are passing boolean true to stripe.confirmCardPayment() , instead you should pass the PaymentIntent's client_secret to it.

I'd suggest you to debug around the backend code and make sure it return a valid client_secret to your frontend.

Answer 2

You should replace " " form const response = await {url:"this one"} to this. For this press key which is left side of your keyboard 1. Since inside URL we are using the js variable getBasket so we need to use ``