#vm1172

1 messages · Page 1 of 1 (latest)

silk quailBOT
wooden flame
#

Hello 👋
Do you already have a ticket with us via support?

late marsh
#

hello

#

No i do not

wooden flame
#

okay, when exactly are you seeing this error?

Can you share the code you're working with?

late marsh
#

yes, one second

#

This is my PlatformPayButton component

        <PlatformPayButton
          onPress={pay}
          onShippingContactSelected={async (contact) =>
            onShippingContactSelected(contact.shippingContact)
          }
          onCouponCodeEntered={couponCodeListener}
          type={PlatformPay.ButtonType.Order}
          appearance={PlatformPay.ButtonStyle.Automatic}
        />
#

This is the pay function

  const pay = async () => {
    if (!clientSecret) {
      Toast.show({ type: 'error', text1: 'Something went wrong, please try again later' })
      Sentry.Native.captureException(new Error('clientSecret is undefined'))
      return
    }
    const { paymentIntent, error } = await confirmPlatformPayPayment(clientSecret, {
      applePay: {
        cartItems: cart,
        merchantCountryCode: ALLOWED_COUNTRY,
        currencyCode: CURRENCY.toUpperCase(),
        shippingMethods,
        requiredShippingAddressFields: [
          PlatformPay.ContactField.Name,
          PlatformPay.ContactField.PostalAddress
        ],
        requiredBillingContactFields: [PlatformPay.ContactField.PostalAddress],
        merchantCapabilities: [
          ApplePayMerchantCapability.Supports3DS,
          ApplePayMerchantCapability.SupportsCredit,
          ApplePayMerchantCapability.SupportsDebit
        ]
      }
    })
    if (error) {
      Alert.alert('Error', `${error.code}: ${error.message}`)
      Toast.show({ type: 'error', text1: `${error.code}: ${error.localizedMessage}` })
      Sentry.Native.captureException(error)
      console.error('Stripe Apple Pay Error', error)
    } else {
      if (IS_DEV_ENV) Alert.alert('Success', 'Check the logs for payment intent details.')
      console.log(JSON.stringify(paymentIntent, null, 2))
      setClientSecret(null)
      router.push({ pathname: '/summary', params: { paymentIntentId } })
    }
  }
#

when clicking on Pay on the Apple Pay Sheet, confirmPlatformPayPayment errors out and and shows the alert.

#

when the component mounts I create a paymentIntent

  useEffect(() => {
    fetchPaymentIntentClientSecret().then()
  }, [])

  const fetchPaymentIntentClientSecret = async () => {
    const token = await getItem('token')
    const { paymentIntentId, clientSecret } = await CheckoutSessionAPI.createPaymentIntent(
      productId,
      token
    )
    setPaymentIntentId(paymentIntentId)
    setClientSecret(clientSecret)
  }
wooden flame
#

can you print out following variables before you call confirmPlatformPay

  • clientSecret
  • cart
  • ALLOWED_COUNTRY
  • CURRENCY.toUpperCase()
late marsh
#

sure one sec

silk quailBOT
late marsh
# 
{
    "ALLOWED_COUNTRY": "US",
    "cart": [
        {
            "amount": "71",
            "label": "Subtotal",
            "paymentType": "Immediate"
        },
        {
            "amount": "6.57",
            "isPending": false,
            "label": "Tax",
            "paymentType": "Immediate"
        },
        {
            "amount": "0.00",
            "isPending": false,
            "label": "Shipping",
            "paymentType": "Immediate"
        },
        {
            "amount": "77.57",
            "isPending": false,
            "label": "Total",
            "paymentType": "Immediate"
        }
    ],
    "clientSecret": "pi_3NxVs0Ca1hzW9vNX1x4zTaja_secret_S1eUXq9LrtYETbiHkcJLMnbto",
    "currency": "USD"
}
#

I triggered this in the pay function, before confirmPlatformPayPayment

wooden flame
#

if you remove everything else in the applePay object and only keep

        cartItems: cart,
        merchantCountryCode: 'us',
        currencyCode: 'usd',
      }````
#

does that change anything?

#

ah forgot to ask to print shippingMethods

#

@late marsh

late marsh
#

hi

#

sorry let me just get on that

# 
{"shippingMethods": [{"amount": "0.00", "detail": "Arrives in 15 to 30 days", "identifier": "free-shipping", "label": "Free shipping"}]}
#

shippingMethods is just a constant defined outside

late marsh
#

it works now!

#

interesting

#

I removed everything except cartItems, merchantCountryCode, and currencyCode, and now it works. what does that mean

#

@wooden flame

wooden flame
#

that means the keys you removed, one of them were malformed

late marsh
#

and by keys you mean in one of the keys inside the applePay params object correct?

#

I haven't changed anything

wooden flame
#

yes, you can try adding keys back in one by one and find the one where the code breaks

late marsh
#

sounds good, will do that right now

#

so it was a problem with the shippingMethods being passed into confirmPlatformPayPayment.

It is required when calling updatePlatformPaySheet but but not for confirmPlatformPayPayment apparently.

This is what it looks like -

  const shippingMethods: PlatformPay.ShippingMethod[] = [
    {
      identifier: 'free-shipping',
      label: 'Free shipping',
      detail: 'Arrives in 15 to 30 days',
      amount: '0.00'
    }
  ]

am i missing something

wooden flame
#

So shipping methods would be set after the user selects a shipping address ideally

late marsh
#

We only (and will only always) have one shipping method (which is free). we're only using it to display to the user that we have free shipping

wooden flame
#

yeah not sure why it throws back and error, I'd recommend writing in via support so that our team can take a deeper look
we'll need to reproduce this to dig deeper

late marsh
#

yeah no worries I'll do that

#

thanks for helping out

#

I guess the github repo examples are just outdated.