#thekents_unexpected
random horizonBOT
👋 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/1478034010520420434
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
crisp crescent
<ExpressCheckoutElement
onConfirm={handleExpressConfirm}
onReady={(event) => {
if (event.availablePaymentMethods) {
setExpressReady(true);
}
}}
options={{
buttonHeight: 50,
buttonTheme: {
applePay: 'black',
googlePay: 'white',
paypal: 'gold',
},
buttonType: {
applePay: 'buy',
googlePay: 'buy',
paypal: 'pay',
},
layout: { maxColumns: 3, overflow: 'auto' },
paymentMethodOrder: ['applePay', 'googlePay', 'paypal'],
paymentMethods: {
applePay: 'auto',
googlePay: 'auto',
link: 'auto',
paypal: 'auto',
},
}}
/>
PayPal is below in payment methods but not as Express Button
buoyant tinsel
That is surprising. Do you see PayPal no this demo page if you set the merchant country to UK? https://docs.stripe.com/elements/express-checkout-element
crisp crescent
It does show up
buoyant tinsel
Is that page that you sent a screenshot of public? It could be helpful to take a look in my browser
crisp crescent
Yeah, you can visit and add to cart: https://www.sanalliset.fi/tuote/aina-sydamessani-3-5mm-rannekoru
buoyant tinsel
Still looking in to this, not immediately seeing a reason for PayPal to not show up. I see PayPal lower on your page and I see the ECE is on the page.
crisp crescent
mhm, could it be some limitation for custom checkout? anyway take your time 🙂
buoyant tinsel
Not immediately sure but that definitely feels possible. I don' see any restrictions documented around PayPal + custom checkout but am still looking. Reached out to my colleagues who may know more here as well
crisp crescent
Alright
buoyant tinsel
My colleague suspects that it may be this restriction where paypall doesn't show up if billing address collection, shipping address collection, or phone number collection are enabled. Can you set those to false for the checkout sessions you create in test mode and see if PayPal starts showing up again?
That would be an unfortunate restriction because you are shipping something here, so that may just mean that PayPal can only show up lower down on the page as a redirect
crisp crescent
I cant get to seem to add those params to either ECE nor CheckoutProvider.
ECE options type:
export type StripeCheckoutExpressCheckoutElementOptions = {
buttonHeight: StripeExpressCheckoutElementOptions['buttonHeight'];
buttonTheme: StripeExpressCheckoutElementOptions['buttonTheme'];
buttonType: StripeExpressCheckoutElementOptions['buttonType'];
layout: StripeExpressCheckoutElementOptions['layout'];
paymentMethodOrder: StripeExpressCheckoutElementOptions['paymentMethodOrder'];
paymentMethods: StripeExpressCheckoutElementOptions['paymentMethods'];
};
Hard part about understanding docs is that there is Stripe.js element and CheckoutProvider which conflict with eachother
like for example with CheckoutProvider you cant add phone number collection to Shipping address element
ShippingAddressElement options:
export type StripeCheckoutAddressElementOptions = {
contacts?: ContactOption[];
display?: {
name?: 'full' | 'split' | 'organization';
};
};
also adding phone_number_collection: {
enabled: true,
},
doesn't change a thing
buoyant tinsel
For this I think you would want to modify what you are passing to the checkout session create call:
- Set
billing_address_collectionto auto - Leave out
shipping_address_collection - Leave out
phone_number_collection
buoyant tinsel
Thanks for testing! Good to have it diagnosed at least. I am not seeing a way to enable this at the moment unfortunately
crisp crescent
Yeah, unfortunate. Can you file it forward to whoever develops these things?
Can I also loan you for the native phone number input for ShippingAddressElement?
buoyant tinsel
Yep yep will file feedback. Can you tell me more about the native phone number input request?
crisp crescent
Yeah so in create checkout request i have given a parameter:
phone_number_collection: {
enabled: true,
},
This should add a phone number input to ShippingAddressElement but it doesnt, on the site i gave you I have created a custom input for mobile number input
I've gone and forwarded my dev server with ngrok: https://lintier-altha-contrastably.ngrok-free.dev/tuote/aina-sydamessani-3-5mm-rannekoru
If you navigate to checkout, there shouldnt be phone number input anymore but i still have phone_number_collection enabled
buoyant tinsel
Can you try setting this fields.phone field to always when initiating your address element?
https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-fields-phone
I would think the address element should automatically set that based on the checkout session setting, but it looks like it may not and that setting may still be necessary (can definitely file a piece of feedback about that)
crisp crescent
Can i set the fields even if i use CheckoutProvider? https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider
Here is the ShippingElement:
https://docs.stripe.com/js/react_stripe_js/checkout/shipping_address_element
buoyant tinsel
Looks like you can't. Still looking in to this, I hope the answer isn't that the address element just doesn't support this with custom checkout at the moment.
crisp crescent
😄 Kinda looks like it but lets hope so. Anyway take your time, no hurries
buoyant tinsel
Unfortunately it looks like that is the case. I will add to the feedback about this.
crisp crescent
Okay, thank you.
That is all for now!