[!Important] React Native New Architecture Support

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

For projects using versions lower than 0.76.0, please:

• Continue utilizing the Old Architecture.
• Alternatively, disable bridgeless mode by setting load(bridgelessEnabled=false).

[!Note]

For compatibility with officially unsupported versions below v0.74 check this document.

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"]
  }
}

| Option | Description | | -------------------- | ------------------------------------------------------------------------------- | | merchantIdentifier | Sets ApplePay Merchant ID to your iOS app's entitlement file. Empty by default. | | useFrameworks | Adjust import on iOS in case your Podfile has use_frameworks! enabled. |

Example with all options:

{
  "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.

1. Run pod install

2. Add returnURL handler to your AppDelegate.swift:

import Adyen

// ...

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

If using RCTLinkingManager or other deep-linking techniques, place ADYRedirectComponent.applicationDidOpen before them:

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

For Universal Link support:

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)
}

3. Add custom URL Scheme to your app.

4. For ApplePay: Follow the Enable ApplePay for iOS guide.

1. Provide your Checkout activity to AdyenCheckout in MainActivity.kt:

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

// ...

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

2. Add intent-filter to your Checkout activity (for standalone components):

<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>

3. Add returnURL handler for standalone redirect components in MainActivity.kt:

import android.content.Intent

// ...

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

4. Ensure your app theme extends Theme.MaterialComponents:

<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).

During onSubmit(data, component, extras) pass "returnUrl": data.returnUrl to make \payments API call.

To make \sessions API call use AdyenDropIn.getReturnURL() to fetch returnUrl.

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.