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:
We strongly encourage you to contribute to our repository. Find out more in our contribution guidelines
Add @adyen/react-native
to your react-native project.
yarn add @adyen/react-native
❕ 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
Sets ApplePay Merchant ID to your iOS app's entitlment file. Empty by default.
Adjust import
on iOS in case your Podfile
have use_frameworks!
enabled.
{
"expo": {
"plugins": [
[
"@adyen/react-native",
{
"merchantIdentifier": "merchant.com.my-merchant-id",
"useFrameworks": true
}
]
]
}
}
pod install
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];
}
In case you are using RCTLinkingManager
or other deep-linking techniques, place ADYRedirectComponent.applicationDidOpenURL
before them.
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
return [ADYRedirectComponent applicationDidOpenURL:url] || [RCTLinkingManager application:application openURL:url options:options];
}
For Universal Link support, use:
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
if ([[userActivity activityType] isEqualToString:NSUserActivityTypeBrowsingWeb]) {
NSURL *url = [userActivity webpageURL];
if (![url isEqual:[NSNull null]]) {
return [ADYRedirectComponent applicationDidOpenURL:url];
}
}
return [super application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}
❕ If your
Podfile
hasuse_frameworks!
, then change import path inAppDelegate.m(m)
to use underscore(_
) instead of hyphens(-
):#import <adyen_react_native/ADYRedirectComponent.h>
Follow general Enable ApplePay for iOS guide.
AdyenCheckout
in MainActivity.java
.import com.adyenreactnativesdk.AdyenCheckout;
import android.os.Bundle;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
AdyenCheckout.setLauncherActivity(this);
}
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:scheme="myapp" android:path="/payment" />
</intent-filter>
onNewIntent
in MainActivity.java
:import android.content.Intent;
...
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
AdyenCheckout.handleIntent(intent);
}
onActivityResult
in MainActivity.java
:@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
AdyenCheckout.handleActivityResult(requestCode, resultCode, data);
}
Theme.MaterialComponents
. <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Your configuration here -->
</style>
For general understanding of how prebuilt UI components of Adyen work you can follow our documentation.
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.
};
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 onComplete = useCallback( (result, nativeComponent ) => {
/* When this callbeck executed, you must call `component.hide(true | false)` to dismiss the payment UI. */
}, [some, dependency]);
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}
session={session}
onComplete={onComplete}
onError={onError}
>
<MyCheckoutView />
</AdyenCheckout>;
import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';
const onSubmit = useCallback( (data, nativeComponent ) => {
/* Call your server to make the `/payments` request, make sure you pass `returnUrl:data.returnUrl` to make redirect flow work cross platform */
/* 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>;
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 chalanges, 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>
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);
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.