#viraths - Apple Pay

1 messages · Page 1 of 1 (latest)

scenic ruin
#

Hello! The fix is mentioned in the error; you must call that from a gesture handler. Can you share the client-side code starting from the onclick handler up to where you call paymentRequest.show()?

lilac marsh
#

This is the button

<Button size="large" onClick={onClick} className={styles.walletPayButton}>
<Image preview={false} src={/images/apple-pay.svg} />
</Button>

onClick function

const onClick = async () => {
try {
const result = await createPaymentIntent(storeId, 'STRIPE');

  if (result?.error?.message) {
    return;
  }

  if (!result?.intent || !result.intent.amount) {
    return;
  }

  stripePayment.paymentRequest?.update({ total: { amount: result.intent.amount * 100, label: 'TAGR' } });
  setStripeSecret(result?.intent.secret);
  stripePayment.paymentRequest?.show();
} catch (e: any) {
  console.log(e);
}

}

scenic ruin
#

Yeah, that won't work because there's a disconnect between the gesture handler and the call to show the payment sheet. You can't do an async call in between. You need to restructure things so the gesture handler directly calls paymentRequest.show().

lilac marsh
#

Ahh okay. Payment request api have method with promise as the argument to show() method. But I don't think stripe has implemented it, right?

show(detailsPromise)

scenic ruin
#

I don't think what you're describing is implemented by Stripe, no.

lilac marsh
#

Do you know anywhere this behaviour is described? Btw thanks for the quick reply.

scenic ruin
#

Which behavior? About the gesture handler?

lilac marsh
#

I meant it won't allow any api calls to the server.

scenic ruin
#

What exactly are you asking for? I'm not sure how to best help you.

lilac marsh
#

So I have my own apple pay button. In onClick handler I do an api call to get the latest amount. Then I update the amount using paymentRequest.update({amount etc}) and then show the apple sheet doing paymentRequest.show(). But it failed with following error.

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

scenic ruin
#

Yep, you described all of that above.

lilac marsh
#

Correct. My question is why it's not allowed doing api call before the calling .show() and if so is there any docs that describe above behaviour?

scenic ruin
#

I linked you to the docs above. You can't do it because it's a security measure put in place by the browser.

#

Is the spec link what you're looking for?

lilac marsh
#

Yeah but I am doing it inside the click handler. Anyway appreciate your help. All good.

scenic ruin
#

You're not, though. You're doing it after an async process, in the Promise completion handler essentially (although that's masked by the async/await code you're using).

lilac marsh