Akshay-paymentrequestbutton | Stripe Developers | Page 1

open saffron Oct 28, 2021, 6:13 PM

#

Do you see any errors on the console when this happens?

gaunt bloom Oct 28, 2021, 6:23 PM

#

Unfortunately since I'm testing on my iPhone, I can't see any console

#

could I send you an ngrok link with just the button?

#

https://70b3-2601-640-8981-6b90-7c65-50a3-184b-bb11.ngrok.io/b/test/payment/KzTeM2

#

I do see this warning - "Unsupported prop change: options.paymentRequest is not a mutable property."

open saffron Oct 28, 2021, 6:34 PM

#

When you see the Apple pay button - are you in incognito mode in Safari?

gaunt bloom Oct 28, 2021, 6:36 PM

#

yes

#

i can see it in non-incognito as well though

open saffron Oct 28, 2021, 6:46 PM

#

Just to triple check - when you go to https://70b3-2601-640-8981-6b90-7c65-50a3-184b-bb11.ngrok.io/b/test/payment/KzTeM2 in a non-incognito safari window, you see the apple pay button show up, right?

gaunt bloom Oct 28, 2021, 6:47 PM

#

I see it on iOS safari, both incognito AND non-incognito. my coworkers were able to see it ONLY on incognito on MacOS safari

#

also apologies but I need to step out for lunch, could you keep this thread open in the meantime? I should be back in about 15-20 minutes

#

And I'll leave the ngrok link open if it helps you debug it

open saffron Oct 28, 2021, 6:47 PM

#

yup! we'll leave the thead open 👍

#

We're not entirely sure why it's showing up in non-incognito mode for you, but from what we can see on our end, there's an issue with how you've registered your apple pay domain.

#

You need to make sure your connect account is connected to the platform in live mode, and then register the domain using the Stripe-Account header and your live platform API keys (see https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-using-with-connect)

Payment Request Button

Collect payment and address information from customers who use Apple Pay, Google Pay, and browser-saved cards with Payment Request APIs such as Microsoft Pay on Edge.

gaunt bloom Oct 28, 2021, 7:41 PM

#

I've run this command:

curl https://api.stripe.com/v1/apple_pay/domains \
  -u sk_live_XXXX: \
  -H "Stripe-Account: acct_1Jkdmy2fiirVS0O5" \
  -d domain_name="70b3-2601-640-8981-6b90-7c65-50a3-184b-bb11.ngrok.io"

#

and it shows up in my dashboard, screenshot attached

#

wait actually I used my test secret keys, not the live ones. When I try to use my live secret key I get the following error:

"error": {
    "message": "The account acct_1Jkdmy2fiirVS0O5 was a test account created wit
h a testmode key, and therefore can only be used with testmode keys.",
    "type": "invalid_request_error"
  }

#

Should I be using a live Stripe Connect account? Even for testing purposes?

twin violet Oct 28, 2021, 7:50 PM

#

hello again!

#

catching up here, have state already

#

Should I be using a live Stripe Connect account? Even for testing purposes?
yes a limitation due to Apple Domain addition needing to be done in live mode

#

so yes you need a real live mode Connect account

#

and I noticed your domain was added in test mode, as karbi pointed out that would need to be fixed too

#

so step 1/ create a live mode Connect acct

#

2/ add (with live mode Platform secret key) Apple Pay domain for that live mode Connect acct

gaunt bloom Oct 28, 2021, 7:51 PM

#

ok that makes sense

#

can I add a stripe test card in my apple pay wallet?

#

or else how would I test the button without actually charging my card

twin violet Oct 28, 2021, 7:53 PM

#

or else how would I test the button without actually charging my card
3/ add a real live card to your Apple wallet
4/ then initialize Stripe.js and PaymentRequest Button on your page with test mode API keys

#

you can use test mode API keys on a live mode account

#

meaning you can do test mode activity on a live mode Connect account, you get access to both live and test mode

gaunt bloom Oct 28, 2021, 7:53 PM

#

Ok so basically frontend should all be test mode API keys, i.e. loadStripe('pk_test_XXXX'

twin violet Oct 28, 2021, 7:54 PM

#

while testing, yes

gaunt bloom Oct 28, 2021, 7:54 PM

#

as long as I do that, then no payments will be charged, regardless of if I'm using a live connect account & real CC

twin violet Oct 28, 2021, 7:54 PM

#

as long as I do that, then no payments will be charged, regardless of if I'm using a live connect account & real CC
yep

gaunt bloom Oct 28, 2021, 7:54 PM

#

fantastic, let me go ahead and try that and I'll let you know if it works

#

How can I create a live Connect account without having to enter SSN and bank details?

twin violet Oct 28, 2021, 7:57 PM

#

How can I create a live Connect account without having to enter SSN and bank details?
you have to enter real info.

I think you might get away with a "live mode account but unactivated" if you just don't enter info and you can still add the Apple Pay domain on it and "test" everything, it just won't ever be a "live enabled" account unless you later enter the real info. Give that a shot, not sure it will work, haven't tried it

gaunt bloom Oct 28, 2021, 7:58 PM

#

ok, I do have some live accounts that have payments/payouts disabled, so the payment will prob fail but the apple pay button might at least show up

#

Awesome, I was able to go through the authentication flow!

#

One other thing, I had mentioned this yesterday about listening to the shipping address/option change events in order to get details for tax calculation - however, it doesn't seem like either of those events are ever triggered

#

I've added these log/alert lines to see if they get triggered, but I'm not seeing the console logs or any alerts:

// shipping address change
paymentRequest.on('shippingaddresschange', async (ev) => {
  console.log("addr", ev.shippingAddress.addressLine);
  console.log("zip", ev.shippingAddress.postalCode);
  alert("shipping address");
});

// shipping option change
paymentRequest.on('shippingoptionchange', async (ev) => {
  console.log("shipping cost", ev.shippingOption.amount);
  alert("shipping option")
});

twin violet Oct 28, 2021, 8:30 PM

#

are you collecting shipping info on PaymentRequest Button

gaunt bloom Oct 28, 2021, 9:12 PM

#

We would like to, yes

#

sorry for the delay, Discord didn't send me notifications for some reason...

empty sluice Oct 28, 2021, 9:14 PM

#

Hello! I'm taking over for @twin violet, let me get caught up...

#

Are you setting requestShipping when creating the Payment Request object? https://stripe.com/docs/js/payment_request/create#stripe_payment_request-options-requestShipping

gaunt bloom Oct 28, 2021, 9:16 PM

#

Sigh that was probably it... let me double check

#

ok now I see the shipping details, if the customer doesn't tap it and just goes with their default shipping details will the events still be triggered?

empty sluice Oct 28, 2021, 9:25 PM

#

I believe you do get an initial shippingaddresschange event when the sheet appears, but you should test to make sure it works the way you expect.

gaunt bloom Oct 28, 2021, 9:31 PM

#

yes that seems to work and I can see the shipping address!

#

is there a code example of JS code using the updateWith function to update the price based on a flat shipping fee, say add $3.99 for shipping?

empty sluice Oct 28, 2021, 9:34 PM

#

No, we don't have sample code for that, but if you run into issues trying to implement that let me know and I can help unblock you once I see your code!

gaunt bloom Oct 28, 2021, 9:37 PM

#

I get a ReferenceError: updateWith is not defined when I try to do the following:

// shipping address change
paymentRequest.on('shippingaddresschange', async (ev) => {
  console.log("addr", ev.shippingAddress);

  updateWith({
    status: 'success'
  })
});

empty sluice Oct 28, 2021, 9:38 PM

#

updateWith is a function you would write on your end. Or you can update the paymentRequest directly. Either way this is the API to do it: https://stripe.com/docs/js/payment_request/update

gaunt bloom Oct 28, 2021, 9:39 PM

#

ah okay I misread the docs, I can go ahead and write it myself then

#

so when I listen to the address change event, I can figure out the new price and include the list of shipping options and use those to update the paymentRequest object

empty sluice Oct 28, 2021, 9:40 PM

#

Yep.

gaunt bloom Oct 28, 2021, 9:41 PM

#

Ok final (hopefully) question - I'm not seeing the entire address line in the shippingAddress object.

addressLine: Array(0)
length: 0
[[Prototype]]: Array(0)
city: "Fremont"
country: "US"
dependentLocality: ""
organization: ""
phone: ""
postalCode: "94539"
recipient: ""
region: "CA"
sortingCode: ""

#

Is that due to being in test mode? Or should I expect to see the full address details when testing?

empty sluice Oct 28, 2021, 9:44 PM

#

No, you won't ever get the full shipping address until after the payment is confirmed, for privacy reasons: https://stripe.com/docs/js/payment_request/events/on_shipping_address_change#payment_request_on_shipping_address_change-handler-shippingAddress

To maintain privacy, browsers may anonymize the shipping address by removing sensitive information that is not necessary to calculate shipping costs. Depending on the country, some fields can be missing or partially redacted. For example, the shipping address in the U.S. may only contain a city, state, and ZIP code. The full shipping address appears in the PaymentResponse object after the purchase is confirmed in the browser’s payment interface

gaunt bloom Oct 28, 2021, 9:45 PM

#

that makes sense

#

How would I get the PaymentResponse object? I'm already listening to paymentMethod event for confirmation, so would I listen to source or token?

empty sluice Oct 28, 2021, 9:47 PM

#

You get the PaymentResponse object in your paymentmethod event handler: https://stripe.com/docs/js/appendix/payment_response

#

So you should already have access to it with your existing code.

#

gaunt bloom Oct 28, 2021, 9:50 PM

#

I feel like I'm 90% there, but I don't understand how we get the PaymentResponse object in paymentmethod event handler if that handler is what we use to confirm the PaymentIntent in the first place

empty sluice Oct 28, 2021, 9:50 PM

#

Can you show me your paymentRequest.on('paymentmethod' code?

gaunt bloom Oct 28, 2021, 9:51 PM

#

paymentRequest.on('paymentmethod', async (ev) => {
  // Confirm the PaymentIntent without handling potential next actions (yet).
  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
    clientSecret,
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  );

  if (confirmError) {
    // Report to the browser that the payment failed, prompting it to
    // re-show the payment interface, or show an error message and close
    // the payment interface.
    ev.complete('fail');
  } else {
    // Report to the browser that the confirmation was successful, prompting
    // it to close the browser payment method collection interface.
    ev.complete('success');
    // Check if the PaymentIntent requires any actions and if so let Stripe.js
    // handle the flow. If using an API version older than "2019-02-11"
    // instead check for: `paymentIntent.status === "requires_source_action"`.
    if (paymentIntent.status === "requires_action") {
      // Let Stripe.js handle the rest of the payment flow.
      const {error} = await stripe.confirmCardPayment(clientSecret);
      if (error) {
        // The payment failed -- ask your customer for a new payment method.
        console.error("PAYMENT FAILED", error);
      } else {
        // The payment has succeeded.
      }
    } else {
      // The payment has succeeded.
    }
  }
});

#

this is basically copy-pasted from the documentation

empty sluice Oct 28, 2021, 9:53 PM

#

Okay, so the async function you're passing in as the second argument to the paymentRequest.on() function is the handler the documentation is talking about. The ev argument in that function is the PaymentResponse object.

#

So you should see the full shipping address in ev.shippingAddress.

#

Does that make sense?

gaunt bloom Oct 28, 2021, 9:54 PM

#

ah okay perfect

#

That makes sense, thanks for the explanation

#

thank you (all 3 of you!) so much for your help

#Akshay-paymentrequestbutton