jamie_97274 | Stripe Developers | Page 1

swift muskBOT Oct 5, 2023, 2:08 PM

#

round stream Oct 5, 2023, 2:08 PM

#

Hello

royal surge Oct 5, 2023, 2:08 PM

#

Hi Bismarck, think you helped me in the past

round stream Oct 5, 2023, 2:09 PM

#

Hopefully I was helpful 😅

royal surge Oct 5, 2023, 2:09 PM

#

got all issues sorted out with iDeal and Card subscriptions, just not sure about Apple pay/Google wallet now because they seem to work quite different.

For iDeal I am making setup intents and turning those into payment intent, for card going straight to a payment intent.

round stream Oct 5, 2023, 2:09 PM

#

Before we dive into your question, is there a reason you are implementing these separately instead of using Payment Element?

royal surge Oct 5, 2023, 2:10 PM

#

we have a custom design with our own payment method select box, and also we don't have a customer yet on this form so I needed some work arounds basically

round stream Oct 5, 2023, 2:10 PM

#

Okay fair enough

#

So with Apple / Google Pay I'd recommend using the Express Checkout Element: https://stripe.com/docs/elements/express-checkout-element

royal surge Oct 5, 2023, 2:11 PM

#

I can not use express checkout

round stream Oct 5, 2023, 2:11 PM

#

This is actually our newer Element that is replacing Payment Request Button

#

No?

#

Tell me more

royal surge Oct 5, 2023, 2:11 PM

#

oh wait sorry I thought that was your Checkout page

#

as in it goes a stripe page

#

express checkout is nothing like https://stripe.com/docs/payments/checkout
?

Stripe Checkout

Use a low-code integration to build a customized payment page, hosted on Stripe.

round stream Oct 5, 2023, 2:14 PM

#

Nope

#

Express Checkout is an Element that will specifically show Google Pay/Apple Pay/Link/Paypal (if supported for your account) or any subset of those.

#

And it does embed right in your site (no redirect)

royal surge Oct 5, 2023, 2:15 PM

#

I see it mounts just like an iDeal select box would

#

however as we have our own custom payment method box, they can for example select Google Wallet or Apple Pay, is there a way to mount only Google Wallet

#

for example

const applePayElement = elements.create('applePay', options)

const googleWalletElement = elements.create('googleWallet', options)

#

separated, so it's not just a one-all situation for both

round stream Oct 5, 2023, 2:17 PM

#

Hmm would you not just want to mount the relevant button based on what they select?

#

Like yes, you can just show one of the buttons

royal surge Oct 5, 2023, 2:17 PM

#

yes that's exactly what I want, I want to mount googlePay if they select google pay in our own select box

round stream Oct 5, 2023, 2:18 PM

#

Gotcha then yep you use wallets: https://stripe.com/docs/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-wallets

royal surge Oct 5, 2023, 2:18 PM

#

I just don't see how I can differentiate in the docs you sent

#

I see thanks!!

#

one more question

#

are you sure this works for subscriptions too?

#

(I spent a lot of time on the wrong iDeal setup for subscriptions last time)

#

in the end I had to create a setupintent, get their sepa_debit card from that and create a payment intent from there

swift muskBOT Oct 5, 2023, 2:19 PM

#

round stream Oct 5, 2023, 2:20 PM

#

Yep it works fine for Subscriptions since this just generates a Card PaymentMethod

#

In the part of the guide that discusses "Create a PaymentIntent" (https://stripe.com/docs/elements/express-checkout-element/accept-a-payment#create-pi) you would just create a Subscription instead

#

And then pass the latest_invoice.client_secret back to the frontend

royal surge Oct 5, 2023, 2:22 PM

#

great yeah I am doing that with card subscriptions

#

thank you for now putting me on the right track - I will be doing some testing

round stream Oct 5, 2023, 2:23 PM

#

Sounds good

#

Let us know if we can help any further

royal surge Oct 5, 2023, 2:28 PM

#

You must use HTTPS to test this locally? No Google pay element is mounted or appears

#

unlike iDeal you can use http?

round stream Oct 5, 2023, 2:29 PM

#

Yep

#

These wallets require HTTPS

#

And you need a live card in your wallet as well

#

And domain registration for Apple Pay

royal surge Oct 5, 2023, 2:30 PM

#

"And you need a live card in your wallet as well"

Not for the actual element to show up I imagine as no wallet has been selected yet?

round stream Oct 5, 2023, 2:32 PM

#

Once you mount it

#

The button will only show if there is a live card in the customer's wallet

#

You can also use the ready Event (https://stripe.com/docs/elements/express-checkout-element/accept-a-payment#ready-event) to get info on this

#

And then potentially show an error message or something if they don't have a card in their wallet

royal surge Oct 5, 2023, 2:34 PM

#

I am a bit confused by what you mean about the live card, because for example on a macbook, you don't know yet if I have a wallet in my apple pay or not, it should redirect or active the Apple pay to see that surely

#

you only get that info post button click?

round stream Oct 5, 2023, 2:37 PM

#

The way our Elements work with these wallets is that the actual wallet button would only show up if there is a live card stored in the customer's relevant wallet.

So for instance if you are going to use your own button for your customer to indicate that they want to pay with Google Pay, but then they don't have a card in their Google Pay wallet, when they click the button and you create/mount Express Checkout Element, nothing is going to render because there is no live card stored.

#

Let me know if that doesn't clarify things.

#

The most typical flow is you would just create/mount the Express Checkout Element in your payment flow without the customer indicating they want to pay with this method. It would just be an option that would show up if they have a card stored

royal surge Oct 5, 2023, 2:38 PM

#

No worries, I got the Google Wallet button showing up now, and on click it asks me to login, so it doesn't know yet if I have a wallet or not

#

this is the functionality I was looking for, so it's all working out

#

one last question for today I promise

#

Apple pay, works the same as Google wallet practically? As it is a bit harder to test locally, can I somewhat assume that if Google pay is working as expected in terms of creating the payment intent etc and saving the card, Apple pay will also?

round stream Oct 5, 2023, 2:41 PM

#

Yes, but you do have to make sure your domain is registered for Apple Pay

#

Otherwise the flow is the same

#

I'd definitely still recommend testing before you go live

royal surge Oct 5, 2023, 2:41 PM

#

yeah for sure just for me locally for now

#

thank you, have a good evening I will leave you for now

round stream Oct 5, 2023, 2:42 PM

#

You too

#

(Sorry you are totally right and only Payment Request Button doesn't show the wallet unless you have a live card -- this was changed for Express Checkout Element and I forgot 🙂 )

royal surge Oct 5, 2023, 2:54 PM

#

Sorry Bismarck but I do have another query

#

if you can still read this thread?

#

It says

"IntegrationError: Can only create one Element of type expressCheckout."

#

I now have

this.elementGoogleWallet = this.elements.create('expressCheckout', optionsGoogleWalletElement)

                this.elementApplePay = this.elements.create('expressCheckout', optionsApplePayElement)

so two elements created one for Google Wallet and one for Apple Pay

#

both with different options

round stream Oct 5, 2023, 2:55 PM

#

You would have to create multiple instances of Stripe.JS if you want to create two different Elements

#

But why do you want to do this exactly?

#

You can show both in one instance here

royal surge Oct 5, 2023, 2:56 PM

#

I do want one elements, I just want to mount only Google Wallet or only Apple Pay depending on our custom select box

#

so I never want to show both, I always only want to show one

Select box:
iDeal
Card
Google
Apple

on that select box I mount iDeal, or Card, or Google etc

round stream Oct 5, 2023, 2:56 PM

#

Yeah so you just need to do this.elementWallet = this.elements.create('expressCheckout', optionsWallet)

And you specify which wallet via your optionsWallet variable

royal surge Oct 5, 2023, 2:57 PM

#

yes I get that part, but then the expressCheckout has already been created

#

I need to switch dynamically between the both, so in my case I already created the card and iDeal element. but I simply mount the relevant one based on the select box

#

like so:

if (method === 'ideal') this.elementIdeal.mount('#payment-element-ideal');
if (method === 'card') this.elementCard.mount('#payment-element-card');
if (method === 'google') this.elementGoogleWallet.mount('#payment-element-google');
if (method === 'apple') this.elementApplePay.mount('#payment-element-apple');

round stream Oct 5, 2023, 2:58 PM

#

You mean if they initially select Google Pay but then want to use Apple Pay?

royal surge Oct 5, 2023, 2:58 PM

#

exactly yes

round stream Oct 5, 2023, 2:58 PM

#

Gotcha

#

Then I believe what you want to do is destroy that Express Checkout Element using https://stripe.com/docs/js/element/other_methods/destroy and then recreate it.

#

The other option would be to intialize Stripe.JS twice here and then use the different instances to create different Express Checkout Element instances

#

And mount/unmount the one that you are using / not using

royal surge Oct 5, 2023, 3:10 PM

#

Thank you, destroying took too long in time in terms of UX

#

I am making multiples stripe js elements now, seems to work!

#jamie_97274