#theuknowner_unexpected
lavish pendantBOT
👋 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/1382091161006768129
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
river escarp
Hi, I know that Apple Pay and Google Pay will render on the ExpressCheckoutElement, https://docs.stripe.com/payments/payment-element but let me confirm if there is a way to confol PayPal
quaint imp
Hi, If i set setup_future_usage: null. it renders in ExpressCheckoutElement, but this is not a solution because in the 2nd render, it renders inside PaymentElement
river escarp
What do you mean by 'because in the 2nd render' exactly?
quaint imp
I have a form with 3 steps, in the final step I have setup the ExpressCheckoutElement and PaymentElement. If the user navigates back to step 2 and then again to the checkout, it renders inside the payment element
If I set in Elements setup_future_usage: "off_session" or setup_future_usage: "on_session", it renders inside the PaymentElement
river escarp
Can you share your page where we can attempt to reproduce this please?
quaint imp
It's not live so I can't share it. In order to reproduce it in React. Please create a page with the following parameters:
<PaymentElement
options={{
wallets: {
applePay: 'never',
googlePay:'never',
},
layout: {
type: 'tabs',
defaultCollapsed: false,
},
}}/>
<ExpressCheckoutElement
options={{
buttonHeight: 44,
buttonType: {
applePay: 'check-out',
googlePay: 'pay',
paypal: 'pay'
}
}}
onClick={this.onClickExpress}
onConfirm={this.handleSubmitExpressBtn} />
<Elements stripe={stripePromise} options={{
mode: 'subscription',
payment_method_types: ['card', 'paypal'],
amount: 100,
currency: 'eur',
setup_future_usage: "off_session",
}}>
This is how it renders inside the payment element when setup_future_usage: "off_session" or setup_future_usage: "on_session"
It should be like this
lavish pendantBOT
tidal hare
Hi hi! I’m going to be taking over for my colleague here. Why are you using both Payment Element and ECE?
quaint imp
According to the docs it suggests to migrate to the ECE for wallets/paypal.
Also, with the ECE the customers completes the transaction without redirect etc.
I use PaymentElement for Cards and ECE for wallets/paypal
For subscriptions
tidal hare
I'm almost certain that both the PaymentElement and ECE need to be inside the <Elements> element.
quaint imp
It's inside <Elements>
tidal hare
Not according to the code you shared above.
quaint imp
<Elements>
<ExpressCheckoutElement />
<PaymentElement />
</Elements>
tidal hare
That would be correct, but that's not what you shared above.
tidal hare
Can you reproduce it without the rest of your app?
quaint imp
Yes I tested it, with a simple setup and the result is the same if setup_future_usage is set to on_session or off_session
The Paypal Button renders inside the ECE only if setup_future_usage is set to null
tidal hare
Can you share the code for that?
quaint imp
<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>
tidal hare
What I mean was: did you reproduce this in something you could share in its entirety via i.e. Github.
quaint imp
I think the issue is that the Payment Element hasn't an option like the wallets:
wallets: {
applePay: 'never',
googlePay:'never',
} <- this prevents wallets from beign rendered in PaymentElement
it should prevent paypal also
No i don't have it in Github
tidal hare
Ok I need to actually see the thing in action, so I'll have to reproduce it.
quaint imp
Ok
quaint imp
Any progress?
tidal hare
I've had a bunch of other folks I've had to help as well. I was just getting to it and now someone else has come in, so it may be a bit yet - though someone else will be coming online to take over for me shortly.
tidal hare
The Paypal Button renders inside the ECE only if setup_future_usage is set to null
This is almost certainly the issue. Still trying to reproduce.
quaint imp
Ok
Just set the same parameters as I sent you
In the elements, payment element and ece
quaint imp
What do you mean is failing for me entirely?
tidal hare
I am unable to succesfully produce HTML output from what you've got there, it only produces errors.
quaint imp
I think i found the issue
the issue is not in payment element, it's in the ece
for some reason, if the user naviagtes back and then again to the checkout step, it doesn't render the Paypal Button
i tested it without the paymentelement
In the 1st time it renders but not in the next one
So there is an issue with rerendering
tidal hare
Ok awesome. At least that's something. 🙂
What is your Stripe Account?
(What is the Stripe Account ID)
There are internal logs you can't see that might be useful here.
quaint imp
where can i find it?
Ok i found it-> acct_1KIJayCYiKPyEjfg
So the issue is that on 2nd rerender of the ExpressCheckoutElement it doesn;t render the paypal button
tidal hare
There are a bunch of frontend-related errors happening here too.
That said, it sounds like this may be about the way in which you're re-rendering the element?
quaint imp
If i set setup_future_usage: null it renders again correctly but if it's setup_future_usage: on_session or setup_future_usage: null:off_session it doesn't
I think there is a bug in ECE when the setup_future_usage is set to off_session or on_session
lavish pendantBOT
past lagoon
Hi there, not sure if you are still here, but it would be much appreciated if you can share a publicly accessible URL, so we can see your issue in action