Accept payments via Revolut Pay - React Native

Add the Revolut Pay button to your app, confirm payment results in your UI, and fulfil orders on authoritative webhooks.

Revolut Pay allows your customers to pay with their card or their Revolut Retail or Revolut Business account, delivering a streamlined checkout experience through your React Native application.

In this tutorial, we'll guide you through integrating Revolut Pay Lite, powered by the Revolut Pay SDK for React Native. The SDK handles the entire payment flow, including redirecting to the Revolut app when installed and falling back to a secure in-app WebView, reducing friction and improving conversion rates.

How it works​

From an implementation perspective, the SDK works with the following components:

1. Server-side: A server-side endpoint is required to securely communicate with the Merchant API to create orders.
2. Client-side: The SDK is configured in your app with your public API key. When the customer taps the Revolut Pay button, the onCreateOrder callback calls your server to fetch an order token, which the SDK uses to initiate the payment.
3. Endpoint for webhooks: Your server should listen for webhook events to reliably track the payment lifecycle. For more information, see: Use webhooks to keep track of the payment lifecycle.

By default, the SDK prioritises the Retail sign-in flow. If your merchant account is enabled for Revolut Pay for Business, you can prioritise the Business flow for business customers with the preferredMode prop.

The payment flow:

1. The customer taps the Revolut Pay button.
2. Your app calls onCreateOrder, which fetches an order token from your server.
3. The SDK checks for the Revolut app:
   • If installed: The customer is redirected to the Revolut app to authorise the payment, then redirected to your app via deep link.
   • If not installed: The SDK opens a secure in-app WebView for the customer to complete the payment.
4. The SDK fires the onCompletion callback with the payment result.
5. Your server receives webhook notifications to confirm the payment's final state and securely fulfil the order.

Implementation overview​

1. Set up an endpoint for creating orders
2. Configure deep link
3. Install the SDK
4. Initialise the SDK
5. Add the Revolut Pay button
6. Handle the payment result
7. Set up webhooks

Before you begin​

Before you start this tutorial, make sure you have the following:

• An active Merchant account with Revolut Business. If you don't have one yet, apply for a Merchant account.
• Your API keys - both your public key (for initialising the SDK) and secret key (for creating orders on your backend). See Generate API keys.
• A backend server to securely create orders using the Merchant API. Your secret API key must never be exposed in your app.
• A React Native project with a checkout screen where you'll display the Revolut Pay button.

Implement Revolut Pay on React Native​

This section walks you through the server- and client-side implementation step by step.

1. Set up an endpoint for creating orders​

Before implementing the client-side SDK, you must first create a dedicated endpoint on your server. This is a critical security step, as your secret API key must never be exposed in your React Native application.

The role of this server-side endpoint is to act as a secure bridge between your app and the Merchant API. When a customer taps the Revolut Pay button in your app, your app will call this endpoint. Your endpoint is then responsible for:

1. Receiving the checkout details (e.g., amount, currency) from the app request.
2. Securely calling the Merchant API: Create an order endpoint with the received details.
3. Receiving the order details, including the public token, back from the Merchant API.
4. Passing this token back to your app in the response.

Later, the onCreateOrder callback calls this endpoint to fetch the token the SDK needs to initialise and process the payment.

POST /api/orders HTTP/1.1
Host: merchant.revolut.com
Authorization: Bearer sk_abcdef12347890_...
Content-Type: application/json
Revolut-Api-Version: 2026-08-17

{
  "amount": 1000,
  "currency": "GBP"
}

POST /api/orders HTTP/1.1
Host: merchant.revolut.com
Authorization: Bearer sk_abcdef12347890_...
Content-Type: application/json
Revolut-Api-Version: 2026-08-17

{
  "amount": 1000,
  "currency": "GBP"
}

2. Configure deep link​

Revolut Pay Lite redirects customers to the Revolut app to authorise payment, then back to your app via a custom URL scheme. This step registers that scheme in the native platform files of your React Native project - not in JavaScript code.

Choose a scheme and host for your app (for example, scheme myapp and host revolut-pay). You will pass the resulting URL as returnURL to the Revolut Pay button in step 5.

<!-- Allow the SDK to query whether the Revolut Retail and Business apps are installed -->
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>revolut</string>
  <string>revolut-business</string>
</array>

<!-- Register your app's custom URL scheme to receive deep links -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

<!-- Allow the SDK to query whether the Revolut Retail and Business apps are installed -->
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>revolut</string>
  <string>revolut-business</string>
</array>

<!-- Register your app's custom URL scheme to receive deep links -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

3. Install the SDK​

Add the following packages to your project with your preferred package manager:

npm install @revolut/revolut-pay-lite @revolut/revolut-payments-core

npm install @revolut/revolut-pay-lite @revolut/revolut-payments-core

After installing the packages, complete the platform-specific native setup:

cd ios && bundle exec pod install && cd ..

cd ios && bundle exec pod install && cd ..

4. Initialise the SDK​

Import RevolutPaymentsSDK and call configure once at the module level of your root component file, before the component declaration. This ensures initialization runs exactly once when the app starts, independent of React's rendering lifecycle:

import { RevolutPaymentsSDK } from '@revolut/revolut-pay-lite'

RevolutPaymentsSDK.configure('<yourPublicApiKey>', 'production')
  .catch(error => console.error('SDK configuration error:', error))

function App() {
  // ...
}

import { RevolutPaymentsSDK } from '@revolut/revolut-pay-lite'

RevolutPaymentsSDK.configure('<yourPublicApiKey>', 'production')
  .catch(error => console.error('SDK configuration error:', error))

function App() {
  // ...
}

5. Add the Revolut Pay button​

5.1 Implement the onCreateOrder callback​

The onCreateOrder callback is called when the customer taps the button. It must call the server-side endpoint you set up in step 1 and return the order token. The SDK passes this token to the Revolut app to link the payment session to this specific order.

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  // For more information, see: Merchant API: Create an order
  const order = await yourBackendCall()
  return order.token
}

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  // For more information, see: Merchant API: Create an order
  const order = await yourBackendCall()
  return order.token
}

5.2 Render the Revolut Pay button​

Import and render RevolutPayButton on your checkout screen:

import { RevolutPayButton } from '@revolut/revolut-pay-lite'

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  const order = await yourBackendCall()
  return order.token
}

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion} // defined in step 6
/>

import { RevolutPayButton } from '@revolut/revolut-pay-lite'

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  const order = await yourBackendCall()
  return order.token
}

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion} // defined in step 6
/>

Additional features​

The Revolut Pay SDK also offers a range of optional features for the checkout, as well as a promotional banner for your order confirmation screen.

import { RevolutPayPromotionalBanner } from '@revolut/revolut-pay-lite'

<RevolutPayPromotionalBanner
  transactionId='<transaction-id>'
  amount={1000}
  currency='GBP'
/>

import { RevolutPayPromotionalBanner } from '@revolut/revolut-pay-lite'

<RevolutPayPromotionalBanner
  transactionId='<transaction-id>'
  amount={1000}
  currency='GBP'
/>

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion} // defined in step 6
  preferredMode='businessOnly' // 'retail' (default), 'retailOnly', 'business', or 'businessOnly'
/>

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion} // defined in step 6
  preferredMode='businessOnly' // 'retail' (default), 'retailOnly', 'business', or 'businessOnly'
/>

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion}
  buttonStyle={{
    size: 'medium',
    radius: 'small',
    attachmentStyle: { currency: 'GBP' },
  }}
/>

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion}
  buttonStyle={{
    size: 'medium',
    radius: 'small',
    attachmentStyle: { currency: 'GBP' },
  }}
/>

6. Handle the payment result​

When the customer finishes payment in the Revolut app, the Revolut app opens the deep link you registered in step 2 (for example, myapp://revolut-pay). The OS recognises your URL scheme and automatically delivers the link to a native callback in your project.

You pass that URL or URI to the SDK, which extracts the payment result from it and fires your onCompletion callback. This confirms the result at the UX-level only.

The authoritative payment status for your business logic - fulfilment, shipping, inventory - always arrives on your backend via webhooks, which you set up in step 7.

Connect the URL handler​

import RevolutPayLite

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    if let url = URLContexts.first?.url {
        RevolutPayKit.handle(url: url)
    }
}

import RevolutPayLite

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    if let url = URLContexts.first?.url {
        RevolutPayKit.handle(url: url)
    }
}

Confirm payment result in UI​

Once the URL handler above has delivered the deep link to the SDK, the SDK calls your onCompletion callback with a status that tells you whether the payment succeeded, failed, or was abandoned by the customer. Handle each outcome to move the customer forward in the UI:

import { 
  RevolutPayButton, 
  RevolutPayCompletionEvent 
} from '@revolut/revolut-pay-lite'

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  const order = await yourBackendCall()
  return order.token
}

const handleCompletion = (event: RevolutPayCompletionEvent) => {
  const { status, error } = event.nativeEvent

  switch (status) {
    case 'success':
      // Navigate to a confirmation screen
      break
    case 'failure':
      // Show an error message to the customer
      console.error('Payment failed:', error)
      break
    case 'userAbandoned':
      // Handle gracefully — the customer cancelled
      break
  }
}

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion}
/>

import { 
  RevolutPayButton, 
  RevolutPayCompletionEvent 
} from '@revolut/revolut-pay-lite'

const handleCreateOrder = async (): Promise<string> => {
  // Call the server-side endpoint you set up in step 1 and return the order token.
  const order = await yourBackendCall()
  return order.token
}

const handleCompletion = (event: RevolutPayCompletionEvent) => {
  const { status, error } = event.nativeEvent

  switch (status) {
    case 'success':
      // Navigate to a confirmation screen
      break
    case 'failure':
      // Show an error message to the customer
      console.error('Payment failed:', error)
      break
    case 'userAbandoned':
      // Handle gracefully — the customer cancelled
      break
  }
}

<RevolutPayButton
  returnURL='myapp://revolut-pay'
  onCreateOrder={handleCreateOrder}
  onCompletion={handleCompletion}
/>

When status is 'failure', the error field on event.nativeEvent is a string describing the failure from the underlying native SDK. Log it for debugging purposes.

7. Set up webhooks​

Your backend must rely on webhooks as the authoritative source of payment status. The client-side onCompletion callback confirms the result at the UX level only - webhooks are guaranteed, server-to-server notifications that drive your critical backend logic.

POST /api/webhooks HTTP/1.1
Host: merchant.revolut.com
Authorization: Bearer sk_abcdef12347890_...
Content-Type: application/json
Revolut-Api-Version: 2026-08-17

{
  "url": "https://example.com/webhooks",
  "events": [
    "ORDER_COMPLETED",
    "ORDER_AUTHORISED",
    "ORDER_PAYMENT_DECLINED",
    "ORDER_PAYMENT_FAILED",
    "ORDER_CANCELLED",
    "ORDER_FAILED"
  ]
}

POST /api/webhooks HTTP/1.1
Host: merchant.revolut.com
Authorization: Bearer sk_abcdef12347890_...
Content-Type: application/json
Revolut-Api-Version: 2026-08-17

{
  "url": "https://example.com/webhooks",
  "events": [
    "ORDER_COMPLETED",
    "ORDER_AUTHORISED",
    "ORDER_PAYMENT_DECLINED",
    "ORDER_PAYMENT_FAILED",
    "ORDER_CANCELLED",
    "ORDER_FAILED"
  ]
}

Payment outcomes​

Handle the following scenarios in your webhook handler:

Example​

For a complete, working implementation, refer to the example app included in our public SDK repository:

The packages/revolut-pay-lite-demo directory demonstrates a complete Revolut Pay Lite integration. To run the demo:

1. Clone the repository:

   Terminal

   git clone https://github.com/revolut-mobile/revolut-payments-react-native.git

   git clone https://github.com/revolut-mobile/revolut-payments-react-native.git

   Copy

2. Navigate to the demo package:

   Terminal

   cd revolut-payments-react-native/packages/revolut-pay-lite-demo

   cd revolut-payments-react-native/packages/revolut-pay-lite-demo

   Copy

3. Install dependencies:

   Terminal

   npm install

   npm install

   Copy

4. For iOS, install CocoaPods dependencies:

   Terminal

   bundle install
   cd ios && bundle exec pod install && cd ..

   bundle install
   cd ios && bundle exec pod install && cd ..

   Copy

5. Run the app:

   Terminal

   # iOS
   npm run ios
   
   # Android
   npm run android

   # iOS
   npm run ios
   
   # Android
   npm run android

   Copy

Implementation checklist​

Project setup​

• @revolut/revolut-pay-lite and @revolut/revolut-payments-core are installed.
• iOS Info.plist includes LSApplicationQueriesSchemes with revolut and revolut-business.
• iOS Info.plist includes CFBundleURLTypes with your custom URL scheme.
• iOS AppDelegate.swift calls RevolutPayKit.handle(url:) in the URL context handler.
• Android AndroidManifest.xml includes the deep link <intent-filter>.
• Android MainActivity.kt implements RevolutPaymentControllerHolder and overrides onNewIntent.
• RevolutPaymentsSDK.configure is called before any payment component renders.

Payment flow​

• The Revolut Pay button appears correctly on the checkout screen.
• Tapping the button calls your server to create an order and receives a token.
• Test case 1 (Revolut app installed): Payment completes via redirect to the Revolut app and back.
• Test case 2 (Revolut app not installed): Payment completes via the in-app WebView.
• A successful payment triggers the expected UI update.
• A failed payment shows an appropriate error message.
• The user cancelling the payment flow is handled gracefully.

Backend verification​

• Webhook URL is registered and your server receives events (e.g., ORDER_COMPLETED, ORDER_PAYMENT_FAILED, ORDER_CANCELLED).
• Order fulfilment logic is only triggered after receiving a successful webhook, not from the client-side onCompletion callback.

What's next​