How to pass along dynamic amount in PaymentIntent

user_16603377 0
Viewed 254

I have hardcoded a price into my Next.js using Stripe test project but would like the amount paid to change upon submission from an input. I am specifically wondering how I pass along that data in the paymentIntent function I wrote:

//In Checkout.js

try {
        const {
                error,
                paymentIntent: { status },
                
              } = await stripe.confirmCardPayment(paymentIntent.client_secret, {
                payment_method: {
                  card: elements.getElement(CardElement),
                 amount: myAmountVariable //trying to pass
                },
              });


//In payment.js:

  paymentIntent = await stripe.paymentIntents.create({
    amount,
    currency: "usd"
  });


  return {
    props: {
      paymentIntent,
    },
  };
};

const CheckoutPage = ({ paymentIntent }) => (
  <Elements stripe={stripePromise}>
    <CheckoutForm paymentIntent={paymentIntent} />
  </Elements>
);

The above code, where I am attempting to pass in 'amount' gives me the error "Amount is not defined"

stripe-payments typescript
1 Answers

You can't submit an amount in confirmCardPayment -- that's not supported. If you want to adjust the amount, you need to have your client application send that amount to your server to update the payment intent prior to confirming it with confirmCardPayment in Stripe.js.

On the server:

const paymentIntent = await stripe.paymentIntents.update(
  'pi_1234',
  {amount: myAmountVariable}
);

I want to make sure that you're not including stripe-node in your client application, and that your secret is only only being used server side (eg, to create the payment intent). This is critical for security.

user_124748620
Related