#theuknowner_unexpected

1 messages · Page 1 of 1 (latest)

fluid turtleBOT
#

đź‘‹ 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/1382294263395516456

đź“ť Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

wind pasture
#

It should render like this

paypalBug2.png
#

but it renders in the PaymentElement

paypalBug.png
patent nimbus
#

Ok, let's start by removing paypal from the Stripe Element.

#

Are you creating the PaymentElement with an Intent or without ?

wind pasture
#

This happens only if the setup_future_usage is set to "on_session" or "off_session". If the setup_suture_usage is set to null, there is no issue.

#

without intent

#

I create the intent when the user click "pay"

#

Frontend: ReactJS, Backend: Golang

patent nimbus
wind pasture
#

This is my structure:
<Elements stripe={stripePromise} options={{
mode: 'subscription',
payment_method_types: ['card', 'paypal'],
amount: 100,
currency: 'eur',
setup_future_usage: "off_session",
}}>

<ExpressCheckoutElement
options={{
buttonHeight: 44,
buttonType: {
applePay: 'check-out',
googlePay: 'pay',
paypal: 'pay'
}
}}
onClick={this.onClickExpress}
onConfirm={this.handleSubmitExpressBtn} />

<PaymentElement
options={{
wallets: {
applePay: 'never',
googlePay:'never',
},
layout: {
type: 'tabs',
defaultCollapsed: false,
},
}}/>

</Elements>

#

If i specify only cards, the Paypal is not available at all

patent nimbus
#

This isn't recommended (you should have only one instance- if you didn't got an error already..)

wind pasture
#

I have one instance of Elements

patent nimbus
#

You need to have two if you want to display Paypal in one element and not for the other.

#

Between, why you are creating two different Elements in the same UI ?

#

You should avoid that.

wind pasture
#

I have created the ExpressCheckoutElement to support wallets and Paypal

#

and PaymentElement to support cards

#

I can't create only one because I need wallets/cards

patent nimbus
#

PaymentElements supports both Wallets and cards.

wind pasture
#

Yes but the main difference is that through PaymentElement the user has to b redirected to an external website to authenticate the payment. In ExpressCheckoutElement, there is no redirection

patent nimbus
#

You mean for wallet there is a redirection when using PaymentElement?

wind pasture
#

For paypal

#

Is there any way to prevent redirection paying by paypal?

patent nimbus
#

Ok I see, let's try to display paypal in the Express Checkout Element then...

#

are you requesting shipping billing address for the Express Checkout Element ?

wind pasture
#

no

patent nimbus
wind pasture
#

no

patent nimbus
#

because if you request the email or billing, paypal won't be visible:

PayPal normally doesn’t provide the customer’s billing address (except for the country) or phone number. If they aren’t provided, the confirm event has empty strings for those properties. If you require the customer’s billing address or phone number, then the Express Checkout Element doesn’t display the PayPal button unless that information is available.

fluid turtleBOT
wind pasture
#

I don't request email, shipoing or billing

#

shipping*

patent nimbus
#

Ok 🤔

#

Back to here:

This happens only if the setup_future_usage is set to "on_session" or "off_session". If the setup_suture_usage is set to null, there is no issue.
Why you are setting setup_future_usage explicitly?

wind pasture
#

because i have only subscription mode

tepid summit
#

fyi i am taking over for os7m37, catching up on the issue now

wind pasture
#

ok

#

I think I resolved it! I set these parameters in ECE:
billingAddressRequired: false,
phoneNumberRequired: false,
shippingAddressRequired: false,
emailRequired: false,
and now it renders succesffully

#

Maybe this should be highlighted in the docs when you use ECE with PaymentElement

tepid summit
#

that makes sense! i think the only other way would be to collect those values and provide them separately.

#

i agree that it's a little confusing as written - we mention that "billingAddressRequired is true by default" and also that "If you require the customer’s billing address or phone number, then the Express Checkout Element doesn’t display the PayPal button", but I think it could be a little more clear

wind pasture
#

If you don't set these parameters explicitly:
billingAddressRequired: false,
phoneNumberRequired: false,
shippingAddressRequired: false,
it doesn't render