uh oh - PaymentElement

[nimble cliff]

Hello. One moment while I catch up here

Yes you should be able to do this with with the Single-page application tab selected in this guide: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

Or are you using server-side rendering?

[gusty knot]

Hi, I want to use setupintent and not paymentintent as I want to allow the user to save their card

without having to actually pay

https://stripe.com/docs/payments/save-and-reuse?platform=web&html-or-react=react

I'm following this at the moment, however it requires to provide the clientsecretkey in the options

    // passing the client secret obtained in step 2
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };```

Is there a way to conditionally render the PaymentElement component without having to provide a secret key?

For eg.:

Only make a createSetupIntent api call when the user clicks on add a new card, which then loads the PaymentElement component

[nimble cliff]

Yeah, so when I sent that guide I should have been more specific, sorry. You can just substitute the setupintent secret for the paymentintent one. Are you using server-side rendering or a framework like react, angular, etc.?

[gusty knot]

I'm using react

[gusty knot]

I'm not sure I understand what you mean by substituting the setupintent by the paymentintent one

It says that for setting up a future payment without actually paying, you guys recommend setup intent?

[nimble cliff]

Yeah so let's just use this guide: https://stripe.com/docs/payments/save-and-reuse

My bad for creating the confusion here

So if you select the "Single-page application" tab, then that will create a bit of a blueprint for you to go forward

What you'd want to do is, on clicking your button, fetch that setupintent secret from you back-end, and then use javascript to create that paymentelement, passing in the setupintent secret

To be more precise, I'm referring to this step: https://stripe.com/docs/payments/save-and-reuse?platform=web#web-create-intent

That pattern doesn't require you to create the setup intent until the user explicitly clicks on the "add a new card" button

[gusty knot]

But let's say

        <Elements stripe={...} options={...}>
          <PaymentElement/>
        </Elements>
    </Checkout>

You need to render the Elements and provide an options parameter (with the client secret)

how would you use javasacript to "create" a paymentelement?

[errant cypress]

catching up here

you can use a certain state that re-renders your PaymentElement ?

I'm no React expert btw but that is what would work?

[gusty knot]

So you would have a state that tracks the options,

and if the user clicks on "add new card", it calls the api to return a client secret, which updates the state tracking the options

And this would re-render the paymentelement?

The problem is that the PaymentElement doesn't render at all if no "secret key" is provided in the <Elements> component

It turns the whole page into a blank page

[errant cypress]

The problem is that the PaymentElement doesn't render at all if no "secret key" is provided in the <Elements> component
PaymentElement doesn't use secret key so I think you mean something else/

And this would re-render the paymentelement?
Try it out, my understanding of React is that yes if you update state, the components are re rendered

[gusty knot]

It says in the documentation that in order to use PaymentElement

you need to provide a clientSecretKey in the <Elements> options

[errant cypress]

ah so client_secret, not secret key (the latter is referring to the sk_test_123 API key you use server-side)

so yeah you could make that the state

[gusty knot]

The problem is, if clientSecret is not valid, it makes the WHOLE page blank (I tried this before)

So I cannot put the PaymentElement in my component, even if it's conditionally rendered

It requires <Elements> to have options with a valid clientSecret

Basically I would like the following flow:

Case 1:

• User is in checkout page
• User clicks on add new card
• Api call to get client secret (with create setup intent)
• PaymentElement is conditionally rendered/shown

Case 2:

• User is in checkout page
• User chooses saved card
• User pays
  (note no api call to get client secret is made)

Right now it's impossible to use PaymentElement if no client secret is provided in the options of <Elements>

[errant cypress]

just don't render PaymentElemnet until you have a clientSecret

I forget the exact React syntax but something like

{clientSecret && <PaymentElement>}

that is probably incorrect but that amounts to "if clientSecret is non-null then display PaymentElement component"

[shut fox]

No, it's correct - it actually read as "evaluate the first; if it's null, just return that value. If not, evaluate the second and return that value" - the "&&" is NOT commutative

[errant cypress]

thanks for the check!

[shut fox]

FYI, I do almost exactly this 😀