{"id":22170173,"url":"https://github.com/adyen/adyen-react-native","last_synced_at":"2026-01-16T11:54:35.737Z","repository":{"id":37086041,"uuid":"419645479","full_name":"Adyen/adyen-react-native","owner":"Adyen","description":"Adyen React Native","archived":false,"fork":false,"pushed_at":"2025-05-15T18:06:58.000Z","size":66213,"stargazers_count":58,"open_issues_count":45,"forks_count":40,"subscribers_count":17,"default_branch":"develop","last_synced_at":"2025-05-15T19:24:07.697Z","etag":null,"topics":["adyen","adyen-dropin","adyen-ios","drop-in","payment-integration","payments"],"latest_commit_sha":null,"homepage":"https://docs.adyen.com/checkout","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adyen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-21T08:41:02.000Z","updated_at":"2025-05-15T18:07:01.000Z","dependencies_parsed_at":"2023-10-16T02:27:20.283Z","dependency_job_id":"caf5fd12-f7c2-4489-9880-2bcb429aee70","html_url":"https://github.com/Adyen/adyen-react-native","commit_stats":{"total_commits":371,"total_committers":13,"mean_commits":28.53846153846154,"dds":0.6415094339622642,"last_synced_commit":"615fb69d9cfaed7be8e6532194fffa57f573d801"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Fadyen-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Fadyen-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Fadyen-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adyen%2Fadyen-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adyen","download_url":"https://codeload.github.com/Adyen/adyen-react-native/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adyen","adyen-dropin","adyen-ios","drop-in","payment-integration","payments"],"created_at":"2024-12-02T06:39:23.027Z","updated_at":"2026-01-16T11:54:30.695Z","avatar_url":"https://github.com/Adyen.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/@adyen/react-native.svg?style=flat-square)](https://www.npmjs.com/package/@adyen/react-native)\n[![Adyen iOS](https://img.shields.io/badge/ios-v5.14.0-brightgreen.svg)](https://github.com/Adyen/adyen-ios/releases/tag/5.14.0)\n[![Adyen Android](https://img.shields.io/badge/android-v5.8.0-brightgreen.svg)](https://github.com/Adyen/adyen-android/releases/tag/5.8.0)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=Adyen_adyen-react-native\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=Adyen_adyen-react-native)\n\n\u003e [!Note]\n\u003e\n\u003e For compatibility with officially unsupported versions below v0.74 check [this document](docs/Compatibility.md).\n\n![React Native Logo](https://user-images.githubusercontent.com/2648655/198584674-f0c46e71-1c21-409f-857e-77acaa4daae0.png)\n\n# Adyen React Native\n\nAdyen 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.\n\nYou can integrate with Adyen React Native in two ways:\n\n- [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.\n- [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.\n\n## Contributing\n\nWe strongly encourage you to contribute to our repository. Find out more in our [contribution guidelines](https://github.com/Adyen/.github/blob/master/CONTRIBUTING.md)\n\n## Prerequisites\n\n* [Adyen test account](https://www.adyen.com/signup)\n* [API key](https://docs.adyen.com/development-resources/how-to-get-the-api-key)\n* [Client key](https://docs.adyen.com/development-resources/client-side-authentication#get-your-client-key)\n\n## Integration\n\nAdd `@adyen/react-native` to your react-native project.\n```bash\nyarn add @adyen/react-native\n```\n\n## Expo integration (experimental)\n\n\u003e ❕ Please pay attention that this library is not compatible with ExpoGo. You can use it only with **Expo managed workflow**.\n\nAdd `@adyen/react-native` plugin to your `app.json`;\n\n```js\n{\n  \"expo\": {\n    \"plugins\": [\"@adyen/react-native\"]\n  }\n}\n\n```\n\n\u003e In case you are facing issues with the plugin, please pre-build your app and investigate the files generated:\n\u003e\n\u003e ```bash\n\u003e npx expo prebuild --clean\n\u003e ```\n\n### Expo plugin configuration\n\n#### merchantIdentifier\n\nSets ApplePay Merchant ID to your iOS app's entitlment file. Empty by default.\n\n#### useFrameworks\n\nAdjust `import` on iOS in case your `Podfile` have `use_frameworks!` enabled.\n\n#### Example\n\n```js\n{\n  \"expo\": {\n    \"plugins\": [\n      [\n        \"@adyen/react-native\",\n        {\n          \"merchantIdentifier\": \"merchant.com.my-merchant-id\",\n          \"useFrameworks\": true\n        }\n      ]\n    ]\n  }\n}\n```\n\n## Manual Integration\n\n### iOS integration\n\n1. run `pod install`\n2. add return URL handler to your `AppDelegate.m(m)`\n```objc\n#import \u003cadyen-react-native/ADYRedirectComponent.h\u003e\n\n...\n\n- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options {\n  return [ADYRedirectComponent applicationDidOpenURL:url];\n}\n```\n\nFor Swift:\n\n```swift\nimport Adyen\n\n...\n\nfunc application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey: Any] = [:]) -\u003e Bool {\n    return RedirectComponent.applicationDidOpen(from: url)\n}\n```\n\nIn case you are using `RCTLinkingManager` or other deep-linking techniques, place `ADYRedirectComponent.applicationDidOpenURL` before them.\n\n```objc\n- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options {\n  return [ADYRedirectComponent applicationDidOpenURL:url] || [RCTLinkingManager application:application openURL:url options:options];\n}\n```\n\nFor Universal Link support, use:\n```objc\n- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray\u003cid\u003cUIUserActivityRestoring\u003e\u003e * _Nullable))restorationHandler {\n  if ([[userActivity activityType] isEqualToString:NSUserActivityTypeBrowsingWeb]) {\n   NSURL *url = [userActivity webpageURL];\n    if (![url isEqual:[NSNull null]] \u0026\u0026 [ADYRedirectComponent applicationDidOpenURL:url]) {\n      return YES;\n    }\n  }\n  return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];\n}\n```\n\n\u003e ❕ If your `Podfile` has `use_frameworks!`, then change import path in `AppDelegate.m(m)` to use underscore(`_`) instead of hyphens(`-`):\n\u003e \n\u003e ```objc\n\u003e #import \u003cadyen_react_native/ADYRedirectComponent.h\u003e\n\u003e ```\n\n3. Add [custom URL Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) to your app.\n\n#### For ApplePay\n\nFollow general [Enable ApplePay for iOS](https://docs.adyen.com/payment-methods/apple-pay/enable-apple-pay?tab=i_os_2) guide.\n\n### Android integration\n\n1. Provide your Checkout activity to `AdyenCheckout` in `MainActivity.java`.\n```java\nimport com.adyenreactnativesdk.AdyenCheckout;\nimport android.os.Bundle;\n\n...\n\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n  super.onCreate(null);\n  AdyenCheckout.setLauncherActivity(this);\n}\n```\n\n##### For standalone components\n\n1. Add `intent-filter` to your Checkout activity:\n```xml\n\u003cintent-filter\u003e\n    \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n    \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n    \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n    \u003cdata android:scheme=\"myapp\" android:path=\"/payment\" /\u003e\n\u003c/intent-filter\u003e\n```\n\n2. To enable standalone redirect components, return URL handler to your Checkout activity `onNewIntent` in `MainActivity.java`:\n```java\nimport android.content.Intent;\n\n...\n\n@Override\npublic void onNewIntent(Intent intent) {\n    super.onNewIntent(intent);\n    AdyenCheckout.handleIntent(intent);\n}\n```\n\n3. To enable GooglePay, pass state to your Checkout activity `onActivityResult` in `MainActivity.java`:\n```java\n@Override\npublic void onActivityResult(int requestCode, int resultCode, Intent data) {\n  super.onActivityResult(requestCode, resultCode, data);\n  AdyenCheckout.handleActivityResult(requestCode, resultCode, data);\n}\n```\n\n4. Make sure your main app theme is decendent of `Theme.MaterialComponents`.\n\n```xml\n  \u003cstyle name=\"AppTheme\" parent=\"Theme.MaterialComponents.DayNight.NoActionBar\"\u003e\n    \u003c!-- Your configuration here --\u003e\n  \u003c/style\u003e\n```\n\n## Usage\n\nFor general understanding of how prebuilt UI components of Adyen work you can follow [our documentation](https://docs.adyen.com/online-payments/prebuilt-ui).\n\n### Configuration\n\nTo read more about other configuration, see the [full list][configuration].\nExample of required configuration:\n\n```typescript\nimport { Configuration } from '@adyen/react-native';\n\nconst configuration: Configuration = {\n  environment: 'test', // When you're ready to accept real payments, change the value to a suitable live environment.\n  clientKey: '{YOUR_CLIENT_KEY}',\n  countryCode: 'NL',\n  amount: { currency: 'EUR', value: 1000 }, // Value in minor units\n  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.\n};\n```\n\n### Opening Payment component\n\nTo use `@adyen/react-native` you can use our helper component `AdyenCheckout` and helper functions from `useAdyenCheckout` with standalone component:\n\n```javascript\nimport { useAdyenCheckout } from '@adyen/react-native';\n\nconst MyCheckoutView = () =\u003e {\n  const { start } = useAdyenCheckout();\n\n  return (\n    \u003cButton\n      title=\"Open DropIn\"\n      onPress={() =\u003e {\n        start('dropIn');\n      }}\n    /\u003e\n  );\n};\n```\n\n#### Sessions flow\n\n```javascript\nimport { AdyenCheckout } from '@adyen/react-native';\nimport { useCallback } from 'react';\n\n  const onComplete = useCallback( (result, nativeComponent ) =\u003e {\n    /* When this callbeck executed, you must call `component.hide(true | false)` to dismiss the payment UI. */\n  }, [some, dependency]);\n  const onError = useCallback( (error, component) =\u003e {\n    /* Handle errors or termination by shopper */\n    /* When the API request is completed, you must now call `component.hide(false)` to dismiss the payment UI. */\n  }, []);\n\n\u003cAdyenCheckout\n  config={configuration}\n  session={session}\n  onComplete={onComplete}\n  onError={onError}\n\u003e\n  \u003cMyCheckoutView /\u003e\n\u003c/AdyenCheckout\u003e;\n```\n\n#### Advanced flow\n\n```javascript\nimport { AdyenCheckout } from '@adyen/react-native';\nimport { useCallback } from 'react';\n\n  const onSubmit = useCallback( (data, nativeComponent ) =\u003e {\n    /* Call your server to make the `/payments` request, make sure you pass `returnUrl:data.returnUrl` to make redirect flow work cross platform */\n    /* When the API request contains `action`, you should call `component.handle(response.action)` to dismiss the payment UI. */\n    /* When the API request is completed, you must now call `component.hide(true | false)` to dismiss the payment UI. */\n  }, [some, dependency]);\n  const onAdditionalDetails = useCallback( (paymentData, component) =\u003e {\n    /* Call your server to make the `/payments/details` request */\n    /* When the API request is completed, you must now call `component.hide(true | false)` to dismiss the payment UI. */\n  }, []);\n  const onError = useCallback( (error, component) =\u003e {\n    /* Handle errors or termination by shopper */\n    /* When the API request is completed, you must now call `component.hide(false)` to dismiss the payment UI. */\n  }, []);\n\n\u003cAdyenCheckout\n  config={configuration}\n  paymentMethods={paymentMethods}\n  onSubmit={onSubmit}\n  onAdditionalDetails={onAdditionalDetails}\n  onError={onError}\n\u003e\n  \u003cMyCheckoutView /\u003e\n\u003c/AdyenCheckout\u003e;\n```\n\n### Handling Actions\n\nSome 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.\n\n```javascript\nconst handleSubmit = (paymentData, nativeComponent) =\u003e {\n  server.makePayment(paymentData)\n    .then((response) =\u003e {\n      if (response.action) {\n        nativeComponent.handle(response.action);\n      } else {\n        nativeComponent.hide(response.result);\n      }\n    });\n};\n\n\u003cAdyenCheckout\n  ...\n  onSubmit={handleSubmit}\n  \u003e\n    ...\n\u003c/AdyenCheckout\u003e\n```\n\n#### Standalone Action handling\n\nIn case of API-only integration `AdyenAction.handle` could be used.\nBefore you begin, make sure you follow all [iOS integration](#ios-integration) and [Android integration](#android-integration) steps.\n\nExample:\n```js\nimport { AdyenAction } from '@adyen/react-native';\n\nconst data = await AdyenAction.handle(apiResponse.action, { environment: 'test', clientKey: '{YOUR_CLIENT_KEY}');\nresult = await ApiClient.paymentDetails(data);\n```\n\n## Documentation\n\n- [Configuration][configuration]\n- [Localization][localization]\n- [UI Customization][customization]\n- [Error codes](/docs/Error%20codes.md)\n- [Drop-in documentation][adyen-docs-dropin]\n- [Component documentation][adyen-docs-components]\n\n## Support\n\nIf 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: support@adyen.com\n\n## License\n\nMIT license. For more information, see the LICENSE file.\n\n[client.key]: https://docs.adyen.com/online-payments/android/drop-in#client-key\n[configuration]: /docs/Configuration.md\n[localization]: /docs/Localization.md\n[customization]: /docs/Customization.md\n[adyen-docs-dropin]: https://docs.adyen.com/online-payments/react-native/drop-in\n[adyen-docs-components]: https://docs.adyen.com/online-payments/react-native/components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen%2Fadyen-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadyen%2Fadyen-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen%2Fadyen-react-native/lists"}