#theuknowner
nocturne trail
👋 Give me a min to catch up!
rough wing
Ok
In order to reproduce it, add an <ExpressCheckoutElement /> and <PaymentElement />. Then switch between setup_future_usage to null and "on_session"
nocturne trail
Out of curiosity, are recurring payments enabled for Paypal in your Dashboard? https://stripe.com/docs/payments/paypal/set-up-future-payments?platform=web#enable-recurring-payments-support-from-stripe-dashboard
nocturne trail
Got it. In order to use setup_future_usage with Paypal, you must enable recurring payments in the Dashboard
rough wing
I don't want to use Paypal with setup_future_usage
The issue is that the PaymentElement displays the Paypal instead of having only the card inputs. The Paypal and the Google pay should be rendered only in the ExpressCheckoutElement
Is there any option to hide Paypal in Payment Element?
nocturne trail
Are you creating a PaymentIntent prior to rendering the PaymentElement, or are you using the deferred intent integration flow?
rough wing
I create the payment intent after rendering the paymentElement, when user clik "Pay"
rough wing
Ok
nimble kiln
👋 hopipng in here to help as well
rough wing
Hi
I have created an issue in Github -> https://github.com/stripe/react-stripe-js/issues/425
Please follow this link for more details
nimble kiln
Let's back up for a minute - when you intialize Stripe elements are you providing a client_secret, or are you setting options like amount and mode?
rough wing
I set only amount and mode. When user click pay I provide the client secret
nimble kiln
Gotcha - and when you check your account settings (https://dashboard.stripe.com/settings/payment_methods) do you have paypal turned on there?
rough wing
Yes i have it turned on
in PaymentElement I can set only -> wallets: {
applePay: 'never',
googlePay:'never'
}
in options. But there is no paypal: 'never'
My main issue is that if the Paypal button is rendered in ExpressCheckoutElement it doesn't need to redirect the user. If it's rendered in PaymentElement the user has to be redirected to Paypal and then redirect back to my app. The app is in ReactJS SPA, so this is an issue
nimble kiln
Yeah I see the issue - let me see what other folks do in this situation
rough wing
Ok
nimble kiln
Hmm... when I try and reproduce what you're seeing I only ever see paypal showing up in the ExpressCheckoutElement - what does your Element provider code look like?
rough wing
My elements wrapper:
<Elements stripe={stripePromise} options={{
mode: 'payment',
amount: 100,
currency: 'eur',
setup_future_usage: null,
layout: {
type: 'tabs',
defaultCollapsed: false,
},
appearance: {
theme: 'flat',
}
}} >
ExpressCheckout ->
<ExpressCheckoutElement onConfirm={this.handleSubmitExpressBtn} />
PaymentElement ->
<PaymentElement
options={{
wallets: {
applePay: 'never',
googlePay:'never'
},
fields: {
billingDetails: {
email: 'auto',
name: 'auto',
phone:'auto'
}
}}}/>
hybrid talonBOT
nimble kiln
(still working on trying to repro this by the way - sorry for the wait)
nimble kiln
okay, so tried a couple of things out - is it possible you're wrapping your ExpressCheckoutElement and your PaymentElement with different Elements wrappers?
river gust
@rough wing You still around?
rough wing
No I don't have different Elements wrappers
<Elements stripe={stripePromise} options={{
mode: 'payment',
amount: 100,
currency: 'eur',
setup_future_usage: null,
layout: {
type: 'tabs',
defaultCollapsed: false,
},
appearance: {
theme: 'flat',
}
}} >
<ExpressCheckoutElement onConfirm={this.handleSubmitExpressBtn} />
<PaymentElement
options={{
wallets: {
applePay: 'never',
googlePay:'never'
},
fields: {
billingDetails: {
email: 'auto',
name: 'auto',
phone:'auto'
}
}}}/>
</Elements>
I set the setup_future_usage dynamically
with this.props.elements.update({setup_future_usage:"on_session"})
nimble kiln
Interesting - the only way I was able to reproduce what you were seeing was by using two Elements wrappers and putting the ExpressCheckoutElement PaymentElement in separate ones.
Do you have a page I can check out and see for myself?
rough wing
How can I check if the <Elements ..> has been recreated?
Unfortunately it's a private project
The <Elements> is in index.js that wraps the entire app so I don't think that is recreated
In order to reproduce it:
- create an index.js page and add:
<Elements stripe={stripePromise} options={{
mode: 'payment',
amount: 100,
currency: 'eur',
setup_future_usage: null,
layout: {
type: 'tabs',
defaultCollapsed: false,
},
appearance: {
theme: 'flat',
}
}} >
<Checkout />
</Elements>
- Create the Checkout Page and add:
<div>
<ExpressCheckoutElement onConfirm={this.handleSubmitExpressBtn} />
<PaymentElement
options={{
wallets: {
applePay: 'never',
googlePay:'never'
},
fields: {
billingDetails: {
email: 'auto',
name: 'auto',
phone:'auto'
}
}}}/>
</Elements>
<Checkbox checked={this.state.saveCardOption} onChange={(e) => {this.props.elements.update({setup_future_usage: e.target.checked == true ? "on_session" : null}); this.setState({saveCardOption: e.target.checked})}}>SaveCard</Checkbox>
</div>
- switch checkbox to set -> setup_future_usage on_session or null
hybrid talonBOT
nimble kiln
Yeah I've got essentially the same thing except I'm using a button click to trigger elements.update()
and this is what I see in my own test
rough wing
Yes that's it. The Paypal has been rendered in PaymentElement instead of the ExpressCheckoutElement
nimble kiln
Ahhhh dang it - this is my fault. I misunderstood your question initially and ran with it
So yes, I can reproduce exactly what you're seeing
rough wing
That's a big issue because as I wrote previously, if the Paypal is rendered via the ExpressCheckoutElement it will open a popup and the user won't be redirected to the Paypal page. Now, as it is, the Paypal is rendered in the PaymentElement and the user has to be redirected to the Paypal page.
nimble kiln
Yeah I'm pretty sure this is a bug - if shown, it should be consistent about which element it's shown in. And I believe with setup_future_usage we shouldn't be showing it anyways (but let me test one thing for that)
rough wing
Ok
nimble kiln
Okay so looks like it showing in testmode is expected (usually paypal w/ setup_future_usage needs approval, but that's specificalyl for livemode). So it's just the one bug - that it's moving between elements unexpectedly
As a temporary workaround, what you can do is manually specify paymentMethodTypes in the options you pass into the Elements provider and exclude paypal to ensure it never shows up there
In the mean time, I'll flag to some folks internally to get this fixed
rough wing
Ok I’ll check it by setting the paymentMethodTypes.
nimble kiln
sorry for how long it took to repro - my react samples didn't want to cooperate for a bit there