Payment Request API: Getting the buyer's address

user_1137073 0
Viewed 77

I am currently looking into the W3C Payment Request API as part of a project for a new e-commerce checkout flow (mostly for supporting faster check-out using Apple Pay and Google Pay).

From looking at the API specification's change history, it looks like this change instituted earlier this year removes support for requesting the buyer's address with a payment request. The documentation of our payment service provider still shows this option, and it seems to work for now. That being said, I don't want to rely on a feature that browsers might start dropping soon because it's no longer in the standard, breaking our checkout flow.

Does anyone know if there is a recommended new way to handle this via the API, or if it is advisable to move the collection of the buyer's billing and shipping addresses back to a form on our page even when using the payment request API?

payment-request-api applepay google-pay payment-gateway e-commerce
1 Answers

As far as the Payment Request API is concerned, I think there three primary options:

  • Apple Pay
  • Google Pay
  • basic-card

As you may have seen, basic-card is being deprecated (https://blog.chromium.org/2021/10/sunsetting-basic-card-payment-method-in.html) so you probably want to avoid this option.

Both Apple Pay and Google Pay provide access to billing and shipping address, and can be accessed as payment methods in the Payment Request API, and both provide their own alternate APIs (Apple Pay JS API and Google Pay Online API).

I don't know about Apple Pay, but the advice for Google Pay is to use Google Pay Online API (which makes use of the Payment Request API when available). Google Pay provides a consistent API for browsers that do and don't support the Payment Request API.

Does anyone know if there is a recommended new way to handle this via the API, or if it is advisable to move the collection of the buyer's billing and shipping addresses back to a form on our page even when using the payment request API?

The guidance for Google Pay is to place the Google Pay button above manual entry fields and to collect shipping information from Google Pay so that users can users don't start filling in the form before realizing there was a faster checkout option available.

So prioritize the digital checkout options for users that choose to use it, and make use of billing/shipping information from the digital wallet APIs. Make manual form fields available (suggest that form fields also make correct use of autofill attributes) for users who don't have access to or choose not to use the other payment options.

Demo site available with this in action: https://paydemo.withgoogle.com

FYI, if you're looking to integrate Google Pay into your site and are using a JavaScript framework, consider using the framework specific components from Google Pay for easier integration: https://github.com/google-pay/google-pay-button

user_120317390
Related