How to update your Android payment app to provide shipping address and payer's contact information with Web Payments APIs.
Entering shipping address and contact information through a web form can be a cumbersome experience for customers. It can cause errors and lower conversion rate.
That's why the Payment Request API supports a feature to request shipping address and contact information. This provides multiple benefits:
- Users can pick the right address with just a few taps.
- The address is always returned in the standardized format.
- Submitting an incorrect address is less likely.
Browsers can defer the collection of shipping address and contact information to a payment app to provide a unified payment experience. This functionality is called delegation.
Whenever possible, Chrome delegates the collection of a customer's shipping address and contact information to the invoked Android payment app. The delegation reduces the friction during checkout.
The merchant website can dynamically update the shipping options and total price depending on the customer's choice of the shipping address and the shipping option.
To add delegation support to an already existing Android payment app, implement the following steps:
- Declare supported delegations.
- Parse
PAY
intent extras for required payment options. - Provide required information in payment response.
- [Optional] Support dynamic flow:
Declare supported delegations
The browser needs to know the list of additional information that your payment
app can provide so it can delegate the collection of that information to your
app. Declare the supported delegations as a <meta-data>
in your app's
AndroidManifest.xml.
<activity
android:name=".PaymentActivity"
…
<meta-data
android:name="org.chromium.payment_supported_delegations"
android:resource="@array/supported_delegations" />
</activity>
<resource>
must be a list of strings chosen from the following valid values:
[ "payerName", "payerEmail", "payerPhone", "shippingAddress" ]
The following example can only provide a shipping address and the payer's email address.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="supported_delegations">
<item>payerEmail</item>
<item>shippingAddress</item>
</string-array>
</resources>
Parse PAY
intent extras for required payment options
The merchant can specify additional required information using the
paymentOptions
dictionary. Chrome will provide the list of required options that your app can
provide by passing the following parameters to the PAY
activity as Intent
extras.
paymentOptions
paymentOptions
is the subset of merchant specified payment options for which
your app has declared delegation support.
val paymentOptions: Bundle? = extras.getBundle("paymentOptions")
val requestPayerName: Boolean? = paymentOptions?.getBoolean("requestPayerName")
val requestPayerPhone: Boolean? = paymentOptions?.getBoolean("requestPayerPhone")
val requestPayerEmail: Boolean? = paymentOptions?.getBoolean("requestPayerEmail")
val requestShipping: Boolean? = paymentOptions?.getBoolean("requestShipping")
val shippingType: String? = paymentOptions?.getString("shippingType")
It can include the following parameters:
requestPayerName
- The boolean indicating whether or not the payer's name is required.requestPayerPhone
- The boolean indicating whether or not the payer's phone is required.requestPayerEmail
- The boolean indicating whether or not the payer's email is required.requestShipping
- The boolean indicating whether or not shipping information is required.shippingType
- The string showing the type of shipping. Shipping type can be"shipping"
,"delivery"
, or"pickup"
. Your app can use this hint in its UI when asking for the user's address or choice of shipping options.
shippingOptions
shippingOptions
is the parcelable array of merchant specified shipping
options. This parameter will only exist when paymentOptions.requestShipping ==
true
.
val shippingOptions: List<ShippingOption>? =
extras.getParcelableArray("shippingOptions")?.mapNotNull {
p -> from(p as Bundle)
}
Each shipping option is a Bundle
with the following keys.
id
- The shipping option identifier.label
- The shipping option label shown to the user.amount
- The shipping cost bundle containingcurrency
andvalue
keys with string values.currency
shows the currency of the shipping cost, as an ISO4217 well-formed 3-letter alphabet codevalue
shows the value of the shipping cost, as a valid decimal monetary value
selected
- Whether or not the shipping option should be selected when the payment app displays the shipping options.
All keys other than the selected
have string values. selected
has a boolean
value.
val id: String = bundle.getString("id")
val label: String = bundle.getString("label")
val amount: Bundle = bundle.getBundle("amount")
val selected: Boolean = bundle.getBoolean("selected", false)
Provide required information in a payment response
Your app should include the required additional information in its response to
the PAY
activity.
To do so the following parameters must be specified as Intent extras:
payerName
- The payer's full name. This should be a non-empty string whenpaymentOptions.requestPayerName
is true.payerPhone
- The payer's phone number. This should be a non-empty string whenpaymentOptions.requestPayerPhone
is true.payerEmail
- The payer's email address. This should be a non-empty string whenpaymentOptions.requestPayerEmail
is true.shippingAddress
- The user-provided shipping address. This should be a non-empty bundle whenpaymentOptions.requestShipping
is true. The bundle should have the following keys which represent different parts in a physical address.city
countryCode
dependentLocality
organization
phone
postalCode
recipient
region
sortingCode
addressLine
All keys other than theaddressLine
have string values. TheaddressLine
is an array of strings.
shippingOptionId
- The identifier of the user-selected shipping option. This should be a non-empty string whenpaymentOptions.requestShipping
is true.
Validate payment response
If the activity result of a payment response received from the invoked payment
app is set to RESULT_OK
, then Chrome will check for required additional
information in its extras. If the validation fails Chrome will return a rejected
promise from request.show()
with one of the following developer-facing error
messages:
'Payment app returned invalid response. Missing field "payerEmail".'
'Payment app returned invalid response. Missing field "payerName".'
'Payment app returned invalid response. Missing field "payerPhone".'
'Payment app returned invalid shipping address in response.'
'... is not a valid CLDR country code, should be 2 upper case letters [A-Z]'
'Payment app returned invalid response. Missing field "shipping option".'
The following code sample is an example of a valid response:
fun Intent.populateRequestedPaymentOptions() {
if (requestPayerName) {
putExtra("payerName", "John Smith")
}
if (requestPayerPhone) {
putExtra("payerPhone", "4169158200")
}
if (requestPayerEmail) {
putExtra("payerEmail", "john.smith@gmail.com")
}
if(requestShipping) {
val address: Bundle = Bundle()
address.putString("countryCode", "CA")
val addressLines: Array<String> =
arrayOf<String>("111 Richmond st. West")
address.putStringArray("addressLines", addressLines)
address.putString("region", "Ontario")
address.putString("city", "Toronto")
address.putString("postalCode", "M5H2G4")
address.putString("recipient", "John Smith")
address.putString("phone", "4169158200")
putExtra("shippingAddress", address)
putExtra("shippingOptionId", "standard")
}
}
Optional: Support dynamic flow
Sometimes the total cost of a transaction increases, such as when the user chooses the express shipping option, or when the list of available shipping options or their prices changes when the user chooses an international shipping address. When your app provides the user-selected shipping address or option, it should be able to notify the merchant about any shipping address or option changes and show the user the updated payment details (provided by the merchant).
AIDL
To notify the merchant about new changes use the PaymentDetailsUpdateService
service declared in Chrome's AndroidManifest.xml. To use this service create two
AIDL files with the following content:
app/src/main/aidl/org/chromium/components/payments/IPaymentDetailsUpdateService
package org.chromium.components.payments;
import android.os.Bundle;
interface IPaymentDetailsUpdateServiceCallback {
oneway void updateWith(in Bundle updatedPaymentDetails);
oneway void paymentDetailsNotUpdated();
}
app/src/main/aidl/org/chromium/components/payments/IPaymentDetailsUpdateServiceCallback
package org.chromium.components.payments;
import android.os.Bundle;
import org.chromium.components.payments.IPaymentDetailsUpdateServiceCallback;
interface IPaymentDetailsUpdateService {
oneway void changePaymentMethod(in Bundle paymentHandlerMethodData,
IPaymentDetailsUpdateServiceCallback callback);
oneway void changeShippingOption(in String shippingOptionId,
IPaymentDetailsUpdateServiceCallback callback);
oneway void changeShippingAddress(in Bundle shippingAddress,
IPaymentDetailsUpdateServiceCallback callback);
}
Notify the merchant about changes in the user selected payment method, shipping address, or shipping option
private fun bind() {
// The action is introduced in Chrome version 92, which supports the service in Chrome
// and other browsers (e.g., WebLayer).
val newIntent = Intent("org.chromium.intent.action.UPDATE_PAYMENT_DETAILS")
.setPackage(callingBrowserPackage)
if (packageManager.resolveService(newIntent, PackageManager.GET_RESOLVED_FILTER) == null) {
// Fallback to Chrome-only approach.
newIntent.setClassName(
callingBrowserPackage,
"org.chromium.components.payments.PaymentDetailsUpdateService")
newIntent.action = IPaymentDetailsUpdateService::class.java.name
}
isBound = bindService(newIntent, connection, Context.BIND_AUTO_CREATE)
}
private val connection = object : ServiceConnection {
override fun onServiceConnected(className: ComponentName, service: IBinder) {
val service = IPaymentDetailsUpdateService.Stub.asInterface(service)
try {
if (isOptionChange) {
service?.changeShippingOption(selectedOptionId, callback)
} else (isAddressChange) {
service?.changeShippingAddress(selectedAddress, callback)
} else {
service?.changePaymentMethod(methodData, callback)
}
} catch (e: RemoteException) {
// Handle the remote exception
}
}
}
The callingPackageName
used for the service's start intent can have one of the
following values depending on the browser that has initiated the payment
request.
Chrome Channel | Package Name |
---|---|
Stable |
"com.android.chrome"
|
Beta |
"com.chrome.beta"
|
Dev |
"com.chrome.dev"
|
Canary |
"com.chrome.canary"
|
Chromium |
"org.chromium.chrome"
|
Google Quick Search Box (a WebLayer embedder) |
"com.google.android.googlequicksearchbox"
|
changePaymentMethod
Notifies the merchant about changes in the user-selected payment method. The
paymentHandlerMethodData
bundle contains methodName
and optional details
keys both with string values. Chrome will check for a non-empty bundle with a
non-empty methodName
and send an updatePaymentDetails
with one of the
following error messages via callback.updateWith
if the validation fails.
'Method data required.'
'Method name required.'
changeShippingOption
Notifies the merchant about changes in the user-selected shipping option.
shippingOptionId
should be the identifier of one of the merchant-specified
shipping options. Chrome will check for a non-empty shippingOptionId
and send
an updatePaymentDetails
with the following error message via
callback.updateWith
if the validation fails.
'Shipping option identifier required.'
changeShippingAddress
Notifies the merchant about changes in the user-provided shipping address. Chrome
will check for a non-empty shippingAddress
bundle with a valid countryCode
and send an updatePaymentDetails
with the following error message via
callback.updateWith
if the validation fails.
'Payment app returned invalid shipping address in response.'
Invalid state error message
If Chrome encounters an invalid state upon receiving any of the change requests
it will call callback.updateWith
with a redacted updatePaymentDetails
bundle. The bundle will only contain the error
key with "Invalid state"
.
Examples of an invalid state are:
- When Chrome is still waiting for the merchant's response to a previous change (such as an ongoing change event).
- The payment-app-provided shipping option identifier does not belong to any of the merchant-specified shipping options.
Receive updated payment details from the merchant
private fun unbind() {
if (isBound) {
unbindService(connection)
isBound = false
}
}
private val callback: IPaymentDetailsUpdateServiceCallback =
object : IPaymentDetailsUpdateServiceCallback.Stub() {
override fun paymentDetailsNotUpdated() {
// Payment request details have not changed.
unbind()
}
override fun updateWith(updatedPaymentDetails: Bundle) {
newPaymentDetails = updatedPaymentDetails
unbind()
}
}
updatePaymentDetails
is the bundle equivalent to the
PaymentRequestDetailsUpdate
WebIDL dictionary (after redacting the
modifiers
field) and contains the following optional keys:
total
- A bundle containingcurrency
andvalue
keys, both keys have string valuesshippingOptions
- The parcelable array of shipping optionserror
- A string containing a generic error message (e.g. whenchangeShippingOption
does not provide a valid shipping option identifier)stringifiedPaymentMethodErrors
- A JSON string representing validation errors for the payment methodaddressErrors
- A bundle with optional keys identical to shipping address and string values. Each key represents a validation error related to its corresponding part of the shipping address.
An absent key means its value has not changed.