@adyen/react-native
v2.5.0
Published
Wraps Adyen Checkout Drop-In and Components for iOS and Android for convenient use with React Native
Downloads
25,978
Readme
[!Note]
For compatibility with officially unsupported versions below v0.74 check this document.
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
Prerequisites
Integration
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
Expo plugin configuration
merchantIdentifier
Sets ApplePay Merchant ID to your iOS app's entitlment file. Empty by default.
useFrameworks
Adjust import
on iOS in case your Podfile
have use_frameworks!
enabled.
Example
{
"expo": {
"plugins": [
[
"@adyen/react-native",
{
"merchantIdentifier": "merchant.com.my-merchant-id",
"useFrameworks": true
}
]
]
}
}
Manual Integration
iOS integration
- run
pod install
- 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];
}
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]] && [ADYRedirectComponent applicationDidOpenURL:url]) {
return YES;
}
}
return [RCTLinkingManager 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>
- Add custom URL Scheme to your app.
For ApplePay
Follow general Enable ApplePay for iOS guide.
Android integration
- Provide your Checkout activity to
AdyenCheckout
inMainActivity.java
.
import com.adyenreactnativesdk.AdyenCheckout;
import android.os.Bundle;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
AdyenCheckout.setLauncherActivity(this);
}
For standalone components
- 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:scheme="myapp" android:path="/payment" />
</intent-filter>
- To enable standalone redirect components, return URL handler to your Checkout activity
onNewIntent
inMainActivity.java
:
import android.content.Intent;
...
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
AdyenCheckout.handleIntent(intent);
}
- To enable GooglePay, pass state to your Checkout activity
onActivityResult
inMainActivity.java
:
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
AdyenCheckout.handleActivityResult(requestCode, resultCode, data);
}
- Make sure your main app theme is decendent of
Theme.MaterialComponents
.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Your configuration here -->
</style>
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');
}}
/>
);
};
Sessions flow
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>;
Advanced flow
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>;
Handling Actions
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>
Standalone Action handling
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);
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 via Customer Area or via email: [email protected]
License
MIT license. For more information, see the LICENSE file.