#dhoang - Apple Pay

1 messages · Page 1 of 1 (latest)

junior girder
#

Hello! Are you able to reproduce this error at will, or does it only happen sometimes?

#

If you're table to reproduce can you look in the web developer console and see if any errors or warnings related to this are shown there?

thorn garnet
#

I am able to reproduce this at will on our demo environment

junior girder
#

Ah, in test mode? Is that exposed publicly? If so can you provide a link so I can reproduce/debug on my end?

thorn garnet
# 
paymentRequest.on("paymentmethod", async ev => {
        try {
          const { streetAddress1, streetAddress2, city, zipCode, state, phoneNumber } = form.getState().values
          const updatedUserInfo = await updateUser({
            variables: {
              params: {
                addressAttributes: { streetAddress1, streetAddress2, city, zipCode, state },
                phoneAttributes: {
                  phoneAreaCode: phoneNumber!.slice(0, 3),
                  phoneNumber: phoneNumber!.slice(3, 10)
                }
              }
            }
          })

          const createSetupIntentResult = await createSetupIntent({
            stripe,
            paymentMethodId: ev.paymentMethod.id,
            setupIntentMutation
          })
          if (createSetupIntentResult.error) {
            ev.complete("fail")
          } else {
            const checkoutResult = await handleCheckout({
              nameOnCard: ev.paymentMethod.billing_details.name,
              updatedUserInfo,
              paymentMethodId: ev.paymentMethod.id
            })

            if (checkoutResult.errors) {
              Sentry.captureException(checkoutResult.errors)
              ev.complete("fail")
              setCheckoutErrors(checkoutResult.errors)
            } else {
              flagsClient?.track(Events.CheckoutWithPaymentRequest, { type: ev.walletName })
              flagsClient?.track(
                ev.walletName === "applePay" ? Events.CheckoutWithApplePay : Events.CheckoutWithGooglePay
              )
              ev.complete("success")
              checkoutResult.goToCheckoutConfirmationPage()
            }
          }
        } catch (e) {
          Sentry.captureException(e)
          ev.complete("fail")
        }
      })
#

however, I don't think it ever hits our APIs as the network tab doesn't show any requests being made to updateUser (the first api call in the code above)

#

the last API call made in the network tab before it polls on the payment request form for a while before erroring is this call from q.stripe.com:

unknown.png
junior girder
#

The q.stripe.com requests aren't critical to/directly involved with the payment process. That error can be safely ignored.

#

Can you share your paymentRequest.canMakePayment() code?

thorn garnet
# 
useEffect(() => {
    let mounted = true
    if (stripe) {
      try {
        const pr = stripe.paymentRequest({
          country: "US",
          currency: "usd",
          total: {
            label,
            amount: amountInCents
          },
          requestPayerName: true,
          requestPayerEmail: true,
          requestPayerPhone: true
        })

        pr.canMakePayment().then(result => {
          if (result) {
            if (mounted) {
              setPaymentRequest(pr)
              setWallets(result)
            }
          }
        })
      } catch (e) {
        /**
         * if stripe API fails for whatever reason for google/apple pay,
         * record the exception and hide the button
         * */
        Sentry.captureException(e, { extra: { amountInCents, pricedProducts: JSON.stringify(pricedProducts) } })
        setPaymentRequest(null)
      }
    }

    return () => {
      mounted = false
    }
  }, [stripe])

just want to also note, we have no issues with google chrome payment request form. just safari/apply pay

junior girder
#

Is this happening on multiple Apple devices or just one?

thorn garnet
#

multiple apple devices. i've also tested this on my iphone and another engineer on his iphone

junior girder
thorn garnet
#

yes it does

#

just to note, we've had this apple pay button working and had previous users on it. it does show on our website.

junior girder
thorn garnet
#

acct_1H5LGqB2H6yYUNlL

junior girder
#

You have several Apple Pay domains on this account, is this issue happening on all of them?

thorn garnet
#

can you send me a link to view them?

#

it is failing on our production + demo domains.

#

so yes

junior girder
#

I can't see anything wrong on our end. I think the next step would be for me to reproduce and debug this myself. Can you provide access to a page in test mode that reproduces the issue and provide a link here?

thorn garnet
#

unfortunately, I don't have a public test link i can share

#

I was just curious if you've seen something like this before / what are some best practices on logging errors around the payment request form?

#

I was thinking, how often do I need to renew the certificate for the apple pay domain?

desert vessel
#

Hello! @junior girder had to step away, but give me a few minutes and I can catch up

thorn garnet
#

yeah it looks like I'm seeing this in google pay (chrome browser console)

pay.js:127 DEVELOPER_ERROR in loadPaymentData: An error occurred in call back, please try to avoid this by setting structured error in callback response
desert vessel
#

Oh interesting - I thought you said google pay was working fine?

thorn garnet
#

yeah I misspoke, I just tried it now

#

it seems like we do have a buggy payment request form. Sorry about that

desert vessel
#

no worries! Do you need any help looking into it?

thorn garnet
#

ah yes, I'm not sure where to even begin looking as this developer error above doesn't make sense to me.

desert vessel
#

👍 Let me take a look then!