Payement does not working about react-challenge-amazon-clone HOT 79 OPEN

@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 ^^

from react-challenge-amazon-clone.

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

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

if you are still facing issue then try replacing withthis in your function folder in index.js

app.post("/payments/create", async (request, response) => {
  const total = request.query.total;
  console.log("Payment Request Recieved BOOM!!! for this amount >>>", total);
  const paymentIntent = await stripe.paymentIntents.create({
    amount: total, // subunits of the currency
    currency: "inr",
    metadata: { integration_check: "accept_a_payment" },
  });
  response.status(201).send({
    clientSecret: paymentIntent.client_secret,
  });
});

from react-challenge-amazon-clone.

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!

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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.

from react-challenge-amazon-clone.

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?

from react-challenge-amazon-clone.

Anyone find the solution?

from react-challenge-amazon-clone.

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 !

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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.

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

@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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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?

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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)

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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.

from react-challenge-amazon-clone.

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.

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

@nikosfliataris any suggestions what to do next?

from react-challenge-amazon-clone.

@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
},

from react-challenge-amazon-clone.

@durveshvpatil01 Do you solve the problem?

from react-challenge-amazon-clone.

@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!!

from react-challenge-amazon-clone.

@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

from react-challenge-amazon-clone.

@durveshvpatil01 Any Update with your problem?

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

@durveshvpatil01 help me to solve the bugs

from react-challenge-amazon-clone.

@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

from react-challenge-amazon-clone.

@Niranjan8434 Any update?

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

@Niranjan8434 No files below

from react-challenge-amazon-clone.

Anyone found a solution??

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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?

from react-challenge-amazon-clone.

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

from react-challenge-amazon-clone.

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.

from react-challenge-amazon-clone.

@nikosfliataris

could you help me.... it throws no error for me while working on local host.
So I deployed to heroku.
My code fits with all the solutions above...
Even so I cant find any solution. I uploaded to my git also if you could help me.
It will lead me to get a job asap. Thanks in advance

from react-challenge-amazon-clone.

@Muziscythe in your server-json file (server/package-lock.json), it's missed a dependancy. You have nodule/stripe but you need additional the react-stripe-js dependancy. Install it again in your server side, and try again.

from react-challenge-amazon-clone.

Guys...... It worked for me

What I did.... is put secret key for stripe explicitly....
when I checked thorugh the network in dev options... useEffect in payments.jsx isnt giving a output(ie : client secret for everybasket item changes)... then our stripe function in backend is prob so dont force yourself on front end code

now in backend.... since I deployed in heroku it takes code from github, .env I used for secret key isnt deployed on heroku to use
so it is basically loading stripe with null secret key.. and giving 503 server error.

So tried using it explicitly and walllllaaaahhhh it worked.

Tho it would be helpful if anyone share how to hide secretkey and use it at same time.
Hope It would be useful.

from react-challenge-amazon-clone.

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

Thank you it was very helpful.

from react-challenge-amazon-clone.

Hello, I am facing the same issue of IntegrationError: Missing value for stripe.confirmCardPayment intent secret: value should be a client_secret string.. I have tried all the possible solutions mentioned above but nothing worked for me. Please help me, it is very urgent for me to get this project done. Please check @nikosfliataris

from react-challenge-amazon-clone.

@kskaransethi you didn't specify the payment method in confirm payment method. Inside the empty brakets add "{ card: elements.getElement(CardElement) }"

from react-challenge-amazon-clone.

Hello Nikolas, Thank you so much for replying to the issue so quickly but unfortunately, that also didn't work. Also in the tutorial client secret is getting poped up after the payment but in my case, it is showing undefined every time. I am attaching the ss. please review it . Your help is gonna


mean a lot to me. thanks in Advance

from react-challenge-amazon-clone.

@kskaransethi upload the whole project to your github account for a better look in your code

from react-challenge-amazon-clone.

Okay, I have uploaded the whole project. Please review now. Thanks and much appreciated.

from react-challenge-amazon-clone.

@nikosfliataris any update on the issue bro, just the extra info.. In my Stripe dashboard client secret key is coming up but not appearing while doing the inspect on browser.

from react-challenge-amazon-clone.

@kskaransethi can you end me your email to send you the code fixed with some comments you have to follow. I fixed the code and it run correct. your have now to follow to complete the order page my email is [email protected]

from react-challenge-amazon-clone.

my buy now button showing processing and payment did not get success, please help me

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

share you code, and console message
…
On Mon, 27 Jun 2022 at 11:48, ranjitkaran @.***> wrote: my buy now button showing processing and payment did not get success, please help me — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASZ2AR5YK2WGVZJRLHL7BYLVRF2HPANCNFSM4TSMVAFA . You are receiving this because you were mentioned.Message ID: </issues/11/1167131426@ github.com>

here is console msg

react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of Product. See https://reactjs.org/link/warning-keys for more information.
at p
at Product (http://localhost:3000/static/js/bundle.js:1887:5)
at div
at div
at div
at Home
at Route (http://localhost:3000/static/js/bundle.js:102076:29)
at Switch (http://localhost:3000/static/js/bundle.js:102278:29)
at Router (http://localhost:3000/static/js/bundle.js:101711:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:101332:35)
at div
at App (http://localhost:3000/static/js/bundle.js:154:87)
at StateProvider (http://localhost:3000/static/js/bundle.js:2055:5)
printWarning @ react-jsx-dev-runtime.development.js:117
react-jsx-dev-runtime.development.js:117 Warning: Failed prop type: Invalid prop to supplied to Link, expected one of type [string, object, function].
at http://localhost:3000/static/js/bundle.js:101478:31
at Header (http://localhost:3000/static/js/bundle.js:668:79)
at Route (http://localhost:3000/static/js/bundle.js:102076:29)
at Switch (http://localhost:3000/static/js/bundle.js:102278:29)
at Router (http://localhost:3000/static/js/bundle.js:101711:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:101332:35)
at div
at App (http://localhost:3000/static/js/bundle.js:154:87)
at StateProvider (http://localhost:3000/static/js/bundle.js:2055:5)
printWarning @ react-jsx-dev-runtime.development.js:117
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of Checkout. See https://reactjs.org/link/warning-keys for more information.
at CheckoutProduct (http://localhost:3000/static/js/bundle.js:495:5)
at Checkout (http://localhost:3000/static/js/bundle.js:355:79)
at Route (http://localhost:3000/static/js/bundle.js:102076:29)
at Switch (http://localhost:3000/static/js/bundle.js:102278:29)
at Router (http://localhost:3000/static/js/bundle.js:101711:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:101332:35)
at div
at App (http://localhost:3000/static/js/bundle.js:154:87)
at StateProvider (http://localhost:3000/static/js/bundle.js:2055:5)
printWarning @ react-jsx-dev-runtime.development.js:117
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of CheckoutProduct. See https://reactjs.org/link/warning-keys for more information.
at p
at CheckoutProduct (http://localhost:3000/static/js/bundle.js:495:5)
at div
at div
at div
at Checkout (http://localhost:3000/static/js/bundle.js:355:79)
at Route (http://localhost:3000/static/js/bundle.js:102076:29)
at Switch (http://localhost:3000/static/js/bundle.js:102278:29)
at Router (http://localhost:3000/static/js/bundle.js:101711:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:101332:35)
at div
at App (http://localhost:3000/static/js/bundle.js:154:87)
at StateProvider (http://localhost:3000/static/js/bundle.js:2055:5)
printWarning @ react-jsx-dev-runtime.development.js:117
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of Payment. See https://reactjs.org/link/warning-keys for more information.
at CheckoutProduct (http://localhost:3000/static/js/bundle.js:495:5)
at Payment (http://localhost:3000/static/js/bundle.js:1552:79)
at Elements (http://localhost:3000/static/js/bundle.js:51999:30)
at Route (http://localhost:3000/static/js/bundle.js:102076:29)
at Switch (http://localhost:3000/static/js/bundle.js:102278:29)
at Router (http://localhost:3000/static/js/bundle.js:101711:30)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:101332:35)
at div
at App (http://localhost:3000/static/js/bundle.js:154:87)
at StateProvider (http://localhost:3000/static/js/bundle.js:2055:5)
printWarning @ react-jsx-dev-runtime.development.js:117
:5001/e-commerce-website-proj-sem6/us-central1/api/payments/create?total=69798:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
Payment.js:38 Uncaught (in promise) AxiosError
v3:1 Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmCardPayment intent secret: value should be a client_secret string. You specified: true.
at Y (v3:1:10134)
at W (v3:1:10204)
at u (v3:1:37383)
at v3:1:257269
at v3:1:61420
at e. (v3:1:292155)
at e.confirmCardPayment (v3:1:131762)
at handleSubmit (Payment.js:50:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

from react-challenge-amazon-clone.

share you code, and console message
…
On Mon, 27 Jun 2022 at 11:48, ranjitkaran @.***> wrote: my buy now button showing processing and payment did not get success, please help me — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASZ2AR5YK2WGVZJRLHL7BYLVRF2HPANCNFSM4TSMVAFA . You are receiving this because you were mentioned.Message ID: </issues/11/1167131426@ github.com>

here is my github repository link
https://github.com/ranjitkaran/amazon-clone

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

Refer my github repository link.. As few things which are working in tutorial are not working now because of the updation.. Such as instead of useHistory , useNavigation.. instead of axios i hve used fetch async await nd it worked.. https://github.com/kskaransethi/Amazon-clone-app On Mon, 27 Jun 2022 at 1:11 PM, ranjitkaran @.> wrote:
…
share you code, and console message … <#m_4264825458545663609_> On Mon, 27 Jun 2022 at 11:48, ranjitkaran @.> wrote: my buy now button showing processing and payment did not get success, please help me — Reply to this email directly, view it on GitHub <#11 (comment) <#11 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASZ2AR5YK2WGVZJRLHL7BYLVRF2HPANCNFSM4TSMVAFA . You are receiving this because you were mentioned.Message ID: < /issues/11 <#11> /1167131426@ github.com> here is my github repository link https://github.com/ranjitkaran/amazon-clone — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASZ2AR6NO6OF6AXWSFZWJD3VRGD5HANCNFSM4TSMVAFA . You are receiving this because you were mentioned.Message ID: </issues/11/1167218524@ github.com>

I have download your repository code and run it on vsc but this errors come
PS C:\Users\msi\Downloads\Amazon-clone-app-master> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\msi\AppData\Local\npm-cache_logs\2022-07-10T12_50_30_128Z-debug-0.log
PS C:\Users\msi\Downloads\Amazon-clone-app-master> npm install

up to date, audited 11 packages in 1s

found 0 vulnerabilities
PS C:\Users\msi\Downloads\Amazon-clone-app-master> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR!
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\msi\AppData\Local\npm-cache_logs\2022-07-10T12_51_30_135Z-debug-0.logPS C:\Users\msi\Downloads\Amazon-clone-app-master>

please help me to complete the project.

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

@ranjitkaran the code for the project is front-end: install stripe dependancy(npm install stripe), i couldn't connect front and back end without stripe dependancy. the code is:{useEffect(() => {
// generate the special stripe secret which allows us to charge a customer
const getClientSecret = async () => {
await fetch("http://localhost:5001/e-commerce-website-proj-sem6/us-central1/api/payment/create", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
body: JSON.stringify({ total: getBasketTotal(basket) * 100 })
}).then(res => res.json()).then(data => setClientSecret(data.clientSecret));

    }
    getClientSecret();
}, [basket])},

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)
}
})
console.log(payload); here the log through the error
//.then(({ paymentIntent }) => {
// // paymentIntent = payment confirmation
// 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);
    //     setErrror(null)
    //     setProcessing(false)

    //     dispatch({
    //         type: 'EMPTY_BASKET'
    //     })

    //     history({ pathname: "/orders" })
    // })

}

back-end:{app.post('/payment/create', async (request, response) => {
console.log(request.body)
const total = request.body.total;
console.log('Payment Request Received BOOM!!!! for this amount >>>> ', total)

const paymentIntent = await stripe.paymentIntents.create({
    amount: total, // subunits of the currency
    currency: "usd",
});
console.log(paymentIntent);
// OK - Created
response.status(201).send({
    clientSecret: paymentIntent.client_secret,
})

})
}.
I had problem to finish your project because stripe through error due to indian regulations for stripe.

from react-challenge-amazon-clone.

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 <[#11 (comment)](https://github.com/CleverProgrammeh

did u find solution?
when i click buy now button it redirects to orders.js page but didn't show basket content ....whole page is blank . also i did inspect >> console but no error is displaying
if anyone knows the solution please help me :-( :-(

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

@Divipatidar upload your code in our repository and i can help you.

from react-challenge-amazon-clone.

@Divipatidar first of all. Change the useState of client_Secret from true to empty array. useState(" ").
Second without the code i cant help you more. I have to see all of the code plus.

from react-challenge-amazon-clone.

from react-challenge-amazon-clone.

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 ?

Same error, not getting redirected to orders page, various ways tried that are mentioned above but of to no effect

from react-challenge-amazon-clone.

@SohamMukherjee21 uploaded your code to your repo. I can't help you without any code.

from react-challenge-amazon-clone.