Payement does not working

[ghilaslinz]

Hello, at 07:11:05 i have this error : Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

Any solution ? I followed the instructions of the video, and checked the code many times, i also compare my code with the Github Code, but i don't find the issue. Is it a Stripe issue ?

[pairofAces]

I was having the same issue. This worked for me:

In your Payment.js folder, make sure to include the following line as an import.

import { db } from '../Firebase/firebase';

Then copy/paste the following handleSubmit code (in my code, I called the 'handleSubmit' function ---> 'submitHandler'):

`const submitHandler = async (event) => { //stripe configuration code will go here event.preventDefault(); setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        db.collection('users').doc(user?.uid).collection('orders').doc(paymentIntent.id).set({
            basket: basket,
            amount: paymentIntent.amount,
            created: paymentIntent.created
        })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history.replace('/orders')
    })
}`

Give it a go, good luck!

[Jerinrose]

Still it shows the same error for me....

[trilamanila]

I was able to fix the payment error by running "npm run build" since you need to run it again when you make changes to firebase deployed site

[biancadevelop]

I am getting this same issue and tried all of these but still not working. Anyone found another solution?!?! Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

[iamayushdas]

I am getting this same issue and tried all of these but still not working. Anyone found another solution?!?! Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

did you find the solution?

[haroon437]

Anyone find the solution?

[ssaumyaa7]

I am getting this same issue and tried all of these but still not working. Anyone found another solution?!?! Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

did you find the solution?

pass the secret string in double quotes !

[gyurmey]

@ghilaslinz make sure to use double quotes on both secrete key and the public client key. Also make sure that the client secret in the function folder is wriiten like this client_secret .. and one last thing, also make sure the backend is running to send the key ^^

[pulkitarora001]

Anyone find the solution..i am also getting the same error..... please help ??

[haroon437]

@pulkitarora001 have you solved the buy now button redirect to the order page?

[pulkitarora001]

@pulkitarora001 have you solved the buy now button redirect to the order page?

Yes, I have also made the order page, ...but it is not getting redirected, the same error is coming again and again.

[chadrackkyungu]

@pulkitarora001 ,did you find the solution to that problem? because even myself i'm stuck on that, please if you do help me bor

[chadrackkyungu]

ooooooooooooooooooohhhhhhhhhhh i find out why, here is the process

Go to your functions folder and run : firebase emulators:start make sure you don't have it open in another window, after it opened run the frontend which is amazon-clone then then try to buy and process your orders, it will work perfect. i spent 2 days trying to figure out but thanks God i got it now i can move on, hope it will help some one, if you have any question don't hesitate asked me i will help you.

[chadrackkyungu]

@iamayushdas hey did you managed to solve your problem ? if you didn't i have got a solution

[iamayushdas]

@chadrackkyungu the problem will arise when you will deploy it, you won't be able to make payment

[chadrackkyungu]

Ohh okay let try and I will update you if it does or not

On Mon, May 24, 2021, 12:24 AM Ayush das @.***> wrote:

@chadrackkyungu https://github.com/chadrackkyungu the problem will arise when you will deploy it, you won't be able to make payment

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CleverProgrammers/react-challenge-amazon-clone/issues/11#issuecomment-846633327, or unsubscribe https://github.com/notifications/unsubscribe-auth/APUT6ATJ662L6NN7IISEUK3TPF6BPANCNFSM4TSMVAFA .

[jadhav-kunal]

Unhandled Rejection (IntegrationError): Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true. handleSubmit src/Payment.js:44

41 | event.preventDefault(); 42 | setProcessing(true); 43 |

44 | const payload = await stripe | ^ 45 | .confirmCardPayment(clientSecret, { 46 | payment_method: { card: elements.getElement(CardElement) }, 47 | })

This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

i got this error after performing payment process!!! plz help

[jadhav-kunal]

@ghilaslinz make sure to use double quotes on both secrete key and the public client key. Also make sure that the client secret in the function folder is wriiten like this client_secret .. and one last thing, also make sure the backend is running to send the key ^^

I did all this ..still getting same error..plz help

[janz-emmanuel24]

In axios.js Make sure within the object in the parentheses u hv written baseURL: instead of baseUrl:

[adityasharmaPBX1]

I am getting this same issue and tried all of these but still not working. Anyone found another solution?!?! Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

did you find the solution?

pass the secret string in double quotes !

Bro where i have to put double quotes in which file?

[adityasharmaPBX1]

Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.

i got this error .......... please someone help me out.......

[nikosfliataris]

set: useState of client sectret clear empty ..... useState()......no data inside no quotes

[TheMichalRozga]

The most stupid thing tho, that should not work at all, but for some reason did...

Try to 'npm i cors' (in your front-end folder)

---

EDIT:

---

It crashed anyway at deploy and it goes the same way around

[nikosfliataris]

At stripe documentation the useState of clientsecret is clear empty useState() onthing inside no value no quates. https://stripe.com/docs/payments/integration-builder

[durveshvpatil01]

Got this error any Idea How to deal with it. I already start my backend with firebase emulators:start. and my both public and secret keys are in double corts

[nikosfliataris]

the solution must be like this: .then(({ paymentIntent }) => { console.log(paymentIntent); db.collection("users") .doc(user?.uid) .collection("orders") .doc(paymentIntent.id) .set({ basket: basket, amount: paymentIntent.amount, created: paymentIntent.created, })

check if you have unnecessary space betwwen db and collection. the code must be (db.collection and then continue in the next line)

[durveshvpatil01]

the solution must be like this: .then(({ paymentIntent }) => { console.log(paymentIntent); db.collection("users") .doc(user?.uid) .collection("orders") .doc(paymentIntent.id) .set({ basket: basket, amount: paymentIntent.amount, created: paymentIntent.created, })

check if you have unnecessary space between db and collection. the code must be (db.collection and then continue in the next line)

As you said I check my code and My indentation is correct. but still, I got the same error.

This is my code.

import React, { useState, useEffect } from 'react'; 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'; import { db } from "./firebase";

function Payment() { const history = useHistory(); const [{ basket, user }, dispatch] = useStateValue(); 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("");

useEffect(() => {
    const getClientSecret = async () => {
      const response = await axios({
        method: "post",
        url: `/payments/create?total=${getBasketTotal(basket) * 100}`,
      });
      setClientSecret(response.data.clientSecret);
      console.log(clientSecret);
    };
    getClientSecret();
  }, [basket]);
console.log('THE SECRET IS >>>', clientSecret)
console.log('👱', user)

const handleSubmit = async (event) => {
    event.preventDefault();
    setProcessing(true);
    const payload = await stripe
      .confirmCardPayment(clientSecret, {
        payment_method: { card: elements.getElement(CardElement) },
      })
      .then(({ paymentIntent }) => {
        console.log(paymentIntent);
        db.collection("users")
          .doc(user?.uid)
          .collection("orders")
          .doc(paymentIntent.id)
          .set({
            basket: basket,
            amount: paymentIntent.amount,
            created: paymentIntent.created,
          });

        setSucceeded(true);
        setError(null);
        setProcessing(false);
        dispatch({
          type: "empty_basket",
        });

        history.replace("/account");
      });
  };

const handleChange = event => {
    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 React Lane</p>
                    <p>Los Angeles, CA</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>

                              {/* Errors */}
                            {error && <div>{error}</div>}
                        </form>
                </div>
            </div>
        </div>
    </div>
)

}

export default Payment

[nikosfliataris]

If so the problem is in your back-end code.There isn't a connection between front-end and back-end so the paymentIntend didn't created correctly and didn't created a (paymentIntent.id).Please post your whole code font-end and back-end in your github for more help.

[durveshvpatil01]

ok check my Ripo at https://github.com/durveshvpatil01/amazon I try a lot to find my error but was still unable to find a bug. plz check my code and help me to deal with errors.

[nikosfliataris]

First thing change the useState of clientSectret to empty "useState("")" as it is in stripe documentation. With the way of useState (true) the payment never create any key and never create any id

[durveshvpatil01]

after updating useState sill i got error. Unhandled Rejection (TypeError): Cannot read property 'id' of undefined

[durveshvpatil01]

@nikosfliataris any suggestions what to do next?

[nikosfliataris]

@durveshvpatil01 at your file package-lock.json in function (dependancies: about line 330 between {@protobufjs/utf8":{} and @tootallnate/once:{} }, it's missing the @stripe/react-stripe-js and @stripe/stripe-js dependancies, so your code doesn't run. Install the dependancies again . The doce must be like this: "@protobufjs/utf8": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=", "optional": true }, "@stripe/react-stripe-js": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.4.1.tgz", "integrity": "sha512-FjcVrhf72+9fUL3Lz3xi02ni9tzH1A1x6elXlr6tvBDgSD55oPJuodoP8eC7xTnBIKq0olF5uJvgtkJyDCdzjA==", "requires": { "prop-types": "^15.7.2" } }, "@stripe/stripe-js": { "version": "1.16.0", "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.16.0.tgz", "integrity": "sha512-ZSHbiwTrISoaTbpercmYGuY7QTg7HxfFyNgbJBaYbwHWbzMhpEdGTsmMpaBXIU6iiqwEEDaIyD8O6yJ+H5DWCg==" }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "optional": true },

[nikosfliataris]

@durveshvpatil01 Do you solve the problem?

[durveshvpatil01]

@nikosfliataris No! After adding this packages. still show me same error. and also after checking stripe dashboard I got this result IDK what to do now? I try this clone 3 time but still get same error!!

[nikosfliataris]

@durveshvpatil01 you see wronf file. The package-lock.json in your function folder, no in your global folder. functions->package-lock.json line about 330

[nikosfliataris]

@durveshvpatil01 Any Update with your problem?

[Niranjan8434]

i do all the stuff but error occured help me to solve

[Niranjan8434]

@durveshvpatil01 help me to solve the bugs

[nikosfliataris]

@Niranjan8434 First at payment.js at clientSecret set useState empty and not true (useState("")). Second at your back-end missed some of the dependancies. So the whole code doesn't run. first install eslintrc.js again(it's missing all the dependancy and you have only the json file but you need the js file. Second install the stripe-js and react-stripe-js all of them are missed. The dependancies are missed from the package-lock.json. Install all of them in your back-end/function files.

For more information see my repository : React-full-E-ccomerce-Site. It's from the amazon project

[nikosfliataris]

@Niranjan8434 Any update?

[Niranjan8434]

@Niranjan8434 Any update? @nikosfliataris thanks for your solution its working now, also it need to add discription and payment address.

any other option to deploy function because firebase in not woking due to one error i add the file below.

[nikosfliataris]

@Niranjan8434 No files below

[nafisahmad]

Anyone found a solution??

[TaheerMattur]

Anyone found the solution?? please do let me know!!

[ghilaslinz]

This solution worked for me :

Go to your functions folder and run : firebase emulators:start make sure you don't have it open in another window, after it opened run the frontend which is amazon-clone then then try to buy and process your orders, it will work perfect.

thanks @chadrackkyungu

[TaheerMattur]

Guys.!!! I found the solution.. Try changing "USD" to "INR" in functions/index.js

const paymentIntent = await stripe.paymentIntents.create({ amount: total, currency: 'INR', });

[joytun-tonny]

I tried all the solutions that you guys are given previously but still, I'm stuck in this error.

Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}secret${secret}. You specified: .

Can anyone please help me with this?

[nikosfliataris]

@joytun-tonny Upload the whole code font-end & back-end in your github profile.

[Muziscythe]

I tried all the solutions that you guys are given previously but still, I'm stuck in this error.

Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}secret${secret}. You specified: .

Can anyone please help me with this?

bruhhhh did you find any solution? I too face the same. It works well on Localhost no errors there once deployed it thorws this error to me. If found any solutions ping me plzz.