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.

Contributing

We strongly encourage you to contribute to our repository. Find out more in our contribution guidelines

Requirements

Drop-in and Components require a client key, that should be provided in the Configuration.

Installation

Add @adyen/react-native to your react-native project.

yarn add @adyen/react-native

Expo integration (experimental)

❕ Please pay attention that this library is not compatible with ExpoGo. You can use it only with Expo managed workflow.

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

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

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

npx expo prebuild --clean

iOS integration

1. run pod install
2. add return URL handler to your AppDelegate.m(m)

#import <adyen-react-native/ADYRedirectComponent.h>

...

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [ADYRedirectComponent applicationDidOpenURL:url];
}

❕ If your Podfile has use_frameworks!, then change import path in AppDelegate.m(m) to use underscore(_) instead of hyphens(-):

#import <adyen_react_native/ADYRedirectComponent.h>

3. Add custom URL Scheme to your app.

For ApplePay

Follow general Enable ApplePay for iOS guide.

Android integration

1. Add AdyenCheckoutService to manifest (AndroidManifest.xml):

<service android:name="com.adyenreactnativesdk.component.dropin.AdyenCheckoutService" android:exported="false" />

2. Provide your Checkout activity to AdyenCheckout in MainActivity.java.

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

...

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
  AdyenCheckout.setLauncherActivity(this);
}

For standalone components

1. Provide rootProject.ext.adyenReactNativeRedirectScheme to your App's manifests. To do so, add following to your App's build.gradle defaultConfig

defaultConfig {
    ...
    manifestPlaceholders = [redirectScheme: rootProject.ext.adyenReactNativeRedirectScheme]
}

2. Add intent-filter to your Checkout activity:

<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:host="${applicationId}" android:scheme="${redirectScheme}" />
</intent-filter>

3. To enable standalone redirect components, return URL handler to your Checkout activity onNewIntent in MainActivity.java:

import android.content.Intent;

...

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    AdyenCheckout.handleIntent(intent);
}

4. To enable GooglePay, pass state to your Checkout activity onActivityResult in MainActivity.java:

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  AdyenCheckout.handleActivityResult(requestCode, resultCode, data);
}

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', // Custom URL scheme of your iOS app. This value is overridden for Android by `AdyenCheckout`. You can also send this property from your backend.
};

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');
      }}
    />
  );
};

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

  const onSubmit = useCallback( (data, nativeComponent ) => {
    /* Call your server to make the `/payments` request */
    /* When the API request contains `action`, you should call `component.handle(response.action)` to dismiss the payment UI. */
    /* When the API request is completed, you must now call `component.hide(true | false)` to dismiss the payment UI. */
  }, [some, dependency]);
  const onAdditionalDetails = useCallback( (paymentData, component) => {
    /* Call your server to make the `/payments/details` request */
    /* When the API request is completed, you must now call `component.hide(true | false)` to dismiss the payment UI. */
  }, []);
  const onError = useCallback( (error, component) => {
    /* Handle errors or termination by shopper */
    /* When the API request is completed, you must now call `component.hide(false)` to dismiss the payment UI. */
  }, []);

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

Handling Actions

❗ Native components only handling actions after payment was started(nativeComponent.open) and before it was hidden(nativeComponent.hide). Handling of actions on its own is not supported

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

Documentation

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

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.

License

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