j_paymentelement-appearance | Stripe Developers | Page 1

silver hamletBOT Jul 17, 2024, 9:04 PM

#

👋 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/1263240006500094044

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

timber stratus Jul 17, 2024, 9:05 PM

#

Hi 👋

Stripe allows you to integrate Apple Pay in a number of products. You can get started reading about it here.

https://docs.stripe.com/apple-pay

noble falcon Jul 17, 2024, 9:05 PM

#

I already did

#

Here i would like to have an extra option that says apple pay

Screenshot_2024-07-17_at_3.06.02_p.m..png

timber stratus Jul 17, 2024, 9:06 PM

#

Then you should know we support Apple Pay in

Payment Element
Checkout
Express Checkout Element
Payment Request Button

noble falcon Jul 17, 2024, 9:06 PM

#

i know, look

timber stratus Jul 17, 2024, 9:07 PM

#

Your screenshot doesn't mean anything to me. What Stripe product are you using?

noble falcon Jul 17, 2024, 9:07 PM

#

Screenshot_2024-07-17_at_3.07.14_p.m..png

#

I was making a screenshot

#

When someone chooses to pay via card form, then it appears apple pay as you can see

noble falcon Jul 17, 2024, 9:09 PM

#

noble falcon Here i would like to have an extra option that says apple pay

I would like to go back 1 step and show apple pay on here

timber stratus Jul 17, 2024, 9:10 PM

#

I don't know what Stripe product you are talking about. If you cannot tell me what Stripe product you are using, I cannot help

noble falcon Jul 17, 2024, 9:13 PM

#

Im using PaymentElements import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'

timber stratus Jul 17, 2024, 9:14 PM

#

Okay, now we are getting somewhere.

#

Looking at that layout, it looks like the tabs option for the Payment Element. Apple Pay is being displayed. Where do you want it to show up that it is not?

noble falcon Jul 17, 2024, 9:15 PM

#

Let me show you a visual example. This website uses stripe, and if you can see, you can choose Apple pay option before displaying the credit card form:
https://demo.sundayapp.xyz/venues/943d2145-f227-476d-a94e-1ac09c8807b8/bills/07ab1316-09f1-30ea-b2ee-057325b71da8/splits/0c627eba-5213-4af7-98fd-c70e4d441074/payment-intents/new

timber stratus Jul 17, 2024, 9:19 PM

#

They are using Payment Element with radio buttons and have pre-selected Apple/Google Pay

#

Take a look at the demo on this doc: https://docs.stripe.com/payments/payment-element

noble falcon Jul 17, 2024, 9:20 PM

#

Yes, thats what I thought so, thanks for confirm that to me. But how do i show a button 'Apple Pay' like they do and then proceed to pay? because the only way i see i can implement apple way is showing the credit card form 😦

timber stratus Jul 17, 2024, 9:20 PM

#

You can change the options using the Layout menu

noble falcon Jul 17, 2024, 9:22 PM

#

it shows like this, so you are telling me i can fully customize this? and only show the card, apple pay, after pay etc, on radio buttons, without showing the credit card form?

Screenshot_2024-07-17_at_3.21.43_p.m..png

timber stratus Jul 17, 2024, 9:28 PM

#

I am saying you should use the menu on that page to adjust the element to see if it matches what you want. Here is the menu I mean.

noble falcon Jul 17, 2024, 9:29 PM

#

I know i can use accordion, but what i mean is that if is possible to do exactly as the demo i show you?

#

without showing the form

timber stratus Jul 17, 2024, 9:34 PM

#

You mean leave the form collapsed and have the Apple/Google Pay wallet selected?

#

For the collapsed look, you pass defaultCollapsed: true in the layout object
https://docs.stripe.com/payments/payment-element#layout

noble falcon Jul 17, 2024, 9:35 PM

#

No no. I want the exact flow as the demo i showed you

#

Screenshot_2024-07-17_at_3.35.28_p.m..png

#

They choose apple pay before even show the stripe form, i want that

timber stratus Jul 17, 2024, 9:36 PM

#

One step at a time

noble falcon Jul 17, 2024, 9:37 PM

#

First of all i would like to make my own ui, maybe with some conditions show the form, but i would like to show the tabs of the payment methods on my own ui, thats a solution

timber stratus Jul 17, 2024, 9:37 PM

#

Sorry that sounds entirely different from what you were saying before

#

I can only help you with how to configure Stripe products (Payment Element, Express Checkout Element, etc.)

noble falcon Jul 17, 2024, 9:40 PM

#

noble falcon

Tell me if its possible to use this

#

Please

#

I dont want to show any stripe UI, i want that the user just selects apple pay and then they can pay...

timber stratus Jul 17, 2024, 9:41 PM

#

I dont want to show any stripe UI
You can do that if you want but I won't be able to help you with it

noble falcon Jul 17, 2024, 9:42 PM

#

Ok, dont tell me the design, just tell me how to do it please

timber stratus Jul 17, 2024, 9:42 PM

#

How do to what?

noble falcon Jul 17, 2024, 9:42 PM

#

change the design

#

completly

timber stratus Jul 17, 2024, 9:42 PM

#

You should read our docs

#

Between the layout property and the Appearance API, we offer a number of ways you can customize the payment element.
https://docs.stripe.com/payments/payment-element#layout
https://docs.stripe.com/elements/appearance-api

noble falcon Jul 17, 2024, 9:45 PM

#

fully customizable?

#

i dont want to choose only the theme and change some options stripe give me

timber stratus Jul 17, 2024, 9:47 PM

#

Those are the options we have available

noble falcon Jul 17, 2024, 9:47 PM

#

Dude.. Omg, just tell me i cannot customize beyond the stripe design

#

Thats all, and tell me i cant customize it like the picture i told you

#

And the conv is over

#

Why now u are telling me its not possible

timber stratus Jul 17, 2024, 9:48 PM

#

You can, mostly but you don't seem to be listening carefully

#

I told you, you can use an accordian layout with radio buttons that is collapsed by default

#

And then you can select which payment method is defaut selected by changing the paymentMethodOrder

#

But you keep jumping back to "change everything" which you cannot do.

noble falcon Jul 17, 2024, 9:50 PM

#

😖 ... I can or I cant replicate exactly this, yes or no, how i can do it i will search, but i want to know if its possible exactly this

Screenshot_2024-07-17_at_3.50.39_p.m..png

timber stratus Jul 17, 2024, 9:52 PM

#

I told you what options are available to you above.

noble falcon Jul 17, 2024, 9:53 PM

#

So I can't replicate it...

#

Amazing how you cant just say that

timber stratus Jul 17, 2024, 9:59 PM

#

Personally I think you can replicate all the parts that matter but clearly you feel differently

#j_paymentelement-appearance