perry-cardelement-applepay | Stripe Developers | Page 1

pure capeBOT Aug 11, 2023, 3:09 PM

#

twilit rock Aug 11, 2023, 3:12 PM

#

Yeah you should be able to setup apple pay payment for future usage like that

#

Can you paste that request id in here so I can look?

#

Starts with req_

haughty monolith Aug 11, 2023, 3:16 PM

#

Great, yes reqid: req_hs3W5HceLyimuP

twilit rock Aug 11, 2023, 3:17 PM

#

Oh that request was a 200, so successful

#

Where are you getting the error from your screenshot?

haughty monolith Aug 11, 2023, 3:19 PM

#

this error i am getting when injecting <ExpressCheckoutElement> within child element wrapped with <Elements>

#

also i wanted to as, is there any other way i can show Apple pay button without checkout session?

twilit rock Aug 11, 2023, 3:21 PM

#

So just to clarify, you tried to get apple pay to show up in the above checkout session but it didn't. So, you attempted to use the Express Checkout Element instead? Do I have that correct?

haughty monolith Aug 11, 2023, 3:21 PM

#

Exactly

#

with Express Checkout Element once trying to mount as well not showing up the apple pay, i have provided
const option = {
wallets: {
applePay: 'always'
}
} as an option as of now

twilit rock Aug 11, 2023, 3:24 PM

#

Can you provide the request id from that screenshot at the top?

#

And paste it here

#

it's in the request_log_url

haughty monolith Aug 11, 2023, 3:27 PM

#

request_log_url
:
"https://dashboard.stripe.com/test/logs/req_oG0S9W9wk3bX7A?t=1691767547"

#

here

twilit rock Aug 11, 2023, 3:28 PM

#

Ok thanks. Interesting

#

Also, can you go to this page in Safari? https://stripe.com/docs/stripe-js/elements/payment-request-button

#

Let me know if you see the interactive apple pay button at the top

haughty monolith Aug 11, 2023, 3:29 PM

#

okay give me a sec

#

no i just see "pay with link" button

twilit rock Aug 11, 2023, 3:31 PM

#

Ok interesting. So that indicates it's not a problem with your integration but rather a problem with your apple pay wallet setup. The apple pay button would show there if your wallet is set up properly. You need to make sure there's a card added to your apple pay wallet and in Safari settings -> Privacy that you have allowed websites to check for apple pay

haughty monolith Aug 11, 2023, 3:33 PM

#

okay, let me check and get back to you

twilit rock Aug 11, 2023, 3:33 PM

#

The error you're getting here: #1139575996635418704 message is a separate issue though, but one thing at a time

#

Let's try to get apple pay working for you first

haughty monolith Aug 11, 2023, 3:34 PM

#

yes, i understand

pure capeBOT Aug 11, 2023, 3:46 PM

#

haughty monolith Aug 11, 2023, 3:47 PM

#

Great, i have updated the privacy settings and added apple pay card as well, i am able to see button on page https://stripe.com/docs/stripe-js/elements/payment-request-button

twilit rock Aug 11, 2023, 3:48 PM

#

Awesome! So now you should be also seeing Apple Pay in your Stripe Checkout Sessions. Can you test that?

haughty monolith Aug 11, 2023, 3:48 PM

#

but code wise still facing issues with error

#

let me see

twilit rock Aug 11, 2023, 3:49 PM

#

Yeah we can work on resolving that now. Mostly just curious if you're seeing it in Checkout now (you should be)

haughty monolith Aug 11, 2023, 3:49 PM

#

yes i can now see the apple pay button on checkout session page as well

#

my main concern is, i don't want the checkout session as i have already configured the Card elements on my web page

#

and i am trying to add apple pay button on top so that "save the card details now and charge later" fucntionality could happen

twilit rock Aug 11, 2023, 3:51 PM

#

Yeah got it. Ok let's work on resolving the error you're getting with the express checkout element now

vital gyro Aug 11, 2023, 3:51 PM

#

perry-cardelement-applepay

haughty monolith Aug 11, 2023, 3:51 PM

#

yep

twilit rock Aug 11, 2023, 3:52 PM

#

Can you share your code for that? Also do you happen to have a test page published we can look at?

haughty monolith Aug 11, 2023, 3:53 PM

#

I am so sorry, as of now nothing is published and i will not be able to deploy my code unless development is done and review is done, but i can share code snippets

vital gyro Aug 11, 2023, 3:53 PM

#

Yeah please share the code relevant to initializing Stripe.js and loading the element

haughty monolith Aug 11, 2023, 4:00 PM

#

so i have

EncryptedCardFields.tsx (this parent has stripe = require('stripe')('sk_test_....') invokes customer.create and setupIntents.create to gain client_secret_key )
- StripeElements.tsx (child to EncryptedCardFields - has <Elements options={<please see screenshots attached>})
  - PaymentForm.tsx (child to StripeElements has all the card elements, (number, expiry, cvc and now expressCheckoutElement) )

#

EncryptedCardFields

#

EncryptedCardFields

vital gyro Aug 11, 2023, 4:02 PM

#

Just to be clear: right now let's solely focus on client-side code

#

So it seems you are using PaymentElement here right? Not ExpressCheckoutElement? Which exact doc page are you following?

haughty monolith Aug 11, 2023, 4:04 PM

#

vital gyro So it seems you are using PaymentElement here right? Not ExpressCheckoutElement?...

Not paymentElements but CardNumberElement, CardExpiryElement and CardCvcElement

vital gyro Aug 11, 2023, 4:04 PM

#

Okay just another small thing: please solely share code as text, you can use three backticks to wrap/format it. No pictures of code

haughty monolith Aug 11, 2023, 4:04 PM

#

ohh okay

vital gyro Aug 11, 2023, 4:05 PM

#

the CardElement UI element like CardNumberElement does not support ApplePay at all, how are you trying to show ApplePay?

haughty monolith Aug 11, 2023, 4:05 PM

#

      expressCheckoutElement.mount('#express-checkout-element')```

#

CardElement UI are just for normal card payment

vital gyro Aug 11, 2023, 4:06 PM

#

Okay so you are using ExpressCheckoutElement like I was saying right?

haughty monolith Aug 11, 2023, 4:06 PM

#

this is how i am mounting expressCheckoutElement for Apple pay

vital gyro Aug 11, 2023, 4:06 PM

#

Okay, so did you register the domain on which you are loading that element? Are you using HTTPS?

haughty monolith Aug 11, 2023, 4:07 PM

#

i am right now working on localhost, http as we know

vital gyro Aug 11, 2023, 4:07 PM

#

Gotcha so you missed a few steps. HTTPS is required

#

ApplePay also requires domain registration

haughty monolith Aug 11, 2023, 4:07 PM

#

Okay, and where to do that?

vital gyro Aug 11, 2023, 4:07 PM

#

https://stripe.com/docs/elements/express-checkout-element/accept-a-payment#prerequisites

#

it's all in the canonical docs

#

And because you need https + domain registration we usually recommend using https://ngrok.com/

haughty monolith Aug 11, 2023, 4:09 PM

#

okay great, let me check this out and test

#

just one thing, so after https is set, Google pay and apple pay both should be available depending on platform right?

vital gyro Aug 11, 2023, 4:10 PM

#

yep

#

well no sorry

#

you need the domain registration for ApplePay

#

Make sure to carefully read that doc, it explains everything 🙂

haughty monolith Aug 11, 2023, 4:11 PM

#

Okay thank you 🙂 i really hope this resolves my issues

vital gyro Aug 11, 2023, 4:11 PM

#

yeah it's really finicky to get started 😦

#

once you make it work once though it's really easy

haughty monolith Aug 11, 2023, 4:12 PM

#

yeah, and i am struggling a bit

#

yeah right

#

Thank you for your help 🙂 i will be back if anything comes up

vital gyro Aug 11, 2023, 4:20 PM

#

sounds good! I'll keep this thread open for a bit if you have a follow up question

haughty monolith Aug 11, 2023, 4:45 PM

#

Thanks for doing so, i have followed all the steps with domain entry and HTTPS and also ngrok as well

#

but still have the checkout session error Invalid payment_method_types provided: ["card"]

vital gyro Aug 11, 2023, 4:47 PM

#

That happens just on page load?

haughty monolith Aug 11, 2023, 4:48 PM

#

on every page load, right

vital gyro Aug 11, 2023, 4:51 PM

#

Now that you use ngrok, can you DM a URL? I can load it and check

haughty monolith Aug 11, 2023, 4:52 PM

#

hey i just changed the mode from "payment " to "setup"

#

and i can see the button

vital gyro Aug 11, 2023, 4:52 PM

#

hum

#

the payment is unrelated I must be misunderstanding wht you are doing

haughty monolith Aug 11, 2023, 4:53 PM

#

not sure, why for payment it's not visible

vital gyro Aug 11, 2023, 4:53 PM

#

yeah my code works fine with it at least

haughty monolith Aug 11, 2023, 4:53 PM

#

that is very strange though

vital gyro Aug 11, 2023, 4:53 PM

#


const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
};

const elements = stripe.elements(options);

// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');```

#

this is what my code looks like

#

Let me check your URL and see what it could be

haughty monolith Aug 11, 2023, 4:54 PM

#

tell me one thing, with payment intents the direct payments will be taken right? but with setup intents via apple pay, it will only save card details right?

vital gyro Aug 11, 2023, 4:54 PM

#

oh is there any way you can do an extremely simple page that just that element and nothing else

#

this looks like your entire website

haughty monolith Aug 11, 2023, 4:55 PM

#

vital gyro ```const stripe = Stripe('pk_test_123'); const options = { mode: 'payment', ...

yes same mine, but with changes mode to setup"

haughty monolith Aug 11, 2023, 4:55 PM

#

vital gyro oh is there any way you can do an extremely simple page that just that element a...

okay wait

vital gyro Aug 11, 2023, 4:57 PM

#

yeah I'm trying to go through but that's a lot of fake data to put in

#

this is what I see on your website

haughty monolith Aug 11, 2023, 4:57 PM

#

yes that's right, please ignore below button

#

i will remove extra data, wait

vital gyro Aug 11, 2023, 4:59 PM

#

all good I didn't realize I could see the button without doing all the form!

#

many devs ask us for help but you have to go through 7 steps of sign ups. But as long as I can see the button it's fine and at least it does work for me

#

IntegrationError: Can only create one Element of type expressCheckout.``` I see this too in Chrome and Safari

haughty monolith Aug 11, 2023, 5:00 PM

#

vital gyro all good I didn't realize I could see the button without doing all the form!

apologies for that

vital gyro Aug 11, 2023, 5:00 PM

#

So overall I do see the button, or I did earlier at least

#

I still think it'd be valuable for you to do a small basic app that just shows the button and nothing else (not even CardElement for now) so that we can debug faster

haughty monolith Aug 11, 2023, 5:01 PM

#

bcz i have called the elements.create('expressCheckout' in useeffect mostly that's why it's getting called everytime

#

when you click on button why does the popup windows shows up and then disappears that fast?

#

ya let me remove other components

vital gyro Aug 11, 2023, 5:05 PM

#

ah I though you only asked about the button appearing

haughty monolith Aug 11, 2023, 5:10 PM

#

okay data removed, now can you reload?

vital gyro Aug 11, 2023, 5:10 PM

#

  "error": {
    "message": "Could not create Apple Pay session. Please make sure you have registered this Stripe account. For more information, see https://stripe.com/docs/apple-pay#web.",
    "request_log_url": "https://dashboard.stripe.com/test/logs/req_R1P9A7DphJFKpB?t=1691773831",
    "type": "invalid_request_error"
  }
}```

#

that's what I see now

#

Did you properly register this domain?

haughty monolith Aug 11, 2023, 5:10 PM

#

vital gyro ah I though you only asked about the button appearing

Yes button appearing but now on click popup should stay right?

#

ohh, no this is not registered into domain list

vital gyro Aug 11, 2023, 5:14 PM

#

How did you register? Did you use the API?

#

Like the domain has to be registered in Live mode

haughty monolith Aug 11, 2023, 5:14 PM

#

yes i used API and stripeSK.applePayDomains.create({ domain_name: 'ceea-2a02-c7c-a276-900-45a5-ac2d-9672-d462.ngrok-free.app' });

vital gyro Aug 11, 2023, 5:15 PM

#

yeah that's your problem

haughty monolith Aug 11, 2023, 5:15 PM

#

i am not getting, register in live mode means via dashboard?

#

https://dashboard.stripe.com/settings/payments/apple_pay here right?

vital gyro Aug 11, 2023, 5:15 PM

#

I did mention this was super finicky and you had to read the docs carefully :p
We say

You must register all domains, including testing domains, with your live secret key.

haughty monolith Aug 11, 2023, 5:16 PM

#

oh boy, yes i did read it, but on live secret key it bit tricky as they are very specific to client use

vital gyro Aug 11, 2023, 5:17 PM

#

yeah but you can test all of this on your own Stripe account

haughty monolith Aug 11, 2023, 5:17 PM

#

even if i register on live secrete key, testing on local/ngrok can be done on Test key right? it should not required any live secrret key

vital gyro Aug 11, 2023, 5:17 PM

#

yes

haughty monolith Aug 11, 2023, 5:17 PM

#

okay good to know

vital gyro Aug 11, 2023, 5:17 PM

#

the domain just has to be registered in Live mode for historical reasons I won't get into

haughty monolith Aug 11, 2023, 5:17 PM

#

hmm

vital gyro Aug 11, 2023, 5:17 PM

#

it's kind of the bane of our lives on my team since it takes so much energy to explain things to developers

#

it's so subtle, and of course most of you don't have a Live API key and don't want to have/use one :p

#

We are working on improvements around this so hopefully in a few months this is a thing of the past and it "just works". But I'll rejoice when I see it 🙂

pure capeBOT Aug 11, 2023, 5:20 PM

#

haughty monolith Aug 11, 2023, 5:20 PM

#

No worries, thank you so much for your patience 🙂 i will think i can take care from here 🙂

#

Really means a lot to me, you stayed long for helping out with this issue, let me check if i can get final error resolved 🙂

vital gyro Aug 11, 2023, 5:22 PM

#

Of course, that's what we're here for. It's tough for developers to figure out the problem, this is so subtle and the steps are hidden in like huge docs

#

and like most devs, everyone jumps to code examples to get cranking and misses that crucial step for Apple Pay

haughty monolith Aug 11, 2023, 5:25 PM

#

That's true, even i missed that step
may be put it in yellow highlight for eyecatching design 😂

#

and usually as this is my first time with payment platforms specially Stripe, not sure how far we always have to register domains in other platforms too, so it is humand tendancy to skip such steps 😅

vital gyro Aug 11, 2023, 5:29 PM

#

totally, and it also "just works" for Google Pay so if you start there it's even more confusing (but at least you know the button works fine lol)

#

But we are really looking to fix this so maybe end of year it's a thing of the past (after 8 years 😅 )

haughty monolith Aug 11, 2023, 5:31 PM

#

Haha, 😄

#

no worries, but good to be part of "documentation reading" right now, as i could tell my grandchildren once upon a time what lengthy document reading i went through! 😂

#

Anyways, seems not so good luck for me today
https://ceea-2a02-c7c-a276-900-45a5-ac2d-9672-d462.ngrok-free.app/.well-known/apple-developer-merchantid-domain-association this link is not working, so no hosting for apply pay and hence unable to register this domain

tulip pier Aug 11, 2023, 6:20 PM

#

👋 hopipng in here - sorry I missed that follow up

#perry-cardelement-applepay