Charge a customer's saved payment method

In this tutorial you can learn how to save and charge your customer's card details using the Revolut Checkout Widget. To do that, you have to:

Save a customer's card details
Charge the customer's saved payment method

Customer and merchant initiated payments

Familiarizing yourself with this process can be helpful to take advantage of saved payment methods. There are two types of payments:

Customer initiated payments: These are useful to improve your customer experience. Your customers can save their card details and choose from saved payment methods on their future checkouts without providing their card details again. For more information, see: Save cards and speed up checkout.
Merchant initiated payments: These payments are useful to manage subscriptions. Your customers can save their card details, and you can initiate recurring payments on that card. For more information, see: Manage subscriptions.

1. Save a customer's card details

There are two approaches to save the card details of a customer:

Create a customer first

Use this approach when your customer already has an account on your site at checkout. Attach the payment method to the customer after the payment is made.

Create a customer and note down the id of the customer object in the response.
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("Thank you!");
    },
    onError(message) {
      window.alert("Oh no :(");
    },
  });

  document
    .getElementById("button-submit")
    .addEventListener("click", function () {
      card.submit({
        savePaymentMethodFor: "merchant",
      });
    });
});

Make the payment via the widget.
The payment method is created and attached to the customer.

Create an order first

Use this approach when your customer starts the checkout as a guest user on your site. Attach the payment method to the newly created customer after the order is completed.

Create an order with the amount and currency parameters.
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.
note
You must provide email when creating an order or when the customer is making the payment; otherwise, an error is returned.
See an example with the createCardField instance:
```
RevolutCheckout("<token>").then(function (instance) {
  var card = instance.createCardField({
    target: document.getElementById("card-field"),
    onSuccess() {
      window.alert("Thank you!");
    },
    onError(message) {
      window.alert("Oh no :(");
    },
  });

  document
    .getElementById("button-submit")
    .addEventListener("click", function () {
      card.submit({
        savePaymentMethodFor: "merchant",
      });
    });
});
```
note
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 customer_id is attached to the order automatically.

2. Charge the saved payment method

Once the customer is created and their payment method is saved, you can charge the payment method even though the customer is not on the checkout page; i.e. for 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 (or email) parameters in the body of the request. Where the customer_id (or email) 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
note
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"
  },
  "state": "captured"
}
```
You can handle captured payments as completed, it takes around 24 hours to settle payments on your Merchant Account.