In this tutorial you can learn how to save and charge your customer's payment methods using the Revolut Checkout Widget. To do that, you have to:
Familiarizing yourself with this process can be helpful to take advantage of saved payment methods. There are two types of payments:
To save a customer's payment details using any of the available payment methods, you need to meet one of the following requirements:
email
and assign it to the order by providing customer.id
customer.email
during order creationThere are two approaches to save the payment details of a customer:
Use this approach when your customer already has an account on your site at checkout. The payment method is attached to the customer after the payment is made.
Create a customer
and save the id
of the customer
object in the response.
To save a customer's payment details, at least the email
is required during customer creation.
Create an order
with the amount
, currency
, and customer.id
parameters in the request body.
Initialise the Revolut Checkout Widget with the savePaymentMethodFor
parameter set to either customer
or merchant
. If you want to use Revolut Pay, initialise the widget by passing the savePaymentMethodForMerchant
parameter as true
.
See an example with the createCardField
instance:
RevolutCheckout("<token>").then(function (instance) {
var card = instance.createCardField({
target: document.getElementById("card-field"),
onSuccess() {
window.alert("Payment was successful. Thank you!");
},
onError(message) {
window.alert("Something went wrong.");
},
});
document
.getElementById("button-submit")
.addEventListener("click", function () {
card.submit({
savePaymentMethodFor: "merchant"
});
});
});
You can also use the payWithPopup
instance of the Revolut Checkout Widget to save a customer's payment method.
Make the payment via the widget.
The payment method is created and attached to the customer. To check a customer's saved payment methods, use the: Merchant API: Retrieve all payment methods of a customer endpoint.
Use this approach when your customer starts the checkout as a guest user on your site. The payment method is attached to the customer after the payment is made.
Create an order
with the amount
, currency
, and at least one of the following:
customer.email
, orcustomer.phone
, orcustomer.full_name
parameters. As a general best practice, it's recommended to additionally provide any further information you have (email
, phone
, full_name
) when you wish to create a new customer
object.
Unless you provide customer.id
at order creation, we always create a new customer, irrespective of another, existing customer having the same details (email
, phone
, full_name
).
To save a customer's payment details, either customer.id
(with email
present on customer object) or customer.email
is required during order creation.
Initialise the widget with savePaymentMethodFor
parameter set to either customer
or merchant
. If you want to use Revolut Pay, initialise the widget by passing the savePaymentMethodForMerchant
parameter as true
.
See an example with the createCardField
instance:
RevolutCheckout("<token>").then(function (instance) {
var card = instance.createCardField({
target: document.getElementById("card-field"),
onSuccess() {
window.alert("Payment was successful. Thank you!");
},
onError(message) {
window.alert("Something went wrong.");
},
});
document
.getElementById("button-submit")
.addEventListener("click", function () {
card.submit({
savePaymentMethodFor: "merchant"
});
});
});
You can also use the payWithPopup
instance of the Revolut Checkout Widget to save a customer's payment method.
Make the payment via the widget.
When the payment is successful, a customer
is created with the email.
The payment method is associated with the customer, and the customer
object is attached to the order automatically. To check a customer's saved payment methods, use the: Merchant API: Retrieve all payment methods of a customer endpoint.
Once the customer is created and their payment method is saved, you can charge the payment method even when the customer is not on the checkout page. This can be useful for taking recurring payments.
You can also use this approach to provide a faster checkout experience for customers, for example, a 1-click buy flow.
To charge a customer's saved payment method, follow these steps:
Create an order with the amount
, currency
and customer.id
parameters in the body of the request. Where the customer.id
corresponds to a customer with a saved payment method.
Pay for the order using the Merchant API: Pay for an order endpoint to initiate the payment using a customer's saved payment method.
Use the following JSON object as the payload of the request:
{
"saved_payment_method": {
"type": "<type of the saved payment method>",
"id": "<ID of the saved payment method>",
"initiator": "<initiator of the payment>"
}
}
To retrieve the required information, use the order paid initially in Step 1. Retrieve the payment method ID and type from the order response using payments.payment_method.id
and payments.payment_method.type
.
The following table shows who can initiate payments on saved payment methods (initiator
parameter in payment request), depending on if the payment method was saved for the customer or the merchant (savedPaymentMethodFor
parameter in the widget configuration):
savePaymentMethodFor: customer | savePaymentMethodFor: merchant | |
---|---|---|
initiator: customer | Allowed | Allowed |
initiator: merchant | Not allowed | Allowed |
Only merchant initiated transactions are supported with Revolut Pay on the Pay for an order endpoint.
If the payment is successfully captured, the following JSON is returned:
{
"id": "6407402d-cf34-ac35-9be4-f1448708811b",
"order_id": "64073e7b-41af-a715-8a37-9d73cd01fa9f",
"payment_method": {
"type": "card",
"id": "6513122e-877b-aa8d-9d26-4d1a805c7841",
"brand": "mastercard_credit",
"last_four": "1234"
},
"state": "captured"
}
You can handle captured payments as completed, it takes around 24 hours to settle payments on your Merchant Account.
Congratulations! You've successfully charged one of your customer's saved payment methods.