steven-request-button | Stripe Developers | Page 1

formal iron Jan 21, 2022, 1:52 AM

#

steven-request-button

sinful inlet Jan 21, 2022, 1:56 AM

#

Hi Makoto, are you here to providing some help ?

formal iron Jan 21, 2022, 1:58 AM

#

Hi there, please let me take a look.

sinful inlet Jan 21, 2022, 1:59 AM

#

just invited one of my colleague here as well, he might join here soon as well

#

cool, thanks

#

let me know if you need any info

#

from the following page, when click "Buy now" button, it starts to call stripe api.
Then from console, you would see the logs
https://test-www-new-white-label.herokuapp.com/au/gift-cards

#

which indicates the issue

daring nebula Jan 21, 2022, 2:42 AM

#

heya @sinful inlet, i'll be stepping in for makoto. Give me a while to take a look. Are you able to share test login credentials for your test site which I can use?

sinful inlet Jan 21, 2022, 2:42 AM

#

Hi Alex

#

I will share one, give me a min

daring nebula Jan 21, 2022, 2:46 AM

#

alrighty, going to delete it from discord since i've saved it

sinful inlet Jan 21, 2022, 2:46 AM

#

that's ok, any login would be fine

#

once logged in, click "Gift Cards" at the top nav bar.

#

then in gift-cards page, click "Buy now" button, while keep console open.
You will see a log as below

daring nebula Jan 21, 2022, 2:51 AM

#

okay, got to the payment page, it'll take me a bit of time to look into this, i'll get back to you as soon as possible

sinful inlet Jan 21, 2022, 2:51 AM

#

sure, thanks.

daring nebula Jan 21, 2022, 3:02 AM

#

hmmm, can you share the relevant snippet of codes for the payment request button? i.e. mounting/loading it

winter zinc Jan 21, 2022, 3:06 AM

#

yeah

#


  const stripe = useStripe()
const pr = stripe.paymentRequest(paymentDetails)
          pr.canMakePayment().then(result => {
            if (result && (result.googlePay || result.applePay)) {
              setPaymentRequest(pr)
              if (wallet === APPLE_PAY_PAYMENT_TYPE && result && result.applePay) {
                updateCanPayWithGooglePay(false)
                updateCanPayWithApplePay(true)
                setPaymentType(APPLE_PAY_PAYMENT_TYPE)
              } else if (wallet === GOOGLE_PAY_PAYMENT_TYPE && result && result.googlePay) {
                updateCanPayWithGooglePay(true)
                updateCanPayWithApplePay(false)
                setPaymentType(GOOGLE_PAY_PAYMENT_TYPE)
              }
            } else {
              updateCanPayWithApplePay(false)
              updateCanPayWithGooglePay(false)
            }
          })

#

stripe is initialized with credentials that you can find in the network request

#

GET api/stripe/credentials

#

it has publishable_key and account_id in the response

daring nebula Jan 21, 2022, 3:07 AM

#

when do you mount/render it?

sinful inlet Jan 21, 2022, 3:10 AM

#

When click "Buy now" button, the "paymentRequest" function check will be triggered. Based on result, frontend component will be render ed.

winter zinc Jan 21, 2022, 3:11 AM

#

A component above StripePayment_RelativeContainer is where stripe is initialized. Here's a view from React component Chrome extension

sinful inlet Jan 21, 2022, 3:11 AM

#

in this case, the result returned from "paymentRequest" function, has been "result: {applePay: false, googlePay: true}".
But we would expect the applePay is "true" as well.

winter zinc Jan 21, 2022, 3:12 AM

#

Then, PaymentRequestButton is found here

daring nebula Jan 21, 2022, 3:14 AM

#

sorry, but the screenshot is really teeny tiny 😅

#

if you can paste the code here for us? or even share it on Github Gists

winter zinc Jan 21, 2022, 3:17 AM

#

dang, I don't know how to take screenshots on Windows with high res :/

#

ok

#

do you want the code of the entire tree all the way from when Stripe is initalized? Or just this button:

📎 message.txt

daring nebula Jan 21, 2022, 3:19 AM

#

👀

#

when loading the page on Safari, although the initial load shows the payment request options = null, when you click on the ApplePay dropdown, it logs {googlePayEnabled: false, applePayEnabled: true}.

The canMakePayment is an asynchronous request, so that may take a while to return a result.

Can you check if the updateCanPayWithApplePay(true) is being called when the result for canMakePayment is returned, and can you share what happens ?

#

You may want to look into your UI rendering logic : if applePayEnabled:true, the ApplePay button should render

sinful inlet Jan 21, 2022, 3:37 AM

#

let me check

#

thanks

daring nebula Jan 21, 2022, 3:40 AM

#

@winter zinc @sinful inlet by the way, we noticed

useEffect(() => {
    try {
      if (stripe) {
        // Check the availability of the Payment Request API.
       ...
  }, [stripe, amount])

your application is only watching for stripe and amount changes.Would it re-render when canMakePayment returns a result?

winter zinc Jan 21, 2022, 3:41 AM

#

don't shoot us. We didn't write the code 😨

#

🙂 ]

#

let me check

daring nebula Jan 21, 2022, 3:42 AM

#

totally understand, and we're here to help

sinful inlet Jan 21, 2022, 3:42 AM

#

thanks 🙂

#

yes, the "applePayEnabled:true" is coming from config (process.env) . The real result is dependent on the "canMakePayment" async data.

winter zinc Jan 21, 2022, 4:05 AM

#

your application is only watching for stripe and amount changes.Would it re-render when canMakePayment returns a result?
No, I think the idea is synonymous to "componentDidMount" here in a sense that we just want to cause the effect once when all pre-requisites are ready.

#

But there could be bugs, like amount changing from null to 0 I dunno... triggering multiple useEffect

#

If that happens - that's not the intention of the code AFAIK

#

From logs on Chrome (testing Google Pay) this flow seems to trigger only once per page load

StripeWalletWidget::
StripeWalletWidget.tsx:169 StripeWalletWidget:: {paymentRequest: null}
StripeWalletWidget.tsx:172 StripeWalletWidget::result:: {result: {…}}

daring nebula Jan 21, 2022, 4:18 AM

#

my next question would be when/where do you render the applepay button when canMakePayment returns a value?

winter zinc Jan 21, 2022, 4:23 AM

#

I think it is being rendered based on multiple conditions:

Redux business logic (a bunch of conditionals based on what our business needs)
stripe.canMakePayment() resolved value. If it resolves null it will not show the button.

Maybe Steven can correct me if I'm wrong somewhere

#

The log StripeWalletWidget.result:: { result: null } is what bothers us 🤔

sinful inlet Jan 21, 2022, 4:26 AM

#

based on the result of "canMakePayment", redux action dispatched, to show/not show buttons.

daring nebula Jan 21, 2022, 4:26 AM

#

then....was the redux action not dispatched to show those buttons upon result of canMakePayment?

winter zinc Jan 21, 2022, 4:27 AM

#

well, we are getting null from stripe.canMakePayment()

sinful inlet Jan 21, 2022, 4:27 AM

#

in chrome , result is
{applePay: false, googlePay: true}

in safari, result is null

daring nebula Jan 21, 2022, 4:27 AM

#

cause what happened for me too was that yes, upon page load the result was null. But when i clicked on the ApplePay dropdown, the application logged a result i.e. {googlePayEnabled: false, applePayEnabled: true}

sinful inlet Jan 21, 2022, 4:28 AM

#

ApplePay button was hardcoded to be enabled earlier, now reverted based on stripe.canMakePayment result

#

Sorry, I think you mean the "Buy now" button

daring nebula Jan 21, 2022, 4:30 AM

#

hmmmmmmmm

#

give me a bit to handle something else urgent first and ill be back

winter zinc Jan 21, 2022, 4:32 AM

#

👍

sinful inlet Jan 21, 2022, 4:33 AM

#

Sure, thanks.
The log of {applePayEnabled: true} is reading from our local configuration.

After that, we make stripe.canMakePayment request to validate it, and setup applePay button show/hide based on the result.

daring nebula Jan 21, 2022, 5:05 AM

#

@sinful inlet @winter zinc sorry but I'm going to need to step away. My colleague will be here shortly to follow up.

winter zinc Jan 21, 2022, 5:10 AM

#

👍

#

🙂

clear sequoia Jan 21, 2022, 5:26 AM

#

👋 catching up

winter zinc Jan 21, 2022, 5:51 AM

#

👋

clear sequoia Jan 21, 2022, 5:52 AM

#

Sorry, could you provide me credential to test it again?

winter zinc Jan 21, 2022, 5:54 AM

#

I think you can just register with your email

sinful inlet Jan 21, 2022, 5:55 AM

#

could you please try this

12jan2022-5@luxuryescapes.com
Asdf345#$%

or just register a new one

clear sequoia Jan 21, 2022, 5:56 AM

#

Hmm it's working for me!

winter zinc Jan 21, 2022, 5:57 AM

#

Is there a way to find out (debug , logs, anything) why it is not showing for us? (to specify, why we see stripe.canMakePayment() resolve with null)

#

something like errorReason: XYZ

sinful inlet Jan 21, 2022, 6:03 AM

#

are you trying on
https://test-www-new-white-label.herokuapp.com/au
also what browser & version you are using ?

clear sequoia Jan 21, 2022, 6:03 AM

#

Are you using test key? I tried to search pk_test but can't find anything

#

Yes I clicked on gift card: https://test-www-new-white-label.herokuapp.com/au/gift-cards, using Safari on Mac

sinful inlet Jan 21, 2022, 6:06 AM

#

I am using 14.1.2 , still having the issue .

#

no applePay options

clear sequoia Jan 21, 2022, 6:06 AM

#

Version 15.0 (16612.1.29.41.4, 16612)

#

Did you setup Wallet on your Mac?

sinful inlet Jan 21, 2022, 6:07 AM

#

Yes

#

In our current production site

clear sequoia Jan 21, 2022, 6:08 AM

#

absolutely working for me

winter zinc Jan 21, 2022, 6:08 AM

#

why is it using pk_live

#

🤔

sinful inlet Jan 21, 2022, 6:09 AM

#

@winter zinc strange, do we have other mac devices to have a test?

#

let me try on my iphone

#

I cannot see applePay icon available on my iphone as well

charred coral Jan 21, 2022, 6:23 AM

#

I don't have a Safari at the moment :/

#

Had to create a new account on discord

sinful inlet Jan 21, 2022, 6:34 AM

#

@clear sequoia just wondering if you have an isolated environment (outside of stripe company network), to try it out?

clear sequoia Jan 21, 2022, 6:34 AM

#

Sure, let me try on iPhone again

sinful inlet Jan 21, 2022, 6:34 AM

#

cool, thanks

clear sequoia Jan 21, 2022, 6:42 AM

#

works on my iPhone 🤔

#

Is everyone else getting error?

sinful inlet Jan 21, 2022, 6:48 AM

#

I am on mac 'bigSur' version, may be updated to the latest 'Montery', and see if it makes difference.

clear sequoia Jan 21, 2022, 6:49 AM

#

Can you put in a test pk? I can try to make a purchase

charred coral Jan 21, 2022, 6:49 AM

#

That sounds like a very big guess updating OS

clear sequoia Jan 21, 2022, 6:49 AM

#

and inspect its result

charred coral Jan 21, 2022, 6:50 AM

#

Does using Pk test allow us to see logs @clear sequoia ? Otherwise we are guessing too much :)

clear sequoia Jan 21, 2022, 6:51 AM

#

Yes you should be able to see log, if an actual PaymentIntent be made. In live mode I afraid of clicking on authorize bcz I will be charged for real 🙂

#

Just a suggestion, not sure if it's easy for you to swap the key

charred coral Jan 21, 2022, 6:59 AM

#

Ah it should be simple. I am not at my PC atm though... I will try it in a few hours unless Steven beats me to it

sinful inlet Jan 21, 2022, 7:05 AM

#

yes, its simple, but if you cannot see the issue from your end, it's hard to tell

#

let me know what key/account to be used, I can update it

charred coral Jan 21, 2022, 7:06 AM

#

You want the main LE test key

#

And that throwaway account's account id

#

That I created yesterday

sinful inlet Jan 21, 2022, 7:28 AM

#

updated & deploying, once done, I will have another try

#

no, still the same error from my end

#

@clear sequoia could you please try again, to see if you can see the applyPay button?

#

thanks

clear sequoia Jan 21, 2022, 7:49 AM

#

Sure, will try in a couple of mins

sinful inlet Jan 21, 2022, 7:49 AM

#

thanks

clear sequoia Jan 21, 2022, 8:37 AM

#

The Apple Pay button is displayed but I can't process. This looks like the Apple Pay setting in Test Mode (it's a different issue)

#

Have you tried Apple Pay in test mode before?

winter zinc Jan 21, 2022, 8:38 AM

#

Yeah, it never worked on this domain.

#

Not sure about other domains.

clear sequoia Jan 21, 2022, 8:40 AM

#

For me the ApplePay Button displayed fine, just clicking on it, the Apple Sheet displayed with "Processing" for a while then disappeared with this console warning.

#

So displaying was ok, just some settings is preventing a Payment to be made. I am not sure if only me can make displaying happens, sounds weird

winter zinc Jan 21, 2022, 8:41 AM

#

😕

#

Hm, well, it is past 7pm in Australia, we will try to revisit this next week if it is ok

clear sequoia Jan 21, 2022, 8:42 AM

#

Sure sure, feel free to come back and my colleague at that time can cover you

#

My advice is that try to make it work on Test Mode first

sinful inlet Jan 21, 2022, 8:42 AM

#

thanks Orakaro

winter zinc Jan 21, 2022, 8:43 AM

#

Thanks Orakaro!

#steven-request-button