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.
We strongly encourage you to contribute to our repository. Find out more in our contribution guidelines
Drop-in and Components require a client key, that should be provided in the Configuration.
Add @adyen/react-native to your react-native project.
$ yarn add @adyen/react-native
- run
pod install - add return URL and
@import adyen_react_native;
...
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
return [RedirectComponentProxy proccessURL:url];
}- Add
AdyenDropInServiceto manifest:
<service android:name="com.adyenreactnativesdk.AdyenDropInService" android:permission="android.permission.BIND_JOB_SERVICE"/>
For general understanding of how prebuilt UI components of Adyen work you can follow our documentation.
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 },
};To use @adyen/react-native you can use our helper component AdyenPaymentProvider with AdyenCheckoutContext.Consumer directly:
import {
AdyenPaymentProvider,
AdyenCheckoutContext,
} from '@adyen/react-native';
<AdyenPaymentProvider
config={configuration}
paymentMethods={paymentMethods}
onSubmit={didSubmit}
onProvide={didProvide}
onFail={didFail}
onComplete={didComplete} >
<AdyenCheckoutContext.Consumer>
{({ start }) => (
<Button
title="Open DropIn"
onPress={() => { start('AdyenDropIn'); }}
/>
)}
</AdyenCheckoutContext.Consumer>
</AdyenPaymentProvider>Or use helper useAdyenCheckout with standalone component:
import { useAdyenCheckout } from '@adyen/react-native';
const MyChekoutView = () => {
const { start } = useAdyenCheckout();
return (
<Button
title="Open DropIn"
onPress={() => { start('AdyenDropIn'); }} />
);
};import { AdyenPaymentProvider } from '@adyen/react-native';
<AdyenPaymentProvider
config={configuration}
paymentMethods={paymentMethods}
onSubmit={didSubmit}
onProvide={didProvide}
onFail={didFail}
onComplete={didComplete} >
<MyChekoutView />
</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);
}}
/>🚧 Work in progress
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.
MIT license. For more information, see the LICENSE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent