Package Exports

@adyen/react-native
@adyen/react-native/lib/commonjs/index.js
@adyen/react-native/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@adyen/react-native) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Checkout_react_native_beta

Adyen Checkout React Native SDK [BETA]

React native wrapper for native iOS and Android Adyen Components. This library allows you to accept in-app payments by providing you with the building blocks you need to create a checkout experience.

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

run pod install
add return URL and


@import AdyenReactNative;

...

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

Android integration

Add AdyenDropInService to manifest:

<service android:name="com.adyenreactnativesdk.AdyenDropInService" android:permission="android.permission.BIND_JOB_SERVICE"/>

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', // live, live-us, live-au
  channel: channel, // iOS, Android. Added automatically by AdyenPaymentProvider
  clientKey: '{YOUR_CLIENT_KEY}',
  countryCode: 'NL',
  amount: { currency: 'EUR', value: 1000 },
  reference: 'React Native', // The reference to uniquely identify a payment.
  returnUrl: 'myapp://', // This value is overridden for Android DropIn
  shopperReference: 'Checkout Shopper', // Your reference to uniquely identify this shopper
  merchantAccount: '{YOUR_MERCHANT_ACCOUNT}',
  shopperLocale: 'en-US',
  additionalData: { allow3DS2: true },
};

Opening Payment component

To use @adyen/react-native you can use our helper component AdyenPaymentProvider.

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

<AdyenPaymentProvider
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={didSubmit}
  onProvide={didProvide}
  onFail={didFail}
  onComplete={didComplete}
>
  <Button
    title="Checkout"
    onPress={() => start('AdyenDropIn')}
  />
</AdyenPaymentProvider>

Or manage native events by

import { NativeModules } from 'react-native';

<Button
  title="Checkout"
  onPress={() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.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);
  }}
/>

Documentation

🚧 Work 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.