[!Important] React Native New Architecture Support

The New Architecture for React Native is exclusively supported on versions 0.76.0 and above.

[!Important]

Adyen Android SDK 5.22.0 requires Kotlin 2.3 (2.2.20 on Expo SDK 54), Android API 36 and Android Gradle plugin 8.9.1. It is supported from React Native 0.79 and Expo SDK 54.

See Compatibility for what to set for your React Native or Expo version. The same document keeps notes for officially unsupported React Native versions below 0.74.

Adyen React Native

Adyen React Native provides you with the building blocks to create a checkout experience for your shoppers, allowing them to pay using the payment method of their choice.

You can integrate with Adyen React Native in two ways:

• Drop-in: React Native wrapper for native iOS and Android Adyen Drop-in - an all-in-one solution, the quickest way to accept payments on your React Native app.
• Components: React Native wrapper for native iOS and Android Adyen Components - one Component per payment method that can be combined with your own payments flow.

Table of Contents

• Prerequisites
• Installation
  • Expo
  • Manual Integration
• Usage
  • Configuration
  • Sessions Flow
  • Advanced Flow
  • Handling Actions
• Documentation
• Contributing
• Support
• License

Prerequisites

• Adyen test account
• API key
• Client key

Installation

Add @adyen/react-native to your React Native project:

yarn add @adyen/react-native

Expo Integration

[!IMPORTANT]

This library is not compatible with Expo Go. It is designed exclusively for use with the Continuous Native Generation.

Add @adyen/react-native plugin to your app.json:

{
  "expo": {
    "plugins": ["@adyen/react-native"]
  }
}

For Android, install expo-build-properties and set the Kotlin and Android API values for your Expo SDK from Compatibility.

{
  "expo": {
    "plugins": [
      [
        "@adyen/react-native",
        {
          "merchantIdentifier": "merchant.com.my-merchant-id",
          "useFrameworks": true
        }
      ]
    ]
  }
}

[!TIP]

If you are facing issues with the plugin, pre-build your app and investigate the generated files:

npx expo prebuild --clean

Manual Integration

[!NOTE]

For Objective-C and Java integration, see the legacy documentation.

import Adyen

// ...

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    return RedirectComponent.applicationDidOpen(from: url)
}

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    return RedirectComponent.applicationDidOpen(from: url) || RCTLinkingManager.application(app, open: url, options: options)
}

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
       let url = userActivity.webpageURL,
       RedirectComponent.applicationDidOpen(from: url) {
        return true
    }
    return RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
}

import com.adyenreactnativesdk.AdyenCheckout
import android.os.Bundle

// ...

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    AdyenCheckout.setLauncherActivity(this)
}

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:path="/payment" />
</intent-filter>

import android.content.Intent

// ...

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    AdyenCheckout.handleIntent(intent)
}

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your configuration here -->
</style>

Usage

For general understanding of how prebuilt UI components of Adyen work you can follow our documentation.

Configuration

To read more about other configuration, see the full list. Example of required configuration:

import { Configuration } from '@adyen/react-native';

const configuration: Configuration = {
  environment: 'test', // When you're ready to accept real payments, change the value to a suitable live environment.
  clientKey: '{YOUR_CLIENT_KEY}',
  countryCode: 'NL',
  amount: { currency: 'EUR', value: 1000 }, // Value in minor units
  returnUrl: 'myapp://payment', // See description below.
};

Return URL

[!IMPORTANT]

On config use a custom URL scheme or App/Universal link of your app(s).

const returnUrl = Platform.select({
  ios: 'myapp://payment',
  android: await AdyenDropIn.getReturnURL(),
});

Opening Payment component

To use @adyen/react-native you can use our helper component AdyenCheckout and helper functions from useAdyenCheckout with standalone component:

import { useAdyenCheckout } from '@adyen/react-native';

const MyCheckoutView = () => {
  const { start } = useAdyenCheckout();

  return (
    <Button
      title="Open DropIn"
      onPress={() => {
        start('dropIn');
      }}
    />
  );
};

Sessions Flow

[!IMPORTANT]

Memoize your callbacks with useCallback to prevent unnecessary re-renders and event listener re-registration. Inline functions will cause performance issues.

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onComplete = useCallback((result, component) => {
  // Payment was completed - call `component.hide(true)` to dismiss the payment UI.
  // Call /sessions/(sessionId)?sessionResult={result} API to get more information about the payment outcome.
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI.
}, []);

<AdyenCheckout
  config={configuration}
  session={session}
  onComplete={onComplete}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

Advanced Flow

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onSubmit = useCallback((data, component) => {
  // Call your server to make the `/payments` request
  // Pass `returnUrl: data.returnUrl` for cross-platform redirect flow
  // If response contains `action`, call `component.handle(response.action)`
  // Otherwise, call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onAdditionalDetails = useCallback((paymentData, component) => {
  // Call your server to make the `/payments/details` request
  // Call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI
}, []);

<AdyenCheckout
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={onSubmit}
  onAdditionalDetails={onAdditionalDetails}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

Handling Actions

Some payment methods require additional action from the shopper such as: to scan a QR code, to authenticate a payment with 3D Secure, or to log in to their bank's website to complete the payment. To handle these additional front-end challenges, use nativeComponent.handle(action) from onSubmit callback.

const handleSubmit = (paymentData, nativeComponent) => {
  server.makePayment(paymentData)
    .then((response) => {
      if (response.action) {
        nativeComponent.handle(response.action);
      } else {
        nativeComponent.hide(response.result);
      }
    });
};

<AdyenCheckout
  ...
  onSubmit={handleSubmit}
  >
    ...
</AdyenCheckout>

Standalone Action handling

In case of API-only integration AdyenAction.handle could be used. Before you begin, make sure you follow all iOS integration and Android integration steps.

Example:

import { AdyenAction } from '@adyen/react-native';

const data = await AdyenAction.handle(apiResponse.action, { environment: 'test', clientKey: '{YOUR_CLIENT_KEY}');
result = await ApiClient.paymentDetails(data);

Documentation

• Configuration
• Localization
• UI Customization
• Error codes
• Drop-in documentation
• Component documentation

Contributing

We strongly encourage you to join us in contributing to this repository so everyone can benefit from:

• New features and functionality
• Resolved bug fixes and issues
• Any general improvements

Read our contribution guidelines to find out how.

Support

If you have a feature request, or spotted a bug or a technical problem, create a GitHub issue. For other questions, contact our Support Team via Customer Area or via email: [email protected]

License

MIT license. For more information, see the LICENSE file.