[DEPRECATED] Use Adyen's official React Native implementation instead! https://github.com/Adyen/adyen-react-native
React Native bridge for Adyen drop-in
🍏 Adyen iOS SDK v4.8.0 🤖 Adyen Android SDK v4.7.1
yarn add @ancon/react-native-adyen-dropinAdd Kotlin v1.5 as a dependency in android/build.gradle:
buildscript {
ext {
buildToolsVersion = "30.0.0"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
+ kotlinVersion = "1.5.31"
}Add Kotlin as a dependency in android/app/build.gradle
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation("com.facebook.react:react-native:+")
+ implementation("org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion")
}Replace name in /android/app/src/main/res/values/styles.xml:
<resources>
<!-- Base application theme. -->
- <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+ <style name="CustomAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
</resources>Also update theme in /android/app/src/main/AndroidManifest.xml:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.reactnativeadyendropin">
<application
- android:theme="@style/AppTheme">
+ android:theme="@style/CustomAppTheme">Add the following into onCreate() in MainApplication.java:
+import static com.reactnativeadyendropin.AdyenDropIn.setup;
// ...
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+ setup(this);
}Install pods:
cd ios && pod installAdd this to your project's swift file to be able to handle redirect actions (or create one and generate a bridging header file):
import Foundation
import Adyen
@objc class AdyenObjectiveCBridge: NSObject {
@objc(applicationDidOpenURL:)
static func applicationDidOpen(_ url: URL) -> Bool {
let adyenHandled = RedirectComponent.applicationDidOpen(from : url)
return adyenHandled
}
}See example at example/src/App.tsx
import AdyenDropIn, {
isCancelledError,
isSuccessResult,
PaymentResult,
} from '@ancon/react-native-adyen-dropin';
// ...
async function handlePress() {
if (!loading) {
setLoading(true);
const adyenDropIn = AdyenDropIn.setModuleConfig({
// Required API base URL
baseUrl: 'http://192.168.1.74:3000/api/',
// Optional to view more native logs
debug: true,
// Optional custom headers
headers: {
Authorization: 'Bearer 123',
},
// Optional custom endpoints
endpoints: {
makePayment: '/payments',
makeDetailsCall: '/details',
},
}).setDropInConfig({
// Required
clientKey: config.clientKey,
// Required
environment: config.environment,
// Required
countryCode: config.countryCode,
// Required
amount: { value: 100, currencyCode: 'SEK' },
// Optional
applePay: {
label: 'Example Company',
amount: { value: 1, currencyCode: 'SEK' },
configuration: {
merchantId: config.applePay?.configuration?.merchantId,
},
},
// Optional
showRemovePaymentMethodButton: config.showRemovePaymentMethodButton,
// Optional, required for recurring payments/saved payment method
shopperReference: config.shopperReference,
});
// Fetch payment methods
const response = await services.getPaymentMethods();
// Start the drop-in flow
adyenDropIn
.start(response)
.then((res: PaymentResult) => {
if (isSuccessResult(res)) {
Alert.alert('Success', `Payment success: ${res.resultCode}`);
} else {
Alert.alert('Refused', `Payment refused: ${res.refusalReason}`);
}
})
.catch((err: Error) => {
if (isCancelledError(err)) {
console.log('Cancelled');
} else {
Alert.alert('Error', `Payment error: ${err.message}`);
}
})
.finally(() => {
setLoading(false);
});
}
}
// ...See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent