lumenwrites | Stripe Developers | Page 1

atomic pendantBOT Oct 18, 2023, 6:23 AM

#

outer ether Oct 18, 2023, 6:24 AM

#

https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=payment looks like you refer the deferred flow

Collect payment details before creating an Intent

Build an integration where you can render the Payment Element prior to creating a PaymentIntent or SetupIntent.

fervent shoal Oct 18, 2023, 6:33 AM

#

Thank you, this looks like what I need!

But I've just tried it out, and it doesn't seem to work. I'm confused, what's the difference between the deferred and non-defferred code? According to the guide in your link, I can create <Elements/> component without passing it clientSecret from the payment intent. But if I try to do that, I get an error:

IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

What am I doing wrong?

This renders:

        <Elements
          options={{ clientSecret, appearance, loader: 'auto' }}
          stripe={stripePromise}
        >
          <CheckoutForm />
        </Elements>

But this (without the clientSecret) doesn't:

        <Elements
          options={{ appearance, loader: 'auto' }}
          stripe={stripePromise}
        >
          <CheckoutForm />
        </Elements>

outer ether Oct 18, 2023, 6:33 AM

#

You didn't pass in a mode

fervent shoal Oct 18, 2023, 6:36 AM

#

Okay, perfect, this renders!

        <Elements
          options={{
            appearance,
            mode: 'payment',
            amount: 1099,
            currency: 'usd',
          }}
          stripe={stripePromise}
        >
          <CheckoutForm />
        </Elements>

One more question - is it secure to pass it "amount" on the client side? Wouldn't people be able to somehow edit the frontend code, and, for example, change the price from 1099 to 1, so they could buy the product for 1 cent?

#

(but if I don't set the amount, it gives me an error: IntegrationError: Missing value for options: amount should be a number.)

outer ether Oct 18, 2023, 6:41 AM

#

1 cent is below the minimum charge amount
The actual amount to be charged is determined by the PaymentIntent, which can only be created with secret key

fervent shoal Oct 18, 2023, 6:43 AM

#

Well, 1 cent was just an example, what I meant is that a malicious user could reduce the price.
Ok, so I set the actual price to be charged when I create the payment intent on the backend, that does make sense. Then why do I also need to set the amount and currency on the client?

outer ether Oct 18, 2023, 6:44 AM

#

That's the information for PaymentElement to determine what payment method types to display

#

For example, BECS Direct Debit transactions have a default limit of 1,500 AUD per transaction, if the amount is > 15000, PaymentElement won't display BECS Direct Debit

fervent shoal Oct 18, 2023, 6:45 AM

#

Ah, I understand now. This is perfect, thank you so much for your help!

#lumenwrites