{"id":13544873,"url":"https://github.com/naoufal/react-native-payments","last_synced_at":"2025-05-14T11:10:58.119Z","repository":{"id":33236335,"uuid":"36880646","full_name":"naoufal/react-native-payments","owner":"naoufal","description":"Accept Payments with Apple Pay and Android Pay using the Payment Request API.","archived":false,"fork":false,"pushed_at":"2024-07-04T12:37:05.000Z","size":13594,"stargazers_count":1603,"open_issues_count":166,"forks_count":414,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-12T23:36:54.508Z","etag":null,"topics":["apple-pay","payment-request","payments","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-payments","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naoufal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-04T15:58:22.000Z","updated_at":"2025-05-11T20:37:15.000Z","dependencies_parsed_at":"2023-02-15T04:02:30.673Z","dependency_job_id":"09cc1d1a-bd59-46ec-836a-4c09a2b6f923","html_url":"https://github.com/naoufal/react-native-payments","commit_stats":{"total_commits":130,"total_committers":28,"mean_commits":4.642857142857143,"dds":0.6,"last_synced_commit":"22fbfa9f7c6d3d1f860542b494717d19ceec4357"},"previous_names":["naoufal/react-native-apple-pay"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naoufal%2Freact-native-payments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naoufal%2Freact-native-payments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naoufal%2Freact-native-payments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naoufal%2Freact-native-payments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naoufal","download_url":"https://codeload.github.com/naoufal/react-native-payments/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129489,"owners_count":22019628,"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":["apple-pay","payment-request","payments","react-native"],"created_at":"2024-08-01T11:00:54.498Z","updated_at":"2025-05-14T11:10:53.106Z","avatar_url":"https://github.com/naoufal.png","language":"JavaScript","funding_links":[],"categories":["\u003ca name=\"Network:-Native-Modules\"\u003eNetwork: Native Modules\u003c/a\u003e","Payments \u0026 Integrations"],"sub_categories":[],"readme":"# react-native-payments\n\n[![Codeship Status for freeman-industries/react-native-payments](https://app.codeship.com/projects/d6d17e65-23f0-4154-b7ce-33ce59471b08/status?branch=master)](https://app.codeship.com/projects/418096)\n\n# 🚨 Important notice 🚨\n\nThis project is no longer maintained. The good news is that the landscape of payments on React Native has massively changed in the last few years. There is still room for this repo to evolve which I'll detail below, but first I would like to direct your attention to well-funded and well-maintained alternatives that will give you fewer grey hairs.\n\n## Stripe\n- Stripe has released an official React Native SDK supporting Apple Pay that has a huge team of paid engineers behind it.\n- It has also been included in the [Expo managed environment](https://docs.expo.dev/versions/latest/sdk/stripe/), which means it works on Expo Go. Huge achievement.\n- For a bug free experience and easy integration I strongly recommend you use [@stripe/stripe-react-native](https://github.com/stripe/stripe-react-native) on any new projects.\n- More information and discussion in this issue: https://github.com/naoufal/react-native-payments/issues/335\n \n## Community forks and alternatives\n\n### Braintree\n- At time of writing, there an actively maintained Braintree RN SDK.\n- Check it out: https://github.com/ekreative/react-native-braintree\n- More information and discussion in this issue: https://github.com/naoufal/react-native-payments/issues/405\n\n### Other forks\n- Most notably there is a long running active fork of this library by Appfolio.\n- Check it out: https://github.com/appfolio/react-native-payments\n- Other projects and discussion in this issue: https://github.com/naoufal/react-native-payments/issues/406\n\n## Future of this library\n\nThe scope of this library should probably change to:\n\n- Support networks and products unavailable within Stripe\n- Stick to the principles of the PaymentRequest open interface\n\nIf you want to own that direction, please get in touch.\n\n- [@naoufal](https://twitter.com/naoufal) (project owner) on Twitter (sometimes difficult to get hold of)\n- Me, Nabs (afk maintainer) on [my LinkedIn](https://linkedin.com/in/nabilfreeman) (I also have Twitter [@NabsFreeman](https://twitter.com/NabsFreeman), but I think Elon shadowbanned me during the whole jet thing)\n\nNaoufal is the only administrator and he needs to appoint authors and maintainers. I can commit and merge PRs to help any new maintainer get started.\n\nNabs\n\nOn to the old README...\n\n# Introduction\n\nWelcome to the best and most comprehensive library for integrating payments like Apple Pay and Google Pay into your React Native app.\n\nThis library is designed to be fully compatible with React Native 0.61 and onwards.\n\n\u003cdiv\u003e\n\u003cimg width=\"200px\" src=\"https://user-images.githubusercontent.com/1627824/27758096-9fc6bf9a-5dc1-11e7-9d8f-b2d409302fc7.gif\" /\u003e\n\u003cimg width=\"200px\" src=\"https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png\" /\u003e\n\u003c/div\u003e\n\n# Installation\n\n```\nnpm install --save react-native-payments\n```\n\nYou'll need to autolink on each platform:\n\n### Android\n\n```\nnpx jetify\n```\n\n### iOS\n\n```\ncd ios\npod install\n```\n\n# Guides\n\n## Example projects\n\n- [iOS](https://github.com/freeman-industries/react-native-payments-example-ios)\n\n## Live demo\n\nFor a step by step guide, check out this talk by @naoufal.\n\nhttps://www.youtube.com/watch?v=XrmUuir9OHc\u0026t=652\n\n## API Spec\n\nDown below we have a detailed specification for PaymentRequest and instructions for configuring Apple Pay and Google Pay, which is hopefully enough to get you started.\n\nWe also have some legacy example projects in the `examples` directory that will be rewritten soon and linked above.\n\nBear with us while we organize things a bit.\n\n# Roadmap\n\n## Completed\n\n- Apple Pay Stripe\n\n## Completed, untested\n\n- Apple Pay Braintree\n- Google Pay (Stripe, Braintree)\n- Web\n\n## In progress\n\n- Stripe: Payment Intents (for SCA)\n\n## Planned\n\n- Tutorial docs\n\nNaoufal, the original author of this library, has done a lot of the hard work integrating iOS, Android, Web platforms and Stripe and Braintree gateways.\n\nThe library has fallen out of regular maintenance and we're working to test and update all parts to be compatible for RN in the 2020s.\n\nIf you're feeling brave give the untested platforms a try and let us know how it worked.\n\n# Contributors\n\nMany people have contributed to the development of `react-native-payments` over time. The people below are currently available to help.\n\n- [@nabilfreeman](https://github.com/nabilfreeman) ⚙️ ✏️\n- [@runticle](https://github.com/runticle) ✏️\n\n---\nMerge PRs: ⚙️ | Review issues: ✏️\n\n## Join us!\n\nAll contributions, big or small are welcomed.\n\nFor large PRs, please open an issue and have a discussion with us first before you dive in.\n\nOur plan for this library is for it to be useful to all React Native developers so we want to architect it carefully.\n\n# In the wild\n\nThese amazing people use `react-native-payments` in their projects.\n\n- [LeSalon (@lesalonapp)](https://github.com/lesalonapp)\n- [Truphone (My Truphone App)](https://truphone.com/consumer/esim-for-smartphone)\n\nTo add your organization, open a PR updating this list.\n\n---\n\n🚧\n\n🚧\n\n🚧\n\n🚧\n\n🚧\n\n---\n\n\u003e This project is currently in __beta and APIs are subject to change.__\n\n# React Native Payments\n[![react-native version](https://img.shields.io/badge/react--native-0.41-0ba7d3.svg?style=flat-square)](http://facebook.github.io/react-native/releases/0.40)\n[![npm](https://img.shields.io/npm/v/react-native-payments.svg?style=flat-square)](https://www.npmjs.com/package/react-native-payments)\n[![npm](https://img.shields.io/npm/dm/react-native-payments.svg?style=flat-square)](https://www.npmjs.com/package/react-native-payments)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nAccept Payments with Apple Pay and Android Pay using the [Payment Request API](https://paymentrequest.show).\n\n__Features__\n- __Simple.__ No more checkout forms.\n- __Effective__. Faster checkouts that increase conversion.\n- __Future-proof__. Use a W3C Standards API, supported by companies like Google, Firefox and others.\n- __Cross-platform__. Share payments code between your iOS, Android, and web apps.\n- __Add-ons__. Easily enable support for Stripe or Braintree via add-ons.\n\n---\n\n## Table of Contents\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Testing Payments](#testing-payments)\n- [Apple Pay button](#apple-pay-button)\n- [Add-ons](#add-ons)\n- [API](#api)\n- [Resources](#resources)\n- [License](#license)\n\n## Demo\nYou can run the demo by cloning the project and running:\n\n```shell\n$ yarn run:demo\n```\n\nIn a rush? Check out the [browser version](https://rnp.nof.me) of the demo.\n\n_Note that you'll need to run it from a browser with [Payment Request support](https://caniuse.com/#search=payment%20request)._\n\n## Installation\nFirst, download the package:\n```shell\n$ yarn add react-native-payments\n```\nSecond, link the native dependencies:\n```shell\n$ react-native link react-native-payments\n```\n\n## Usage\n- [Setting up Apple Pay/Android Pay](#setting-up-apple-payandroid-pay)\n- [Importing the Library](#importing-the-library)\n- [Initializing the Payment Request](#initializing-the-payment-request)\n- [Displaying the Payment Request](#displaying-the-payment-request)\n- [Aborting the Payment Request](#aborting-the-payment-request)\n- [Requesting Contact Information](#requesting-contact-information)\n- [Requesting a Shipping Address](#requesting-a-shipping-address)\n- [Processing Payments](#processing-payments)\n- [Dismissing the Payment Request](#dismissing-the-payment-request)\n\n\n### Setting up Apple Pay/Android Pay\nBefore you can start accepting payments in your App, you'll need to setup Apple Pay and/or Android Pay.\n\n#### Apple Pay\n1. Register as an Apple Developer\n1. Obtain a merchant ID\n1. Enable Apple Pay in your app\n\nApple has a documentation on how to do this in their _[Configuring your Environment](https://developer.apple.com/library/content/ApplePay_Guide/Configuration.html)_ guide.\n\n#### Android Pay\n\n1. Add Android Pay and Google Play Services to your dependencies\n1. Enable Android Pay in your Manifest\n\nGoogle has documentation on how to do this in their _[Setup Android Pay](https://developers.google.com/pay/api/android/guides/setup)_ guide.\n\n### Importing the Library\nOnce Apple Pay/Android Pay is enabled in your app, jump into your app's entrypoint and make the `PaymentRequest` globally available to your app.\n\n```es6\n// index.ios.js\nglobal.PaymentRequest = require('react-native-payments').PaymentRequest;\n```\n\n### Initializing the Payment Request\nTo initialize a Payment Request, you'll need to provide `PaymentMethodData` and `PaymentDetails`.\n\n#### Payment Method Data\nThe Payment Method Data is where you defined the forms of payment that you accept.  To enable Apple Pay, we'll define a `supportedMethod` of `apple-pay`.  We're also required to pass a `data` object to configures Apple Pay.  This is where we provide our merchant id, define the supported card types and the currency we'll be operating in.\n\n```es6\nconst METHOD_DATA = [{\n  supportedMethods: ['apple-pay'],\n  data: {\n    merchantIdentifier: 'merchant.com.your-app.namespace',\n    supportedNetworks: ['visa', 'mastercard', 'amex'],\n    countryCode: 'US',\n    currencyCode: 'USD'\n  }\n}];\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Android Pay Example\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\n```es6\nconst METHOD_DATA = [{\n  supportedMethods: ['android-pay'],\n  data: {\n    supportedNetworks: ['visa', 'mastercard', 'amex'],\n    currencyCode: 'USD',\n    environment: 'TEST', // defaults to production\n    paymentMethodTokenizationParameters: {\n      tokenizationType: 'NETWORK_TOKEN',\n      parameters: {\n        publicKey: 'your-pubic-key'\n      }\n    }\n  }\n}];\n```\n\n\u003c/details\u003e\n\n#### Payment Details\nPayment Details is where define transaction details like display items, a total and optionally shipping options.\n\nGoogle has excellent documentation for [Defining Payment Details](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request#defining_payment_details).\n\n```es6\nconst DETAILS = {\n  id: 'basic-example',\n  displayItems: [\n    {\n      label: 'Movie Ticket',\n      amount: { currency: 'USD', value: '15.00' }\n    }\n  ],\n  total: {\n    label: 'Merchant Name',\n    amount: { currency: 'USD', value: '15.00' }\n  }\n};\n```\n\nOnce you've defined your `methodData` and `details`, you're ready to initialize your Payment Request.\n\n```es6\nconst paymentRequest = new PaymentRequest(METHOD_DATA, DETAILS);\n```\n\n🚨 _Note: On Android, display items are not displayed within the Android Pay view.  Instead, the _[User Flows documentation](https://developers.google.com/android-pay/payment-flows)_ suggests showing users a confirmation view where you list the display items.  When using React Native Payments, show this view after receiving the `PaymentResponse`._\n\n### Displaying the Payment Request\nNow that you've setup your Payment Request, displaying it is as simple as calling the `show` method.\n\n```es6\npaymentRequest.show();\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Screenshots\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/27548765-be9121c0-5a4e-11e7-8e45-4b460e314e6a.png\" /\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/30039982-d565c68c-91d8-11e7-9cb9-2a0e58fffe6a.png\" /\u003e\n\n\u003c/details\u003e\n\n### Aborting the Payment Request\nYou can abort the Payment Request at any point by calling the `abort` method.\n\n```es6\npaymentRequest.abort();\n```\n\n🚨 _Note: Not yet implemented on Android Pay_\n\n### Requesting Contact Information\nSome apps may require contact information from a user.  You can do so by providing a [`PaymentOptions`]() as a third argument when initializing a Payment Request. Using Payment Options, you can request a contact name, phone number and/or email.\n\n#### Requesting a Contact Name\nSet `requestPayerName` to `true` to request a contact name.\n\n```es6\nconst OPTIONS = {\n  requestPayerName: true\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Screenshots\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/27549933-9be15be6-5a52-11e7-868a-abcfc8867968.png\" /\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png\" /\u003e\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\n🚨 _Note: On Android, requesting a contact name will present the user with a shipping address selector. If you're not shipping anything to the user, consider capturing the contact name outside of Android Pay._\n\n#### Requesting a Phone Number\nSet `requestPayerPhone` to `true` to request a phone number.\n\n```es6\nconst OPTIONS = {\n  requestPayerPhone: true\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Screenshots\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/27549958-b6732160-5a52-11e7-8813-3beeeed03b9c.png\" /\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/30039983-d75d1b3e-91d8-11e7-9ac9-71d2ed12958c.png\" /\u003e\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\n🚨 _Note: On Android, requesting a phone number will present the user with a shipping address selector. If you're not shipping anything to the user, consider capturing the phone number outside of Android Pay._\n\n#### Requesting an Email Address\nSet `requestPayerEmail` to `true` to request an email address.\n\n```es6\nconst OPTIONS = {\n  requestPayerEmail: true\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Screenshots\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/27549968-c172ac34-5a52-11e7-973d-8d06a3beb5ce.png\" /\u003e\n\u003cimg width=\"250px\" src=\"https://user-images.githubusercontent.com/1627824/30039982-d565c68c-91d8-11e7-9cb9-2a0e58fffe6a.png\" /\u003e\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\nYou can also request all three by setting them all to `true`.\n\n```es6\nconst OPTIONS = {\n  requestPayerName: true,\n  requestPayerPhone: true,\n  requestPayerEmail: true\n};\n```\n\n### Requesting a Shipping Address\nRequesting a shipping address is done in three steps.\n\nFirst, you'll need to set `requestShipping` to `true` within `PaymentOptions`.\n\n```es6\nconst OPTIONS = {\n  requestShipping: true\n};\n```\n\nSecond, you'll need to include `shippingOptions` in your Payment Details.\n\n```diff\nconst DETAILS = {\n  id: 'basic-example',\n  displayItems: [\n    {\n      label: 'Movie Ticket',\n      amount: { currency: 'USD', value: '15.00' }\n    }\n  ],\n+ shippingOptions: [{\n+   id: 'economy',\n+   label: 'Economy Shipping',\n+   amount: { currency: 'USD', value: '0.00' },\n+   detail: 'Arrives in 3-5 days' // `detail` is specific to React Native Payments\n+ }],\n  total: {\n    label: 'Merchant Name',\n    amount: { currency: 'USD', value: '15.00' }\n  }\n};\n```\n\nLastly, you'll need to register event listeners for when a user selects a `shippingAddress` and/or a `shippingOption`.  In the callback each event, you'll need to provide new `PaymentDetails` that will update your PaymentRequest.\n\n```es6\npaymentRequest.addEventListener('shippingaddresschange', e =\u003e {\n  const updatedDetails = getUpdatedDetailsForShippingAddress(paymentRequest.shippingAddress;\n\n  e.updateWith(updatedDetails);\n});\n\npaymentRequest.addEventListener('shippingoptionchange', e =\u003e {\n  const updatedDetails = getUpdatedDetailsForShippingOption(paymentRequest.shippingOption);\n\n  e.updateWith(updatedDetails);\n});\n```\n\nFor a deeper dive on handling shipping in Payment Request, checkout Google's _[Shipping in Payment Request](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request#shipping_in_payment_request_api)_.\n\n🚨 _Note: On Android, there are no `shippingaddresschange` and `shippingoptionchange` events.  To allow users to update their shipping address, you'll need to trigger a new `PaymentRequest`.  Updating shipping options typically happens after the receiving the `PaymentResponse` and before calling its `getPaymentToken` method._\n\n### Processing Payments\nNow that we know how to initialize, display, and dismiss a Payment Request, let's take a look at how to process payments.\n\nWhen a user accepts to pay, `PaymentRequest.show` will resolve to a Payment Response.\n\n```es6\npaymentRequest.show()\n  .then(paymentResponse =\u003e {\n    // Your payment processing code goes here\n\n    return processPayment(paymentResponse);\n  });\n```\n\nThere are two ways to process Apple Pay/Android Pay payments -- on your server or using a payment processor.\n\n#### Processing Payments on Your Server\nIf you're equipped to process Apple Pay/Android Pay payments on your server, all you have to do is send the Payment Response data to your server.\n\n\u003e ⚠️ **Note:** When running Apple Pay on simulator, `paymentData` equals to `null`.\n\n```es6\nimport { NativeModules } from 'react-native';\n\npaymentRequest.show()\n  .then(paymentResponse =\u003e {\n    const { transactionIdentifier, paymentData } = paymentResponse.details;\n\n    return fetch('...', {\n      method: 'POST',\n      body: {\n        transactionIdentifier,\n        paymentData\n      }\n    })\n    .then(res =\u003e res.json())\n    .then(successHandler)\n    .catch(errorHandler)\n  });\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Android Pay Example\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\n```es6\npaymentRequest.show()\n  .then(paymentResponse =\u003e {\n    const { getPaymentToken } = paymentResponse.details;\n\n    return getPaymentToken()\n      .then(paymentToken =\u003e {\n        const { ephemeralPublicKey, encryptedMessage, tag } = paymentResponse.details;\n\n        return fetch('...', {\n          method: 'POST',\n          body: {\n            ephemeralPublicKey,\n            encryptedMessage,\n            tag\n          }\n        })\n        .then(res =\u003e res.json())\n        .then(successHandler)\n        .catch(errorHandler)\n      });\n  });\n```\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\nYou can learn more about server-side decrypting of Payment Tokens on Apple's [Payment Token Format Reference](https://developer.apple.com/library/content/documentation/PassKit/Reference/PaymentTokenJSON/PaymentTokenJSON.html) documentation.\n\n#### Processing Payments with a Payment Processor\nWhen using a payment processor, you'll receive a `paymentToken` field within the `details` of the `PaymentResponse`.  Use this token to charge customers with your payment processor.\n\n```es6\npaymentRequest.show()\n  .then(paymentResponse =\u003e {\n    const { paymentToken } = paymentResponse.details; // On Android, you need to invoke the `getPaymentToken` method to receive the `paymentToken`.\n\n    return fetch('...', {\n      method: 'POST',\n      body: {\n        paymentToken\n      }\n    })\n    .then(res =\u003e res.json())\n    .then(successHandler)\n    .catch(errorHandler);\n  });\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eSee Android Pay Example\u003c/strong\u003e\u003c/summary\u003e\n\u003cbr/\u003e\n\n```es6\npaymentRequest.show()\n  .then(paymentResponse =\u003e {\n    const { getPaymentToken } = paymentResponse.details;\n\n    return getPaymentToken()\n      .then(paymentToken =\u003e fetch('...', {\n        method: 'POST',\n        body: {\n          paymentToken\n        }\n      })\n      .then(res =\u003e res.json())\n      .then(successHandler)\n      .catch(errorHandler);\n    });\n  });\n```\n\n\u003c/details\u003e\n\u003cbr/\u003e\n\nFor a list of supported payment processors and how to enable them, see the [Add-ons](#add-ons) section.\n\n### Dismissing the Payment Request\nDismissing the Payment Request is as simple as calling the `complete` method on of the `PaymentResponse`.\n\n```es6\npaymentResponse.complete('success'); // Alternatively, you can call it with `fail` or `unknown`\n```\n\n🚨 _Note: On Android, there is no need to call `paymentResponse.complete` -- the PaymentRequest dismisses itself._\n\n## Testing Payments\n\n### Apple Pay\n\nThe sandbox environment is a great way to test offline implementation of Apple Pay for apps, websites, and point of sale systems. Apple offers [detailed guide](https://developer.apple.com/support/apple-pay-sandbox/) for setting up sandbox environment.\n\u003e ⚠️ **Note:** It is also important to test Apple Pay in your production environment. Real cards must be used in the production environment. Test cards will not work.\n\u003e\n\u003e ⚠️ **Note:** There are known differences when running Apple Pay on simulator and real device. Make sure you test Apple Pay on real device before going into production.\n\n## Apple Pay Button\n\nProvides a button that is used either to trigger payments through Apple Pay or to prompt the user to set up a card.\n[Detailed docs and examples](docs/ApplePayButton.md)\n\n## Add-ons\nHere's a list of Payment Processors that you can enable via add-ons:\n- [Stripe](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments-addon-stripe)\n- [Braintree](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments-addon-braintree)\n\n🚨 _Note: On Android, Payment Processors are enabled by default._\n\n## API\n### [NativePayments](docs/NativePayments.md)\n### [PaymentRequest](docs/PaymentRequest.md)\n### [PaymentRequestUpdateEvent](docs/PaymentRequestUpdateEvent.md)\n### [PaymentResponse](docs/PaymentResponse.md)\n\n## Resources\n### Payment Request\n- [Introducing the Payment Request API](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request)\n- [Deep Dive into the Payment Request API](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/deep-dive-into-payment-request)\n- [W3C API Working Draft](https://www.w3.org/TR/payment-request/)\n- [Web Payments](https://www.youtube.com/watch?v=U0LkQijSeko)\n- [The Future of Web Payments](https://www.youtube.com/watch?v=hU89pPBmhds)\n\n### Apple Pay\n- [Getting Started with Apple Pay](https://developer.apple.com/apple-pay/get-started)\n- [Configuring your Environment](https://developer.apple.com/library/content/ApplePay_Guide/Configuration.html)\n- [Processing Payments](https://developer.apple.com/library/content/ApplePay_Guide/ProcessPayment.html#//apple_ref/doc/uid/TP40014764-CH5-SW4)\n- [Payment Token Format Reference](https://developer.apple.com/library/content/documentation/PassKit/Reference/PaymentTokenJSON/PaymentTokenJSON.html#//apple_ref/doc/uid/TP40014929)\n\n### Android Pay\n- [Setup Android Pay](https://developers.google.com/pay/api/android/guides/setup)\n- [Tutorial](https://developers.google.com/pay/api/android/guides/tutorial)\n- [Brand Guidelines](https://developers.google.com/pay/api/android/guides/brand-guidelines)\n- [Gateway Token Approach](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/android-pay#gateway_token_approach)\n- [Network Token Approach](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/android-pay#network_token_approach)\n\n# License\nLicensed under the MIT License, Copyright © 2017, [Naoufal Kadhom](https://twitter.com/naoufal).\n\nSee [LICENSE](https://github.com/naoufal/react-native-payments/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaoufal%2Freact-native-payments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaoufal%2Freact-native-payments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaoufal%2Freact-native-payments/lists"}