Adyen React Native Online Payments

Accept payments on your React Native-based apps with cards, wallets, and key local payment methods
Alternatives To Adyen React Native Online Payments
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Card11,52679169 hours ago38August 14, 202163mitSCSS
:credit_card: make your credit card form better in one line of code
React Interactive Paycard2,175
3 months ago13mitJavaScript
Interactive React Paycard
Stripe Ios1,818
4432 hours ago137August 16, 202275mitSwift
Stripe iOS SDK
React Native Credit Card Input1,341822a year ago13December 26, 2017107mitJavaScript
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!
Stripe Android1,07829833 hours ago174July 06, 202284mitKotlin
Stripe Android SDK
Elements Examples919
2 years ago1mitHTML
Stripe Elements examples.
43 years ago18October 22, 201819mitSwift
A Payment Card UI & Validator for iOS
Wechat Jssdk6041672 years ago60September 18, 202114mitJavaScript
🐧WeChat JS-SDK integration with NodeJS
Angular Payments566
3 years ago1February 14, 201672HTML
Module that provides AngularJS-directives for formatting, validating and working with payments
Payment521295754 months ago40August 14, 202122mitCoffeeScript
:moneybag: A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.
Alternatives To Adyen React Native Online Payments
Select To Compare

Alternative Project Comparisons

Adyen online payment integration for React Native

This repository includes examples of React Native application integrations for online payments with Adyen. Within this demo app, you'll find a simplified version of an e-commerce cart and checkout, complete with commented code to highlight key features and concepts of Adyen's API. Have a look at the underlying code to see how you can integrate Adyen in your Android/iOS/PWA application to give your shoppers the option to pay with their preferred payment methods, all in a seamless checkout experience. The integration is done using React Native.

Pay by Link demo

Supported Demo Integrations

Make sure the payment methods you want to use in the demo are enabled for your account. Refer to the documentation to add missing payment methods.

Demos of the following client-side integrations are currently available in this repository:

  • Pay by Link

    • [x] Ideal
    • [x] Credit card
    • [x] Credit card 3DS2
    • [x] PaySafeCard
    • [x] Klarna Pay later

Note: You need to setup a webhook if you want to handle the results from Pay by Link.

  • API only

    • [x] Ideal
    • [x] Credit card [PCI compliant only. Contact support for details]

The demo leverages Adyen's API Library for Node.js (GitHub | Docs) on the server side.


  • NodeJS v12+
  • NPM v6+
  • Android/iOS device with Expo app installed or Android/iOS emulator

Installation & Usage

  1. Clone this repo:
git clone
  1. Navigate to the root directory and install dependencies:
npm install
  1. Create a ./.env file with your API key, Client Key, and merchant account name (all credentials are in string format):
  1. Start the backend server:

This will start the express server and print out the server URL

npm run server
  1. Copy the server URL and set it as SERVER_URL in src/store/PaymentSlice.js, it is the IP of the machine where you started the express backend server with npm run server. It will be the same IP used by Expo to run the React Native application as well when you run the next step

  2. Open another terminal to the same location and start the React Native application using Expo. You can run the command appropriate for the platform you like

npm run android
# or
npm run ios
# or
npm run web
  1. Follow the instructions on terminal to open the application in your Device/Emulator

To try out integrations with test card numbers and payment method details, see Test card numbers.

Customize the payment page created by Pay by Link

You can customize the payment form with your brand name, logo, and a background color.

  1. Log in to your Customer Area.
  2. Select Account. Under Configure, select Pay by Link.
  3. Select the web service user.
  4. Add a display name, upload a brand logo, and set a background color.
  5. You will receive a confirmation that the payment form has been updated.


We commit all our new features directly into our GitHub repository. Feel free to request or suggest new features or code changes yourself as well!


MIT license. For more information, see the LICENSE file in the root directory.

Popular Payment Projects
Popular Card Projects
Popular Economics Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.