# react-native-adyen-dropin React Native bridge for Adyen drop-in 🍏 Adyen iOS SDK v4.8.0 🤖 Adyen Android SDK v4.7.1 ## Installation ```sh yarn add @ancon/react-native-adyen-dropin ``` ### Android Add Kotlin v1.5 as a dependency in `android/build.gradle`: ```diff 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` ```diff 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`: ```diff - ``` Also update `theme` in `/android/app/src/main/AndroidManifest.xml`: ```diff + android:theme="@style/CustomAppTheme"> ``` Add the following into `onCreate()` in `MainApplication.java`: ```diff +import static com.reactnativeadyendropin.AdyenDropIn.setup; // ... @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); + setup(this); } ``` ### iOS Install pods: ```sh cd ios && pod install ``` Add this to your project's swift file to be able to handle redirect actions (or create one and generate a bridging header file): ```swift import Foundation import Adyen @objc class AdyenObjectiveCBridge: NSObject { @objc(applicationDidOpenURL:) static func applicationDidOpen(_ url: URL) -> Bool { let adyenHandled = RedirectComponent.applicationDidOpen(from : url) return adyenHandled } } ``` ## Usage See example at `example/src/App.tsx` ```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); }); } } // ... ``` ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT