The PaymentResponse
interface's retry()
method makes it possible to ask the user to retry a payment after an error occurs during processing.
This lets your app gracefully deal with situations such as invalid shipping addresses or declined credit cards.
A Promise
which is resolved when the payment is successfully completed. The promise is rejected with an appropriate exception value if the payment fails again.
Typically you will use this by calling show()
, then entering a loop or recursive function that checks the PaymentResponse
for errors or other reasons to retry the payment request. If a retry is needed, the loop calls retry()
, then loops back to check the response when it comes in. The loop exits only when the user either cancels the payment request or the request is successful.
See the example below for a thorough example, but the basic concept, in outline form, is:
- Create a new
PaymentRequest
(new
PaymentRequest()
) - Display the payment request (
PaymentRequest.show()
- If
show()
resolves, the returned PaymentResponse
describes the requested payment and the options chosen by the user. Continue with the following steps: - Validate the returned response; if there are any fields whose values are not acceptable, call the response's
complete()
method with a value of "fail"
to indicate failure. - If the response's data is valid and acceptable, call
complete("success")
to finalize the payment and process it.
- If
show()
is rejected, the payment request failed, usually because either there's already one being processed, because the user agent doesn't support any of the specified payment methods, or because of a security issue. See the list of exceptions for show()
for further details. Call complete("fail")
to close the payment request.
async function handlePayment() {
const payRequest = new PaymentRequest(methodData, details, options);
try {
let payResponse = await payRequest.show();
while (validate(payResponse)) {
await response.retry();
}
await payResponse.complete("success");
} catch (err) {
}
}
async function doPaymentRequest() {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await recursiveValidate(request, response);
await response.complete("success");
}
async function recursiveValidate(request, response) {
const promisesToFixThings = [];
const errors = await validate(request, response);
if (!errors) {
return;
}
if (errors.shippingAddress) {
const promise = fixField(
request,
"shippingaddresschange",
shippingValidator,
);
promisesToFixThings.push(promise);
}
if (errors.payer) {
const promise = fixField(response, "payerdetailchange", payerValidator);
promisesToFixThings.push(promise);
}
await Promise.all([response.retry(errors), ...promisesToFixThings]);
await recursiveValidate(request, response);
}
function fixField(requestOrResponse, event, validator) {
return new Promise((resolve) => {
requestOrResponse.addEventListener(event, async function listener(ev) {
const promiseToValidate = validator(requestOrResponse);
ev.updateWith(promiseToValidate);
const errors = await promiseToValidate;
if (!errors) {
event.removeEventListener(event, listener);
resolve();
}
});
});
}
doPaymentRequest();