Adyen React Native [BETA]

This project is currently under development. Timelines and scope are still to be defined.

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:

• Native 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.
• Native Components: React Native wrapper for native iOS and Android Adyen Components - one Component per payment method that can be combinened 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

iOS integration

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

@import adyen_react_native;

...

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

Android integration

For Drop-In

1. Add AdyenDropInService to manifest:

<service android:name="com.adyenreactnativesdk.component.dropin.AdyenDropInService" />

For standalone components

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

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

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. Provide your Checkout activity as DropInLauncher. This will improve responsiveness of DropIn and standalone native components:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  AdyenDropInComponent.setDropInLauncher(this);
}

4. To enable standalone redirect components, return URL handler to your Checkout activity onNewIntent:

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    ActionHandler.Companion.handle(intent);
}

5. To enable GooglePay, pass state to your Checkout activity onActivityResult:

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

Usage

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

Configuration

Example of configuration properties:

const configuration = {
  environment: 'test', // When you're ready to accept live payments, change the value to one of our live environments.
  clientKey: '{YOUR_CLIENT_KEY}',
  countryCode: 'NL',
  amount: { currency: 'EUR', value: 1000 }, // Value in minor units
  reference: 'React Native', // The reference to uniquely identify a payment. Can be send from your backend
  shopperReference: 'Checkout Shopper', // Your reference to uniquely identify this shopper
  returnUrl: 'myapp://', // Custom URL scheme of your iOS app. This value is overridden for Android by `AdyenCheckout`. Can be send 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 MyChekoutView = () => {
  const { start } = useAdyenCheckout();

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

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

<AdyenCheckout
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={didSubmit}
  onProvide={didProvide}
  onFail={didFail}
  onComplete={didComplete} >
    <MyChekoutView/>
</AdyenCheckout>

Or use @adyen/react-native you can use our helper component AdyenCheckout with AdyenCheckoutContext.Consumer directly:

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

<AdyenCheckout
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={didSubmit}
  onProvide={didProvide}
  onFail={didFail}
  onComplete={didComplete} >
    <AdyenCheckoutContext.Consumer>
      {({ start }) => (
        <Button
          title="Open DropIn"
          onPress={() => { start('dropIn'); }}
        />
      )}
    </AdyenCheckoutContext.Consumer>
</AdyenCheckout>

Or manage native events manually by

import { NativeModules } from 'react-native';
const { AdyenDropIn } = NativeModules;

<Button
  title="Checkout"
  onPress={() => {
    const eventEmitter = new NativeEventEmitter(AdyenDropIn);
    this.didSubmitListener = eventEmitter.addListener('PAYMENT_SUBMIT_EVENT', onSubmit);
    this.didProvideListener = eventEmitter.addListener('PAYMENT_PROVIDE_DETAILS_EVENT', onProvide);
    this.didCompleteListener = eventEmitter.addListener('PAYMENT_COMPLETED_EVENT', onComplete);
    this.didFailListener = eventEmitter.addListener('PAYMENT_FAILED_EVENT', onFail);

    AdyenDropIn.open(paymentMethods, configuration);
  }}
/>

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 = (payload, nativeComponent) => {
  server.makePayment(payload)
    .then((result) => {
      if (result.action) {
        nativeComponent.handle(result.action);
      } else {
        // process result
      }
    });
};

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

Or call .handle(action) on a Native Module you are working with:

import { NativeModules } from 'react-native';
const { AdyenDropIn } = NativeModules;

AdyenDropIn.handle(action);

Documentation

• Configuration
• Error codes

🚧 ** Adyen Docs documentation in progress**

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.