bachir-ece-confirm

[hollow field]

Hello

First, is there a reason you are using both here? Payment Element includes the payment method types offered in Express Checkout Element

[hollow summit]

It's for (hopefully) improving our conversion rate on our payment forms by having the "ApplePay" or "GooglePay" Button more visible

[hollow field]

Gotcha

[hollow summit]

This is the error I get when calling confirmPayment btw:

PaymentElement.tsx:383 error caught IntegrationError: elements.submit() must be called before stripe.confirmPayment(). Call elements.submit() as soon as your customer presses pay, prior to any asynchronous work. Integration guide: https://stripe.com/docs/payments/accept-a-payment-deferred
    at Te (v3:1:84267)
    at e._handleMessage (v3:1:89801)
    at e._handleMessage (v3:1:101566)
    at v3:1:87704

[hollow field]

With ExpressCheckoutElement you set the onConfirm prop.

With Payment Element you use your own button and have an event handler for that button

[hollow summit]

Indeed, so in the express onConfirm, I'm calling the same function that is called when submitting the form using the StripeElement. This function includes :

• Submitting the element
• Creating the payment method (we use the deferred flow)
• Checking the order is valid
• Confirming the payment intent => This is where it fails for the express checkout.

Is there something we shouldnt be doing when express checkout ?

Okey I think that the issue is that when doing :

            const { error } = await stripe.confirmPayment({
              //`Elements` instance that was used to create the Payment Element
              elements,
              clientSecret,
              confirmParams: {
                return_url: result.returnUrl,
                payment_method_data: {
                  billing_details,
                },
              },
            });

elements is the PaymentElement, that's why it fails ?

[hollow field]

Ah I see

What happens if you pass an extra argument to your function that indicates which Element and then you explicitly get the Element (like: ExpressCheckoutElement via https://docs.stripe.com/js/elements_object/get_express_checkout_element before you call elements.submit() and confirmPayment() ?

[hollow summit]

Let's see...

[hollow summit]

Same issue, but I managed to fix this by removing elements from confirmPayment arguments, clientSecret is enough actually

Thanks for the help!

[hollow field]

Ah okay yeah that makes sense.

Good catch

[hollow summit]

Have a nice day 👋

[hollow field]

You too