pauliita_api

[brittle peak]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1413563943087247424

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[spark cosmos]

Hi there

[upbeat flame]

Hi!!

[spark cosmos]

How are you creating your Payment Element here?

Are you passing the client secret to render Payment Element?

[upbeat flame]

const stripeElements = stripeInstance.elements({
mode: 'payment',
amount: amount,
currency: 'usd',
});

then when I submit the payment I send a request to the server which creates the payment intent
and return the client_secret to the client again

  const response = await this.fetch.post('/consumer/checkouts/create_payment', {
    data: {
      name: name,
      address: address,
      gift_card_id: this.args.giftCard.id,
      promo_code_id: this.appliedPromoCode?.promoCodeId,
    },
  });

  if (response.client_secret) {
    // https://docs.stripe.com/js/payment_intents/confirm_payment
    this.args.stripeInstance
      .confirmPayment({
        elements: this.args.stripeElements,
        clientSecret: response.client_secret,
        confirmParams: {
          return_url: response.return_url,
          payment_method_data: {
            billing_details: {
              email: this.session.currentUser.email,
            },
          },
        },
      })

[spark cosmos]

Gotcha yeah you are using the deferred-intent approach. So you have two options, you can either use the intent-first approach... this would mean creating the Invoice first before rendering Payment Element and then passing the client secret when creating your Elements instance: https://docs.stripe.com/js/elements_object/create#stripe_elements-options-clientSecret

Or, you can specify paymentMethodTypes (https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes) when you create your Elements instance using the deferred-intent approach (meaning you create the Invoice upon the submission which is after rendering Payment Element.

Invoices + Elements is a little tricky because Invoices don't yet support Automatic Payment Methods, so you have to make sure the payment method types that you indicate client-side align with those supported for the Invoice (if you use the deferred-intent approach).

[upbeat flame]

i'll try it!