react-native-adyen-payment

# Installation ## Requirements 1. React Native > 0.60 2. XCode 11 ## Getting started `$ npm install react-native-adyen-payment --save` ## Mostly automatic installation (Skip this step) `$ react-native link react-native-adyen-payment` ## Additional Setup ### iOS * Goto ProjectFolder/ios and run ```bash pod install ``` * As per the facebook RN doc, create a empty swift file in the name of your project and create the bridge in your RN project, 1. From Xcode, just go to: File → New → File… (or CMD+N) Select Swift File Name your file <YourProjectName> In the Group dropdown, make sure to select the group <YourProjectNameFolder>(Yellow Folder Icon), not the project itself(Blue XCode icon). 2. Configure the Objective-C Bridging Header After you create the Swift file, you should be prompted to choose if you want to configure an Objective-C Bridging Header. Select “Create Bridging Header”.This file is usually named YourProject-Bridging-Header.h. Don’t change this name manually, because Xcode configures the project with this exact filename. Note: There is only one Bridging Header per project, so once you have configured it, you won’t be prompted to do it again. * Within <YourProjectName.swift> empty file add the following, ```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 } } ``` * AppDelegate.m file add the below function ```objectivec #import "<yourProjectName>-Swift.h" - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options { BOOL handledAdyen =[AdyenObjectiveCBridge applicationDidOpenURL:url]; return handledAdyen; } ``` 3 . Configure info.plist with CFBundleURL for redirect URL in the PaymentData ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>YOUR_APP_BUNDLE_NAME_UNIQUE(com.xxxx.xxxx)</string> <key>CFBundleURLSchemes</key> <array> <string>YOUR_APP_URL_FOR_REDIRECT(Ex : CFBundleDisplayName-app)</string> </array> </dict> </array> ``` ### Android #### Optional Step if autolinking didn't work Open up `android/app/src/main/java/[...]/MainApplication.java` - Do this step if the Package is not added properly - Add `import com.reactlibrary.AdyenPaymentPackage;` to the imports at the top of the file - Add `new AdyenPaymentPackage()` to the list returned by the `getPackages()` method #### Change the Theme to Material Theme Add the below styles in `android/app/src/main/res/values/styles.xml` - Adyen depends on ThemedComponents or else you will end up with `Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant)` ```xml <resources>  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="android:textColor">#000000</item> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="AdyenCheckout.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox"> <item name="boxStrokeColor">@color/primaryColor</item> <item name="hintTextColor">@color/primaryColor</item> <item name="android:minHeight">@dimen/input_layout_height</item> </style> <style name="ThreeDS2Theme" parent="Theme.MaterialComponents.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> ``` #### Add to Progaurd for release If you use ProGuard or R8, the following rules should be enough to maintain all expected functionality. ```gradle -keep class com.adyen.checkout.base.model.** { *; } -keep class com.adyen.threeds2.** { *; } -keepclassmembers public class * implements com.adyen.checkout.base.PaymentComponent { public <init>(...); } ``` ### API Server Create a API Server which calls the below methods with the same EndPoint URI's. Test Env : https://checkout-test.adyen.com/v51/paymentMethods https://checkout-test.adyen.com/v51/payments https://checkout-test.adyen.com/v51/payments/details Live Env : (https://docs.adyen.com/development-resources/live-endpoints) https://[random]-[company name]-checkout-live.adyenpayments.com/checkout/[version]/[method] - [version] The service version number, always starting with "v" (for example, v49). - [method] The endpoint name. - [random] A random string of hex-encoded bytes to make the hostname unpredictable. - [company name] The company name to be included in the URL endpoint. If the name is too long, it is shortened. If the name includes underscores or hyphens, any underscores and/or hyphens are stripped. The AdyenPayment system internally calls your API base URL with the following POST endpoints which internally calls the above mentioned URL's - /paymentMethods - /payments - /payments/details Ex : Base URL : https://XXXXXX.com/payments/adyen https://XXXXXX.com/payments/adyen/paymentMethods https://XXXXXX.com/payments/adyen/payments https://XXXXXX.com/payments/adyen/payments/details Any Extra Header Parameters to be passed can be given in the "additional_http_headers" As an example we are using Adyens Demo Server Base URL var appServiceConfigData = { "environment" : "test", "base_url": "https://checkoutshopper-test.adyen.com/checkoutshopper/demoserver/", "additional_http_headers" : { "x-demo-server-api-key": DEMO_SERVER_API_KEY } :warning: When implementing the `/payments` endpoint, make sure to validate the `amount` server-side. A malicious end user could spoof requests and change the amount being send from the client. :warning: ### Apple Pay To use Apple pay, follow the [adyen documentation](https://docs.adyen.com/payment-methods/apple-pay/enable-apple-pay#create-merchant-identifier)