#Omri

1 messages · Page 1 of 1 (latest)

stiff hareBOT
eternal compass
#

Hi there!

#

Can you share a PaymentIntent ID (pi_xxx) where you see this issue?

trim plume
#

pi_3Lib3kCBUl2dXyH50tmvQpcx

#

or this one - pi_3Lib4RCBUl2dXyH51Mp9Dxb2

eternal compass
#

When this PaymentIntent was created, it had

payment_method_types: {
  0: "card"
}

So it's expected that only card payment will appear.

trim plume
#

ohh ok

#

for google pay & apple pay what should be the payment_method_types ?

eternal compass
trim plume
#

cool, it is works, but I cannot click on the pay button on the Payment element in google pay section, the button is disabled

eternal compass
#

What do you mean by "disabled"? What happens when you click on the big blue button?

trim plume
#

nothing, and nothing in the console

eternal compass
#

And if you select card, fill the form, and click on the blue button, what happens?

trim plume
#

ohh it is work with the blue button, but we have issue with Apple pay only, checking with our support again and let you know

eternal compass
#

This includes: HTTPS URL, using Safari, have a card in your wallet, and have verified your domain with Stripe

trim plume
#

we call to const result = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl, payment_method_data: { billing_details: { email: email, name: fullName, phone: phone, address: { city: city, country: country, line1: address1, line2: address2, postal_code: zip, state: state } } } }, redirect: 'if_required', })

flat frigate
#

Hmm, that should be unrelated as you're not using Payment Request Button directly

#

What's the issue exactly?

trim plume
#

when I click on give now, the Payment Element is stuck, like in the pic

89.png
#

IntegrationError: show() must be called from a user gesture handler (such as a click handler, after the user clicks a button).

#

that the error form the console

flat frigate
#

What other code are you calling before confirmPayment?

#

Or can you share your function that triggers confirmPayment?

trim plume
# 
    setLoading()
    setDonationError('')

    if (!stripe || !elements) {
      return
    }

    const result = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: returnUrl,
        payment_method_data: {
          billing_details: {
            email: email,
            name: fullName,
            phone: phone,
            address: {
              city: city,
              country: country,
              line1: address1,
              line2: address2,
              postal_code: zip,
              state: state
            }
          }
        }
      },
      redirect: 'if_required',
    })

    if (result.error) {
      console.log(result)
      // This point will only be reached if there is an immediate error
      setDonationError(result.error.message)
      setLoadingDone()
      setPaymentSubmit('stripeError')
    } else {
      setStripePaymentIntent(result.paymentIntent)
      setPaymentSubmit('stripeDone')
      if (subscriptionValues.isSubscription) {
        setLoadingDone()
        submitDonationSuccess()
      }
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  }```
#

it is happened only with Apple pay

flat frigate
#

Is there somewhere I can reproduce this?

#

Yeah I think this is an issuer where Apple requires the Apple Pay modal to be presented within a certain timeframe after being initiated

trim plume
#

sure

#

1 sec

#
  1. click on make a gift
#
  1. select one of the campaign from the left list
#
  1. click continue
#
  1. fill all the required fields and click confirmation
#
  1. click pressed with payment
#
  1. select Apple Pay
#
  1. click give now
#

that's it

flat frigate
#

I'd prefer not to have to complete those form fields

#

Let's see

#

At what point you initialise the Payment Element?

trim plume
#

on the forth page

#

you can put a garbage data

flat frigate
#

I mean in the code

#

I suspect the issue is tat the Payment Element is initialised too early

trim plume
# 
            <Elements stripe={stripePromise} options={options}>
              <StripeCheckoutForm />
            </Elements>
          </div>```
flat frigate
#

Do you definitely have an active card in your Apple Pay wallet?

trim plume
#

yes, I have, and 3 different persons tested it with active card in Apple Pay wallet

main pine
#

Hey! Taking over for my colleague. Let me catch up.

trim plume
#

Hey, there is an option to video chat?

lofty bone
#

that's not an option we offer.

Looking at your code, it’s probably because the confirmation call is triggered from a useEffect handler. I don’t know why you do that instead of the submit action of a “pay” button. Does it work if you do it with a normal submit action?

trim plume
#

I'll try it

lofty bone
#

there's basically two causes of this
a) you are calling confirmPayment outside the context of a gesture handler(JS function handling a button block or keyboard event etc), usually because you you call it from the callback of an async action, or some other context entirely
b) you are calling from a gesture handler, but the time between the start of the event and you calling it was too long, so Safari decided it doesn't count.

Here it is probably a). And because of that limitation it's generally better to try to make the code that integrates the PaymentElement as simple as possible and not try to use too many layers of components or passing functions or events around between them. A basic form submit or button onclick would always work