Some payment methods require the shopper to be redirected to another page to complete the payment. When the shopper returns back to your website, you will get the payment result in the onPaymentCompleted(result, component)
event in your front end. You will get the payment outcome asynchronously, in a webhook sent to your server.
In most cases, you can also get the synchronous payment result on your server, by making a /payments/details
call in addition to /sessions
.
Because a synchronous result is not always available, for example if the shopper didn't return to your website, we strongly recommend that you only use it to present the payment result to your shopper. Use the webhooks to update your order management system.
Before you begin
This page assumes you've already built a Drop-in integration.
Step 1: Confirm the result of the redirect
After completing a payment that required a redirect, the shopper is redirected back to your returnUrl
with an HTTP GET. The returnUrl
is appended with a Base64-encoded redirectResult
:
GET /?shopperOrder=12xy..&&redirectResult=X6XtfGC3%21Y... HTTP/1.1
Host: www.your-company.com/checkout
From your server, make a POST /payments/details request with the URL-decoded the redirectResult
:
Then, use the resultCode
from the /payments/details response to present the payment result to the shopper.
Step 2: Present the payment result
After the shopper completes the payment, use the resultCode
to inform the shopper of the payment status.
resultCode | Description | Action to take |
---|---|---|
Authorised | The payment was successful. | Inform the shopper that the payment was successful. |
Error | Inform the shopper that there was an error processing their payment. | You'll receive a refusalReason in the same response, indicating the cause of the error. |
Pending | The shopper has completed the payment but the final result is not yet known. | Inform the shopper that you've received their order, and are waiting for the payment to be completed. |
PresentToShopper | Present the voucher or the QR code to the shopper. | For a voucher payment method, inform the shopper that you are waiting for their payment. For a qrCode payment method, wait for the AUTHORISATION notification before presenting the payment result to the shopper. |
Refused | The payment was refused. | Inform the shopper that the payment was refused. Ask the shopper to try the payment again using a different payment method or card. |
Received | For some payment methods, it can take some time before the final status of the payment is known. | Inform the shopper that you've received their order, and are waiting for the payment to clear. |
For other possible resultCode
values and recommended messages that you can present to your shopper, see Result codes.
Alternatively, you can use the dropin.setStatus
to show a customized message. For example:
// Show a success message
dropin.setStatus('success');
dropin.setStatus('success', { message: 'Payment successful!' });
// Show an error message
dropin.setStatus('error');
dropin.setStatus('error', { message: 'Something went wrong.'});
// Set a loading state
dropin.setStatus('loading'); // start the loading state
dropin.setStatus('ready'); // set back to the initial state