> [!Important]
> React Native New Architecture Support

>
> The New Architecture for React Native is exclusively supported on versions 0.76.0 and above.
>
> For projects using versions lower than 0.76.0, please:
>
> * Continue utilizing the Old Architecture.
> * Alternatively, disable bridgeless mode by setting load(bridgelessEnabled=false).

> [!Note]
>
> For compatibility with officially unsupported versions below v0.74 check this document.

!React Native Logo

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: 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: 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

Prerequisites

* Adyen test account
* API key
* Client key

Integration

Add @adyen/react-native to your react-native project.
``bash
yarn add @adyen/react-native
`

Expo integration

> [!IMPORTANT]
>
> This library is not compatible with Expo Go. It is designed exclusively for use with the Continuous Native Generation.

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

$3

Sets ApplePay Merchant ID to your iOS app's entitlment file. Empty by default.

$3

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 to your app.

$3

Follow general Enable ApplePay for iOS 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);
}
`

$3

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

`

Usage

For general understanding of how prebuilt UI components of Adyen work you can follow our documentation.

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', // See description below.
};
`

$3

> [!IMPORTANT]
>
> On config use a custom URL scheme or App/Universal link of your app(s).

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 (
title="Open DropIn"
onPress={() => {
start('dropIn');
}}
/>
);
};
`

$3

`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. /
}, []);

config={configuration}
session={session}
onComplete={onComplete}
onError={onError}
>

;
`

$3

`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. /
}, []);

config={configuration}
paymentMethods={paymentMethods}
onSubmit={onSubmit}
onAdditionalDetails={onAdditionalDetails}
onError={onError}
>

;
`

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);
}
});
};

...
onSubmit={handleSubmit}
>
...

`

$3

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:
`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
- [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 or via email: support@adyen.com

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