Accept payments via Apple Pay and Google Pay

You can accept payments via Apple Pay and Google Pay very easily with Revolut as your payment gateway.

There are two main mechanisms to start accepting payments:

Using Revolut's Plugins for WooCommerce and Prestashop​

If your ecommerce website is built using WooCommerce (Wordpress) or Prestashop, the process to enable Apple Pay and Google Pay in your account is extremely easy: Update to the latest version and the payment methods will be available.

For Prestashop, these are available from version 2.0.0. Check these pages if you want to know more about how to install and configure the Prestashop plugin.

For WooCommerce, these are available from version 3.0.0. Check these pages if you want to know more about how to install and configure the WooCommerce plugin.

If your website is built using a different e-Commerce website builder, stay tuned. We are regularly adding functionality to our plugins and producing new ones.

Implementing the Payment Request button manually​

Revolut has conveniently merged Apple Pay and Google Pay into one widget (button) that will take care of everything for you.

Here's a simple guide to get started:

Register your domain for Apple Pay​

The first step to make the payment request button work is to register your website's domain for Apple Pay.

Apple requires this in order to verify that you are accepting payments from an approved website.

To do so, follow these steps:

1. Download the latest domain validation file.

2. Upload the domain validation file to your website in the following URI /.well-known/apple-developer-merchantid-domain-association. For example, if your website is iacceptpayments.com, the file should be available on iacceptpayments.com/.well-known/apple-developer-merchantid-domain-association.

3. Activate your domain using the endpoint to Register a domain for Apple Pay. With the following request body, based on our example:

   {
     "domain": "iacceptpayments.com"
   }
   

Add the payment request button to your checkout​

You can now add the Payment Request button to your checkout. The process to start accepting payments is the same as with Card payments or Revolut Pay:

1. Server side: Create an order via the Merchant API request.
2. Client side: Install the widget by adding RevolutCheckout to your application.
3. Client side: Choose the option to load the payment request method and call the widget instance.

Check out the full documentation for the payment request payment method for more customisation options.

Example​

See a simple example implementation below:

RevolutCheckout('<PUBLIC-ID>').then((instance) => {
  const paymentRequest = instance.paymentRequest({
    target: document.getElementById('revolut-payment-request'),
    requestShipping: true,
    shippingOptions,
    onShippingOptionChange: (selectedShippingOption) => {
      // ideally compute new total price. calls can be made to a server here
      return Promise.resolve({
        status: 'success',
        total: {
          amount: 777 + selectedShippingOption.amount,
        },
      })
    },
    onShippingAddressChange: (selectedShippingAddress) => {
      // ideally compute new total price. calls can be made to a server here
      const newShippingOption = {
        id: 'new-shipping',
        label: 'The new ultra-fast method',
        amount: 500,
        description: 'The shipping method faster than lightening',
      }

      return Promise.resolve({
        status: 'success',
        shippingOptions: [newShippingOption, ...shippingOptions],
        total: {
          amount: 777 + newShippingOption.amount,
        },
      })
    },
    onSuccess() {
      setResult('Paid')
    },
    onError(error) {
      setResult(`Error: ${error.message}`)
    },
    buttonStyle: { size: 'small', variant: 'light-outlined' },
  })

  paymentRequest.canMakePayment().then((result) => {
    if (result) {
      paymentRequest.render()
    } else {
      setResult('Not supported')
      paymentRequest.destroy()
    }
  })
})