tmbax-paymentrequest-issue | Stripe Developers | Page 1

severe pondBOT Oct 9, 2023, 2:13 PM

#

cobalt kindle Oct 9, 2023, 2:15 PM

#

Hello 👋
How can I help?

uncut dragon Oct 9, 2023, 2:15 PM

#

hi

#

Hi all
We have developed a website with ReactJS
In this project, we have used the following libraries for payment
@stripe/stripe-js@^2.1.7
@stripe/react-stripe-js@^2.3.1

The implementation is based on the link below

https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-apple-pay

Google payment works fine
Apple Pay only works in private browser mode 😕 👀

After checking, we have noticed that in Safari, the return values are null in the paymentRequest.canMakePayment() method.
Payment Request Button
Collect payment and address information from customers who use Apple Pay, Google Pay, or Link.
Payment Request Button

#

Apple pay does not work in normal browser mode
apple pay only work in private mode of safari

#

and you can see this images

cobalt kindle Oct 9, 2023, 2:17 PM

#

Is this page live? If so, can you share a link?

Apple Pay by default shows up in private mode. If it's not showing up in normal window then it means

1/ either the domain isn't correctly configured
Or
2/ You don't have the wallet configured correctly on your machine

uncut dragon Oct 9, 2023, 2:17 PM

#

#

page is live

cobalt kindle Oct 9, 2023, 2:19 PM

#

Can you share the link?

uncut dragon Oct 9, 2023, 2:19 PM

#

yourcompany.meemup.com

cobalt kindle Oct 9, 2023, 2:20 PM

#

Also if you visit this site in your safari window
https://stripe.com/docs/stripe-js/elements/payment-request-button

Are you seeing Apple Pay buttonm under the title?

uncut dragon Oct 9, 2023, 2:20 PM

#

we dont use button element

#

After checking, we have noticed that in Safari, the return values are null in the paymentRequest.canMakePayment() method.

cobalt kindle Oct 9, 2023, 2:21 PM

#

I'm asking you to visit the page above and see if you can see apple pay button on stripe docs page

#

What sort of element are you using for Apple Pay?

uncut dragon Oct 9, 2023, 2:23 PM

#

I use custom api not Apple pay button element

cobalt kindle Oct 9, 2023, 2:24 PM

#

What custom API?

uncut dragon Oct 9, 2023, 2:27 PM

#

this function: paymentRequest.canMakePayment() always return null

#

in safari browser

cobalt kindle Oct 9, 2023, 2:29 PM

#

I get that part. Can you clarify what flow/guide/element you're integrating in your app to accept apple pay?

Stripe PaymentElement, PaymentRequestButton, Express Checkout Element or Stripe hosted Checkout Page are the surfaces where we support Apple Pay.

Looking at the site you've built, I don't see any of those integration path being used

#

Are you following any guides?

uncut dragon Oct 9, 2023, 2:30 PM

#

I'd better give you the code

cobalt kindle Oct 9, 2023, 2:31 PM

#

You shared this in your initial message

The implementation is based on the link below

https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-apple-pay

and then you said

I use custom api not Apple pay button element

You can't accept Apple Pay without using a button

uncut dragon Oct 9, 2023, 2:31 PM

#

📎 message.txt

#

hanzo

#

are you here ?

cobalt kindle Oct 9, 2023, 2:36 PM

#

Please be patient, working with multiple folks

uncut dragon Oct 9, 2023, 2:36 PM

#

ok firend\

cobalt kindle Oct 9, 2023, 2:42 PM

#

okay, so you're clearly using PaymentRequestButton code (paymentRequest object)
https://stripe.com/docs/stripe-js/elements/payment-request-button

#

Can you clarify what you meant by

I use custom api not Apple pay button element

uncut dragon Oct 9, 2023, 2:57 PM

#

My problem is not related to PaymentRequestButtonElement

#

The problem is that the method below returns a null value

#

paymentRequest.canMakePayment()

cobalt kindle Oct 9, 2023, 2:59 PM

#

As i mentioned earlier, that method can return null for various reasons. In order for me to dive deeper, i need to understand what you're integrating.

You've provided mixed details so far with no clear direction on what stripe doc you're following for this

#

I can't help you if I don't understand what you're trying to integrate

uncut dragon Oct 9, 2023, 3:02 PM

#

paymentRequest.canMakePayment()
.then((result) => {
if (result) {
const {
applePay,
googlePay,
} = result;
if(applePay){
paymentRequest.show();
}
}
});

bro see this code. is it true ?

cobalt kindle Oct 9, 2023, 3:06 PM

#

Code is syntactically correct but not sure in what context you're trying to implement it so can't confirm if its accurate for your integration

uncut dragon Oct 9, 2023, 3:18 PM

#

Ok, let me explain the scenario
A person enters the website
Adds products to your cart
Click on the basket and enter a page
Enter information on this page
Then determine the type of payment
In the next step, by clicking on an order registration button, the payment operation begins
If the payment type is Apple Pay. Check the wallet status and then the Apple Pay payment window will open.
Finally, upon receiving the result of the operation (in case of successful payment), we register the order

The point here is that we have not used the PaymentRequestButtonElement component that is available in the library, and the paymentRequest.show() method can be called instead.

cobalt kindle Oct 9, 2023, 3:19 PM

#

Check the wallet status and then the Apple Pay payment window will open.
How exactly would the window open?

The point here is that we have not used the PaymentRequestButtonElement component that is available in the library, and the paymentRequest.show() method can be called instead.
you can't call show(...) directly.
You need to use some sort of a button

uncut dragon Oct 9, 2023, 3:20 PM

#

oh

#

but show method work with google pay

#

it work with google pay

#

ok

#

I have concluded from your words that I should use the following commeonnet

#

PaymentRequestButtonElement

cobalt kindle Oct 9, 2023, 3:22 PM

#

Yes, let me just double check something

uncut dragon Oct 9, 2023, 3:27 PM

#

But pay attention
Even if we use this component, the method below will still return null value

#

paymentRequest.canMakePayment()

cobalt kindle Oct 9, 2023, 3:27 PM

#

Yeah the .show(...) function would need to be called for an event handler (like click or submit)

You can't just call .show() right after canMakePayment() is called.

But pay attention
Even if we use this component, the method below will still return null value
paymentRequest.canMakePayment()
That's what I am double checking right now

#

give me a sec

uncut dragon Oct 9, 2023, 3:28 PM

#

ok bro

cobalt kindle Oct 9, 2023, 3:28 PM

#

okay so here's what I see on your site

Screenshot_2023-10-09_at_10.28.38_AM.png

#

when going through a test checkout

#

the error message is for what I mentioned above where you need to use a gesture handler to call show(..)

meaning canMakePayment(...) returns true on my machine

#

Hence, apple pay isn't configured correctly on your machine.

#

If I go to https://stripe.com/docs/stripe-js/elements/payment-request-button
on safari, I see apple pay button under title

Screenshot_2023-10-09_at_10.30.07_AM.png

#

Do you see the same on your end?

uncut dragon Oct 9, 2023, 3:34 PM

#

We need to see the status of the button on this page to ensure that Apple Pay is configured correctly?

#

ok w8

cobalt kindle Oct 9, 2023, 3:34 PM

#

Yes, that's why I asked you to check this in my intial messages. It helps confirm if you have the Apple Pay wallet configured correctly

uncut dragon Oct 9, 2023, 3:40 PM

#

I checked this page and I could see the Apple Pay button, which means that the device settings are done correctly

cobalt kindle Oct 9, 2023, 3:41 PM

#

Are you seeing apple pay button under the title? Like the very first button
Are you able to click on it? Can you share a screenshot?

uncut dragon Oct 9, 2023, 3:41 PM

#

yes

#

i sent top you images

cobalt kindle Oct 9, 2023, 3:42 PM

#

also can you load this page in safari and share a screenshot?
https://4242.io/payment-request-button/

uncut dragon Oct 9, 2023, 3:42 PM

#

w8

#

WhatsApp_Image_2023-10-09_at_7.09.10_PM.jpeg

WhatsApp_Image_2023-10-09_at_7.08.30_PM.jpeg

severe pondBOT Oct 9, 2023, 3:45 PM

#

uncut dragon Oct 9, 2023, 3:54 PM

#

WhatsApp_Image_2023-10-09_at_7.24.18_PM.jpeg

hushed olive Oct 9, 2023, 3:55 PM

#

Hi 👋

I'm stepping in as @cobalt kindle needs to go. I see that your Safari browser is correctly configured for Apple Pay so we can rule that out

uncut dragon Oct 9, 2023, 3:56 PM

#

hi friend

#

ok

#

go next step

hushed olive Oct 9, 2023, 4:00 PM

#

So what exactly are you trying to do? There's a lot of context in this thread and I won't be able to read it all

uncut dragon Oct 9, 2023, 4:01 PM

#

ok i say

#

On our website, payment through Google Pay works properly, but Apple Pay only works in the private mode of the browser.
After checking, we found that the following method returns null value

#

canMakePayment

#

As a result, it is not possible to show the Apple Pay button to the user

hushed olive Oct 9, 2023, 4:03 PM

#

What Stripe products are you using? Payment Request Button? Express Checkout Element?

uncut dragon Oct 9, 2023, 4:04 PM

#

I dont know but it is my code

#

paymentRequest.canMakePayment()
.then((result) => {
if (result) {
const {
applePay,
googlePay,
} = result;
if(applePay){
paymentRequest.show();
}
}
});

hushed olive Oct 9, 2023, 4:05 PM

#

That doesn't tell me a lot

uncut dragon Oct 9, 2023, 4:05 PM

#

you need a payment intent ?

hushed olive Oct 9, 2023, 4:05 PM

#

How are you creating the payment request?

uncut dragon Oct 9, 2023, 4:05 PM

#

server side

#

are you need content of a payment intent ?

hushed olive Oct 9, 2023, 4:05 PM

#

Sure but just the ID will work

uncut dragon Oct 9, 2023, 4:06 PM

#

w8

hushed olive Oct 9, 2023, 4:06 PM

#

Also the paymentRequest object is created client-side here: https://stripe.com/docs/js/payment_request/create

uncut dragon Oct 9, 2023, 4:09 PM

#

payment intent

#

{
"clientSecret": "pi_3NzLzwH12VUlMrqL0SOb9kLx_secret_AHlVn43MatgRfBgKHAj9SIWvg",
"paymentRequest": {
"country": "CA",
"currency": "cad",
"total": {
"label": "Order Total Amount",
"amount": 1487
},
"requestPayerName": true,
"requestPayerEmail": true
}
}

hushed olive Oct 9, 2023, 4:15 PM

#

Okay but how are you creating the paymentRequest on the client-side? https://stripe.com/docs/js/payment_request/create

uncut dragon Oct 9, 2023, 4:17 PM

#

yes it crated client side

#

w8

hushed olive Oct 9, 2023, 4:17 PM

#

Are you following any of this doc? https://stripe.com/docs/stripe-js/elements/payment-request-button?client=html#html-js-create-payment-request-instance

uncut dragon Oct 9, 2023, 4:18 PM

#

let pr = {...data.paymentRequest};
pr.currency = pr.currency.toLowerCase();

                                const paymentRequest =
                                    stripe.paymentRequest(pr);

hushed olive Oct 9, 2023, 4:18 PM

#

Okay, what is in the data.paymentRequest?

uncut dragon Oct 9, 2023, 4:19 PM

#

{
"country": "CA",
"currency": "cad",
"total": {
"label": "Order Total Amount",
"amount": 1487
},
"requestPayerName": true,
"requestPayerEmail": true
}

hushed olive Oct 9, 2023, 4:25 PM

#

Okay, all of that looks correct. But when you call canMakePayment you get back a null?

uncut dragon Oct 9, 2023, 4:25 PM

#

yes

hushed olive Oct 9, 2023, 4:25 PM

#

And what is the domain you are using?

uncut dragon Oct 9, 2023, 4:25 PM

#

https://yourcompany.meemup.com/

hushed olive Oct 9, 2023, 4:27 PM

#

Okay I can see that domain registered to your account

uncut dragon Oct 9, 2023, 4:27 PM

#

yes

#

check website with safari

hushed olive Oct 9, 2023, 4:43 PM

#

I'm having trouble adding toppings to a pizza. Do you have a more simplified place I can test without going through all this set up?

severe pondBOT Oct 9, 2023, 5:09 PM

#

uncut dragon Oct 9, 2023, 5:17 PM

#

yes

prime swift Oct 9, 2023, 5:19 PM

#

@uncut dragon I'm taking over and it's a really long thread with a ton of back and forth. Let me know once you have a clear simple repro that doesn't require any manual steps or login and a clear summary of the issue

#

tmbax-paymentrequest-issue

uncut dragon Oct 9, 2023, 5:21 PM

#

So far, 2-3 people have changed and I'm really tired of explaining

#tmbax-paymentrequest-issue