Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get default shipping address with Payment Request button before customers clicks "Pay"? I'm using Stripe.js & Elements

I'm using Stripe's PaymentRequest button to collect payment & shipping information to later process the payment with Stripe on the server side. I'm targeting ApplePay, but currently testing under PaymentRequest API (Chrome).

I need to know the customer's shipping address to calculate & show tax amount (and update grand total) before the payment form is submitted. I can easily get it via "shippingaddresschange" event, but only if the customer changes the address.

How can I get the default shipping address that the payment request form is automatically loaded with if customer doesn't change it later on? The initial (default) address does not seem to trigger "shippingaddresschange" event.

like image 863
Jacob Avatar asked Jan 30 '18 00:01

Jacob


People also ask

How to customise Stripe checkout?

You can customize the look and feel of Checkout in the Stripe Dashboard. Go to Branding Settings where you can: Upload a logo or icon. Customize the Checkout page's background color, button color, font, and shapes.

How does Stripe Elements work?

Use Stripe Elements, our prebuilt UI components, to create a payment form that lets you securely collect a customer's card details without handling the sensitive data. The card details are then converted to a representative Token that you can safely send to your servers.

What is client secret in stripe?

From Stripe Docs. clientSecret: The client secret of this PaymentIntent. Used for client-side retrieval using a publishable key. The client secret can be used to complete a payment from your frontend. It should not be stored, logged, embedded in URLs, or exposed to anyone other than the customer.


2 Answers

See examples at https://rsolomakhin.github.io/pr/single/ and https://rsolomakhin.github.io/pr/multi/. Chrome pre-selects an address if you pre-select a shipping option that you're OK using for any address in the world, i.e., flat rate shipping world-wide. Here you would not know the shipping address until the user authorizes the payment.

However, in your case, you need to know the shipping address to calculate & show the tax amount. This means that you don't have a world-wide flat rate, so you would not pre-select a shipping option. In this case, Chrome requires the user to explicitly approve providing their address to you, which means that the user's address will not be pre-selected in the UI as it is implemented right now.

like image 94
Rouslan Solomakhin Avatar answered Oct 18 '22 03:10

Rouslan Solomakhin


I think this is a bug with Chrome. Safari/ApplePay will trigger an initial onshippingaddresschange when the payment sheet is displayed but Chrome does not.

I've also run into an issue with Chrome where I select a shipping address and onshippingaddresschange triggers. I then cancel/dismiss the dialog and re-open but the "default" shipping address is selected and all of the data (i.e. shipping option, tax, etc...) in my payment sheet is still set from the previous onshippingaddresschange event.

ApplePay doesn't have the same issue because it will trigger that onshippingaddresschange event as soon as it opens.

This isn't really an "answer" but I'm hoping this provides a little more context.

like image 43
fuchse Avatar answered Oct 18 '22 02:10

fuchse