Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@adyen/react-native
Advanced tools
Wraps Adyen Checkout Drop-In and Components for iOS and Android for convenient use with React Native
[!NOTE] Google will introduce new target API level requirements for Google Play apps starting August 31 2024.
For React-Native 73+ no action needed.
For React-Native 72:
- update Android compileTarget to 34 in
android/build.gradle
- set
classpath("com.android.tools.build:gradle:8.1.4")
inandroid/build.gradle
- enable
buildConfig
inandroid/app/build.gradle
by addingandroid.buildFeatures.buildConfig = true
For React-Native before 72:
- update Android compileTarget to 34 in
android/build.gradle
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]] && [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>
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 via Customer Area or via email: support@adyen.com
MIT license. For more information, see the LICENSE file.
FAQs
Wraps Adyen Checkout Drop-In and Components for iOS and Android for convenient use with React Native
We found that @adyen/react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.