https://github.com/adyen/adyen-react-native
Adyen React Native
https://github.com/adyen/adyen-react-native
adyen adyen-dropin adyen-ios drop-in payment-integration payments
Last synced: 18 days ago
JSON representation
Adyen React Native
- Host: GitHub
- URL: https://github.com/adyen/adyen-react-native
- Owner: Adyen
- License: mit
- Created: 2021-10-21T08:41:02.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2025-05-15T18:06:58.000Z (19 days ago)
- Last Synced: 2025-05-15T19:24:07.697Z (19 days ago)
- Topics: adyen, adyen-dropin, adyen-ios, drop-in, payment-integration, payments
- Language: Kotlin
- Homepage: https://docs.adyen.com/checkout
- Size: 63.1 MB
- Stars: 58
- Watchers: 17
- Forks: 40
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@adyen/react-native)
[](https://github.com/Adyen/adyen-ios/releases/tag/5.14.0)
[](https://github.com/Adyen/adyen-android/releases/tag/5.8.0)
[](https://sonarcloud.io/summary/new_code?id=Adyen_adyen-react-native)
> [!Note]
>
> For compatibility with officially unsupported versions below v0.74 check [this document](docs/Compatibility.md).
# 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](adyen-docs-dropin): 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](adyen-docs-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](https://github.com/Adyen/.github/blob/master/CONTRIBUTING.md)
## Prerequisites
* [Adyen test account](https://www.adyen.com/signup)
* [API key](https://docs.adyen.com/development-resources/how-to-get-the-api-key)
* [Client key](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key)
## Integration
Add `@adyen/react-native` to your react-native project.
```bash
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`;
```js
{
"expo": {
"plugins": ["@adyen/react-native"]
}
}
```
> In case you are facing issues with the plugin, please pre-build your app and investigate the files generated:
>
> ```bash
> 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
```js
{
"expo": {
"plugins": [
[
"@adyen/react-native",
{
"merchantIdentifier": "merchant.com.my-merchant-id",
"useFrameworks": true
}
]
]
}
}
```
## Manual Integration
### iOS integration
1. run `pod install`
2. add return URL handler to your `AppDelegate.m(m)`
```objc
#import
...
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options {
return [ADYRedirectComponent applicationDidOpenURL:url];
}
```
For Swift:
```swift
import Adyen
...
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey: Any] = [:]) -> Bool {
return RedirectComponent.applicationDidOpen(from: url)
}
```
In case you are using `RCTLinkingManager` or other deep-linking techniques, place `ADYRedirectComponent.applicationDidOpenURL` before them.
```objc
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options {
return [ADYRedirectComponent applicationDidOpenURL:url] || [RCTLinkingManager application:application openURL:url options:options];
}
```
For Universal Link support, use:
```objc
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray> * _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` has `use_frameworks!`, then change import path in `AppDelegate.m(m)` to use underscore(`_`) instead of hyphens(`-`):
>
> ```objc
> #import
> ```
3. Add [custom URL Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) to your app.
#### For ApplePay
Follow general [Enable ApplePay for iOS](https://docs.adyen.com/payment-methods/apple-pay/enable-apple-pay?tab=i_os_2) guide.
### Android integration
1. Provide your Checkout activity to `AdyenCheckout` in `MainActivity.java`.
```java
import com.adyenreactnativesdk.AdyenCheckout;
import android.os.Bundle;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
AdyenCheckout.setLauncherActivity(this);
}
```
##### For standalone components
1. Add `intent-filter` to your Checkout activity:
```xml
```
2. To enable standalone redirect components, return URL handler to your Checkout activity `onNewIntent` in `MainActivity.java`:
```java
import android.content.Intent;
...
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
AdyenCheckout.handleIntent(intent);
}
```
3. To enable GooglePay, pass state to your Checkout activity `onActivityResult` in `MainActivity.java`:
```java
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
AdyenCheckout.handleActivityResult(requestCode, resultCode, data);
}
```
4. Make sure your main app theme is decendent of `Theme.MaterialComponents`.
```xml
<!-- Your configuration here -->
```
## Usage
For general understanding of how prebuilt UI components of Adyen work you can follow [our documentation](https://docs.adyen.com/online-payments/prebuilt-ui).
### Configuration
To read more about other configuration, see the [full list][configuration].
Example of required configuration:
```typescript
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:
```javascript
import { useAdyenCheckout } from '@adyen/react-native';
const MyCheckoutView = () => {
const { start } = useAdyenCheckout();
return (
{
start('dropIn');
}}
/>
);
};
```
#### Sessions flow
```javascript
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. */
}, []);
;
```
#### Advanced flow
```javascript
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. */
}, []);
;
```
### 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.
```javascript
const handleSubmit = (paymentData, nativeComponent) => {
server.makePayment(paymentData)
.then((response) => {
if (response.action) {
nativeComponent.handle(response.action);
} else {
nativeComponent.hide(response.result);
}
});
};
...
```
#### Standalone Action handling
In case of API-only integration `AdyenAction.handle` could be used.
Before you begin, make sure you follow all [iOS integration](#ios-integration) and [Android integration](#android-integration) steps.
Example:
```js
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
- [Configuration][configuration]
- [Localization][localization]
- [UI Customization][customization]
- [Error codes](/docs/Error%20codes.md)
- [Drop-in documentation][adyen-docs-dropin]
- [Component documentation][adyen-docs-components]
## 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](https://ca-live.adyen.com/ca/ca/contactUs/support.shtml) or via email: [email protected]
## License
MIT license. For more information, see the LICENSE file.
[client.key]: https://docs.adyen.com/online-payments/android/drop-in#client-key
[configuration]: /docs/Configuration.md
[localization]: /docs/Localization.md
[customization]: /docs/Customization.md
[adyen-docs-dropin]: https://docs.adyen.com/online-payments/react-native/drop-in
[adyen-docs-components]: https://docs.adyen.com/online-payments/react-native/components