#hugo_api

1 messages · Page 1 of 1 (latest)

tribal rootBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1417258764091920405

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

dense flower
#

👋 Hi looking over the request

#

Can you provide the exact error the Apple Pay modal is presenting you?

late lark
#

It's not an error it's just that it's an additional step that we don't want our customers to have to do since we already requested the address for

image.png
#

Where's using the AddressElement along the PaymentElement and all the billing details have been requested before getting to this step, we're using the createConfirmationToken but I don't know we need to pass anything so ApplePay will not show the Update Billing Address step.

const { error, confirmationToken } = await stripe.createConfirmationToken({ elements, params: { // eslint-disable-next-line @typescript-eslint/naming-convention return_url: returnUrl, }, });

tribal rootBOT
late lark
#

ApplePay payment methods that work on other places require the billing address on our process which is something we don't want to happen as we got the billing details from a previous step

sonic ermine
#

hello! fyi i am taking over this thread, gimme just a bit to catch up

#

can you share your code where you're creating the payment element and address element real quick?

#

i wanna set up a quick reproduction but i wanna make sure i'm doing the same thing as you

late lark
#

Yes, it has some custom code in between which might make it difficult but let me try to

#

Not sure the most useful way of sharing it with you but here goes related parts:

`<Styled.StripeElementsItemContainer>
<AddressElement
onReady={(e) => e.focus()}
options={addressOptions}
onChange={handleAddressElementChange}
/>
</Styled.StripeElementsItemContainer>
<Styled.StripeElementsItemContainer>
<PaymentElement options={paymentElementOptions} onChange={handlePaymentElementChange} />

            <Styled.NewProfileButtons>
                {onCancelEditingBillingProfile && (
                    <Styled.CancelButton onClick={onCancelEditingBillingProfile}>
                        {strings.cancel}
                    </Styled.CancelButton>
                )}
                {isLoading ? (
                    <LoadingSpinner variant="small" />
                ) : (
                    <Styled.CreateButton
                        onClick={handleSubmit}
                        disabled={!stripe || !elements || !isAddressComplete || !isElementsComplete}
                    >
                        {selectedPaymentType === 'external_paypal' ? strings.continueToPayPal : strings.save}
                    </Styled.CreateButton>
                )}
            </Styled.NewProfileButtons>
        </Styled.StripeElementsItemContainer>
    </>`
#

const paymentElementOptions: StripePaymentElementOptions = { layout: { type: 'tabs', defaultCollapsed: false, }, };

#

I just noticed we've changed the call for the PaymentElement and we're using the AddressElement on a different component which I don't know if could be breaking something, I have to test it internally.

Is there any guidance you can provide regarding what we need to provide in order for ApplePay to not show that modal?

sonic ermine
#

fyi i am bouncing between a couple of threads, but i am digging into this now! give me a bit to digest what you've shared

#

ok cool so it looks like you're using React Native and wrapping both of the AddressElement and the PaymentElement in the same StripeProvider right?

#

it's been a bit since i've looked at this functionality so now that i know what you're doing let me do some testing

late lark
#

React Web, not Native but yes under the same StripeProvider

sonic ermine
#

ahh sorry the other thread i am working on is related to react native 😅 i am thinking of the right thing and writing the wrong thing

late lark
#

I think my main question is, when using createConfirmationToken what can I do to prevent Apple Pay from requesting a billing address update on the payment method? I'm experimenting with passing payment_method_data, something like this:

paymentMethodData = { billing_details: { name: profileForBilling.nameOnCard || '', address: { line1: profileForBilling.address1 || '', line2: profileForBilling.address2 || '', city: profileForBilling.city || '', state: profileForBilling.stateDisplay || '', postal_code: profileForBilling.postalCode || '', country: 'US', }, }, };

const { error, confirmationToken } = await stripe.createConfirmationToken({ elements, params: { /* eslint-disable @typescript-eslint/naming-convention */ return_url: returnUrl, payment_method_data: paymentMethodData, /* eslint-enable @typescript-eslint/naming-convention */ }, });

sonic ermine
late lark
#

Haven't done so but will take a look