{"_id":"@metamask/react-native-payments","_rev":"24-3308446e37bb87d49d43b9cfda4e1c64","name":"@metamask/react-native-payments","dist-tags":{"latest":"2.0.2"},"versions":{"1.5.0":{"name":"@metamask/react-native-payments","version":"1.5.0","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"author":{"name":"Naoufal Kadhom"},"license":"MIT","_id":"@metamask/react-native-payments@1.5.0","maintainers":[{"name":"ritave","email":"olaf@tomalka.me"},{"name":"danfinlay","email":"dan@danfinlay.com"},{"name":"kumavis","email":"aaron@kumavis.me"},{"name":"rekmarks","email":"rekmarks@protonmail.com"},{"name":"metamaskbot","email":"security@metamask.io"},{"name":"gudahtt","email":"markjstacey@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"},{"name":"sethkfman","email":"sethkfman@gmail.com"}],"homepage":"https://github.com/MetaMask/react-native-payments#readme","bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"dist":{"shasum":"218a97720c1eb8da2ef62c83cdacd3f73dddf946","tarball":"https://registry.npmjs.org/@metamask/react-native-payments/-/react-native-payments-1.5.0.tgz","fileCount":28,"integrity":"sha512-LSdqk6x3ILLVmhqG+dFlp0/SjrFzTUxz2L11eZgko645TYyvG686IJeUJO0k9wdWDEWkPkmRhZkCcgqjxj9XWA==","signatures":[{"sig":"MEYCIQDi/rA1J2lzojWNOJsplBiVW+OzohIktZJyqAOyccvILgIhAOmtwWnMFC8VdWimHK1QTW48uCgVGs+fZ++L+06CqvO3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfWv2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcJw/+NEguiCRRGYktTVHptc2bDGBsv5JF6rkhcMWmGBRxxyRyzhSL\r\nW81TXTBmqGbJtI847YfrGlTlyHi65yqq5lkA8sYnwbvxLcxJJMacmd31/v9n\r\ny7NOVoWTUewwz86V69I6DRm893POHJmGq3PJIsUpM5dPW9kO0dCTZvi5/Vr1\r\nf7ef5x1dW6uCziPNp1YBgCjSB9RVT1PlDz3evKHy38VSxQWx/Mstxx55BCd3\r\nD2c9/qkouUx7WXWpYoR9tMQZeVzeCo5lAeAZOo3/ts5xRyjHtqQUf/bW0PXI\r\nEv2v0td8PuppdUM7/F4e518De0ONh1zSZD/0V3BYOlY4r5hORlfoYNbSOu/E\r\nFgqP19QOLe6HEqL7XX/6Xvb4v2Hq7n0gwZFDLpbTgy5RQHCD1Vt7aL+8Uhzd\r\nnZtO+RpQkq/niCrTfSIH0P53D+uN04KT/E9tj6+aSSK/Er0S2APODhKxo7KR\r\nB3ac1nHIrT3fg9FU4IHdvw2jUyUi3BjnNebypYkeE5jHkybg5vDDjgkoTvDW\r\nmw6WyHMi8E4r8B/yZvjUA7Vf/j0pBfVOI9MkB9eD/qsiR1zUwgsYdJpdRDfm\r\ncAdEvbA4vbqQBXWVTSeQBN78Hc8k6pGVZF0m1/nTXkFu4LE0lHC6NWd31S7a\r\ny14fSvSd4hPQHuXVN+8WuGFepEBxJ0ahLkY=\r\n=67zh\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testPathIgnorePatterns":["/node_modules/","/examples/","lib/js/__tests__"]},"main":"lib/js/index.js","gitHead":"1b0f32ef478f81f982a7deccb7efe0ab8bb51cae","scripts":{"test":"jest","run:ios":"cd examples/native && yarn run:ios","run:web":"cd examples/web && yarn run:web","run:demo":"cd examples/native && yarn run:demo","run:packager":"cd examples/native && yarn run:packager"},"_npmUser":{"name":"gudahtt","email":"markjstacey@gmail.com"},"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"_npmVersion":"6.14.13","description":"> This project is currently in __beta and APIs are subject to change.__","directories":{},"_nodeVersion":"12.22.3","dependencies":{"uuid":"3.3.2","es6-error":"^4.0.2","validator":"^7.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"20.0.4","husky":"^0.14.1","babel-jest":"20.0.3","react-test-renderer":"16.0.0-alpha.12","babel-preset-react-native":"2.0.0"},"peerDependencies":{"react":">=15","react-native":">=0.41"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payments_1.5.0_1669164021827_0.6594510681213503","host":"s3://npm-registry-packages"}},"1.5.1":{"name":"@metamask/react-native-payments","version":"1.5.1","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"author":{"name":"Naoufal Kadhom"},"license":"MIT","_id":"@metamask/react-native-payments@1.5.1","maintainers":[{"name":"ritave","email":"olaf@tomalka.me"},{"name":"danfinlay","email":"dan@danfinlay.com"},{"name":"kumavis","email":"aaron@kumavis.me"},{"name":"rekmarks","email":"rekmarks@protonmail.com"},{"name":"metamaskbot","email":"security@metamask.io"},{"name":"gudahtt","email":"markjstacey@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"},{"name":"sethkfman","email":"sethkfman@gmail.com"}],"homepage":"https://github.com/MetaMask/react-native-payments#readme","bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"dist":{"shasum":"3043b6ac7b334cb73e9529b3a03f25d09ec909f7","tarball":"https://registry.npmjs.org/@metamask/react-native-payments/-/react-native-payments-1.5.1.tgz","fileCount":29,"integrity":"sha512-mq8w7IXzbtD8ZeCFrpD83mBo50yBFPEbKC/hoP7XZn8mdk9HzHdQaAFTkEfcXnHSDiG12yGlxHdDSeazMLUsMg==","signatures":[{"sig":"MEYCIQCi0La/A29dTdJeVN8y5T8aJruoV0yRAhjsxD0Ad5Jj4gIhAMzjsEBMPNIpUZVibx6zx26mKY614rllbq4ofYrRUiF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh804ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyPA/+PfJ873bEm4HIyPpLF1D3tp0z/oeKOSpIwKYEivFozIETPndG\r\nVGiUOcqRhlVZia35VpNw2fTcuhVN4j4aSjdXPfq7Q0n+sLDpO+lX11oKUrFP\r\n4WkaVqdSfEgLMyfMgXMtkf3xdhi+X1WI9ileTIA0LtUYLbXf7PAuLiycX3du\r\nI7MCzhiEr2k3RmlR8pIyHAfv1AlEdqOHS8fqkkOrDLFWLtnhoZD5axybayWz\r\nIAqseqI1zp2J4R/WIMonpKmkX82u1Mo7uOWLxz680ZqWYwc3Mg9AcQE6bJ+8\r\njntNTD2ptE1lEDW6ZM0PpmBR6UNRNRGnVD3dYB0wMSCt1A4IRQF4vmmd0INg\r\nlDsvBbPiVgT1rZaiGn6hv21KgqAiLiBKAiLDYbpCiI5a0D8KyWwzVV+/6ODw\r\nEWd6AoV8PvT5kD/QyZh5PyPad9JjqnDiFVJSK+pgsq0wLwSZHIKy1Va9OKz1\r\niSOGpan7f/sR8ng0/zP8vei2J27PnGyVP0M9IQbevSArnEH4eJKEczQiROMs\r\nsdspuReMVUYZXVHnDgcVSNFDs4ZnkQeoGk+y7A2MN4aKA5B++FzSWsf0Lc0I\r\nxqlB6CfNI4aFEcXpRdpxGLrj5e4ENPGxSn/v164PXUGuhdUKZG4bEp/X0kUh\r\n3x/l/I5VTB+tIKWFAFvdq/4SB1ktmjBoY3o=\r\n=82IJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testPathIgnorePatterns":["/node_modules/","/examples/","lib/js/__tests__"]},"main":"lib/js/index.js","gitHead":"8f8bd63187e5b57eb76f66763c54bafddfee54f8","scripts":{"test":"jest","run:ios":"cd examples/native && yarn run:ios","run:web":"cd examples/web && yarn run:web","run:demo":"cd examples/native && yarn run:demo","run:packager":"cd examples/native && yarn run:packager"},"_npmUser":{"name":"gudahtt","email":"markjstacey@gmail.com"},"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"_npmVersion":"8.11.0","description":"> This project is currently in __beta and APIs are subject to change.__","directories":{},"_nodeVersion":"16.16.0","dependencies":{"uuid":"3.3.2","es6-error":"^4.0.2","validator":"^7.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"20.0.4","husky":"^0.14.1","babel-jest":"20.0.3","react-test-renderer":"16.0.0-alpha.12","babel-preset-react-native":"2.0.0"},"peerDependencies":{"react":">=15","react-native":">=0.41"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payments_1.5.1_1669844280296_0.28299739095034604","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@metamask/react-native-payments","version":"2.0.0","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"author":{"name":"Naoufal Kadhom"},"license":"MIT","_id":"@metamask/react-native-payments@2.0.0","maintainers":[{"name":"mcmire","email":"elliot.winkler@gmail.com"},{"name":"nicholasellul","email":"nicholas.ellul1@gmail.com"},{"name":"lgbot","email":"khebkoh9@anonaddy.me"},{"name":"naugtur","email":"naugtur@gmail.com"},{"name":"ritave","email":"olaf@tomalka.me"},{"name":"danfinlay","email":"dan@danfinlay.com"},{"name":"kumavis","email":"aaron@kumavis.me"},{"name":"rekmarks","email":"rekmarks@protonmail.com"},{"name":"metamaskbot","email":"security@metamask.io"},{"name":"gudahtt","email":"markjstacey@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"},{"name":"sethkfman","email":"sethkfman@gmail.com"}],"homepage":"https://github.com/MetaMask/react-native-payments#readme","bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"dist":{"shasum":"64d48028a8c0de1bf5332b01c3ddd5ca61c8fbdb","tarball":"https://registry.npmjs.org/@metamask/react-native-payments/-/react-native-payments-2.0.0.tgz","fileCount":30,"integrity":"sha512-XUdZsD+RpNGwUPpwdgcVqe+ugRqhpvEU9ihL9n3VbWN7g6p3RdK0JuQ9g19WA7xcU1l2Rg9dCxkMytNin+uOSA==","signatures":[{"sig":"MEYCIQCbuHSTHizRN1IXM6RWQFoXNutdz1QMWheSta3bLZ6OxgIhAN2rVJeAcp0vrP7bXZDj7YCvi2NW+uLGlrlALHrxTQx4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131355},"jest":{"testPathIgnorePatterns":["/node_modules/","/examples/","lib/js/__tests__"]},"main":"lib/js/index.js","gitHead":"9f4a8c9f4371f4fb27b11a8c2a5fa34a502da030","scripts":{"test":"jest","run:ios":"cd examples/native && yarn run:ios","run:web":"cd examples/web && yarn run:web","run:demo":"cd examples/native && yarn run:demo","run:packager":"cd examples/native && yarn run:packager"},"_npmUser":{"name":"lgbot","email":"khebkoh9@anonaddy.me"},"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"_npmVersion":"8.19.4","description":"> This project is currently in __beta and APIs are subject to change.__","directories":{},"_nodeVersion":"16.20.2","dependencies":{"uuid":"3.3.2","es6-error":"^4.0.2","validator":"^7.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"20.0.4","husky":"^0.14.1","babel-jest":"20.0.3","react-test-renderer":"16.0.0-alpha.12","babel-preset-react-native":"2.0.0"},"peerDependencies":{"react":">=15","react-native":">=0.41"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payments_2.0.0_1714517953367_0.4953709770446406","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@metamask/react-native-payments","version":"2.0.1","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"author":{"name":"Naoufal Kadhom"},"license":"MIT","_id":"@metamask/react-native-payments@2.0.1","maintainers":[{"name":"mcmire","email":"elliot.winkler@gmail.com"},{"name":"nicholasellul","email":"nicholas.ellul1@gmail.com"},{"name":"lgbot","email":"khebkoh9@anonaddy.me"},{"name":"naugtur","email":"naugtur@gmail.com"},{"name":"ritave","email":"olaf@tomalka.me"},{"name":"danfinlay","email":"dan@danfinlay.com"},{"name":"kumavis","email":"aaron@kumavis.me"},{"name":"rekmarks","email":"rekmarks@protonmail.com"},{"name":"metamaskbot","email":"security@metamask.io"},{"name":"gudahtt","email":"markjstacey@gmail.com"},{"name":"brad.decker","email":"bhdecker84@gmail.com"},{"name":"sethkfman","email":"sethkfman@gmail.com"}],"homepage":"https://github.com/MetaMask/react-native-payments#readme","bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"dist":{"shasum":"96fc0a9a828e4fb9cc03fd00100323b92895e9d5","tarball":"https://registry.npmjs.org/@metamask/react-native-payments/-/react-native-payments-2.0.1.tgz","fileCount":30,"integrity":"sha512-0UGWjJQaKe+BzHD894xcaE3JgT+2Ex6ll5ZZu7121rUP347S/1gs80Zlkibsd26HyMe2T7Ko24Q/3U9zhax9ow==","signatures":[{"sig":"MEYCIQDGQ4VxB88w7ScnY8sVIlez1H9OlcR2Xj/emIKHWlSuZAIhALPrnYfIfA9RG45iPFiWtG6zlKbPIYj9pvTbSmemAeSL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131220},"jest":{"testPathIgnorePatterns":["/node_modules/","/examples/","lib/js/__tests__"]},"main":"lib/js/index.js","gitHead":"abf39ba8572523dbd157bca74dc7e4a1f2118492","scripts":{"test":"jest","run:ios":"cd examples/native && yarn run:ios","run:web":"cd examples/web && yarn run:web","run:demo":"cd examples/native && yarn run:demo","run:packager":"cd examples/native && yarn run:packager"},"_npmUser":{"name":"lgbot","email":"khebkoh9@anonaddy.me"},"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"_npmVersion":"10.5.2","description":"> This project is currently in __beta and APIs are subject to change.__","directories":{},"_nodeVersion":"20.13.1","dependencies":{"uuid":"3.3.2","es6-error":"^4.0.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"20.0.4","husky":"^0.14.1","babel-jest":"20.0.3","react-test-renderer":"16.0.0-alpha.12","babel-preset-react-native":"2.0.0"},"peerDependencies":{"react":">=15","react-native":">=0.41"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payments_2.0.1_1717101456146_0.752193121222368","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@metamask/react-native-payments","version":"2.0.2","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"author":{"name":"Naoufal Kadhom"},"license":"MIT","_id":"@metamask/react-native-payments@2.0.2","maintainers":[{"name":"danfinlay","email":"dan@danfinlay.com"},{"name":"kumavis","email":"aaron@kumavis.me"},{"name":"mcmire","email":"elliot.winkler@gmail.com"},{"name":"rekmarks","email":"rekmarks@protonmail.com"},{"name":"metamaskbot","email":"metamask-npm@consensys.net"},{"name":"gudahtt","email":"markjstacey@gmail.com"},{"name":"nicholasellul","email":"nicholas.ellul1@gmail.com"},{"name":"sethkfman","email":"sethkfman@gmail.com"},{"name":"naugtur","email":"naugtur@gmail.com"}],"homepage":"https://github.com/MetaMask/react-native-payments#readme","bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"dist":{"shasum":"3172bf600cd6803708f87af2e81b5f5690cad8a1","tarball":"https://registry.npmjs.org/@metamask/react-native-payments/-/react-native-payments-2.0.2.tgz","fileCount":30,"integrity":"sha512-mkUqjgi62/ljJowY4diSVn71oDXWhNno/PKR2dgKJ+n3rjyerFkL7cw8gObyKkQwFF9maZP73wEbNIGqJBg/ZA==","signatures":[{"sig":"MEYCIQCoZFCqUCRlqZ1Wz0tiHKZYeasuzcyS0mctvenMWuXzvwIhAOnyuxLOSmb+cvaAmUPRMaTQcmlSOOSuXP4IN9d6Hbj0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131066},"jest":{"testPathIgnorePatterns":["/node_modules/","lib/js/__tests__"]},"main":"lib/js/index.js","gitHead":"25815aceab4449c095b3a35e783cefde5fd6b3f5","scripts":{"test":"jest"},"_npmUser":{"name":"gudahtt","email":"markjstacey@gmail.com"},"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"_npmVersion":"10.7.0","description":"> This project is currently in __beta and APIs are subject to change.__","directories":{},"_nodeVersion":"18.20.4","dependencies":{"uuid":"3.3.2","es6-error":"^4.0.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22+sha256.c17d3797fb9a9115bf375e31bfd30058cac6bc9c3b8807a3d8cb2094794b51ca","devDependencies":{"jest":"20.0.4","husky":"^0.14.1","babel-jest":"20.0.3","react-test-renderer":"16.0.0-alpha.12","babel-preset-react-native":"2.0.0"},"peerDependencies":{"react":">=15","react-native":">=0.41"},"_npmOperationalInternal":{"tmp":"tmp/react-native-payments_2.0.2_1736976607770_0.1337933310153634","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2022-11-23T00:40:21.777Z","modified":"2026-08-26T12:49:55.884Z","1.5.0":"2022-11-23T00:40:21.982Z","1.5.1":"2022-11-30T21:38:00.495Z","2.0.0":"2024-04-30T22:59:13.514Z","2.0.1":"2024-05-30T20:37:36.331Z","2.0.2":"2025-01-15T21:30:07.965Z"},"bugs":{"url":"https://github.com/MetaMask/react-native-payments/issues"},"author":{"name":"Naoufal Kadhom"},"license":"MIT","homepage":"https://github.com/MetaMask/react-native-payments#readme","keywords":["react","react-native","apple-pay","stripe","braintree","payments"],"repository":{"url":"git+https://github.com/MetaMask/react-native-payments.git","type":"git"},"description":"> This project is currently in __beta and APIs are subject to change.__","maintainers":[{"email":"frederik.bolding@consensys.net","name":"frederikbolding"},{"email":"metamask-npm@consensys.net","name":"metamaskbot"},{"email":"markjstacey@gmail.com","name":"gudahtt"},{"email":"maarten@zuidhoorn.com","name":"mrten"},{"email":"elliot.winkler@gmail.com","name":"mcmire"},{"email":"naugtur@gmail.com","name":"naugtur"}],"readme":"> 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\n
\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
\nSee Android Pay Example\n
\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
\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
\nSee Screenshots\n
\n\n\n\n
\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
\nSee Screenshots\n
\n\n\n\n
\n
\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
\nSee Screenshots\n
\n\n\n\n
\n
\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
\nSee Screenshots\n
\n\n\n\n
\n
\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 => {\n const updatedDetails = getUpdatedDetailsForShippingAddress(paymentRequest.shippingAddress;\n\n e.updateWith(updatedDetails);\n});\n\npaymentRequest.addEventListener('shippingoptionchange', e => {\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 => {\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> ⚠️ **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 => {\n const { transactionIdentifier, paymentData } = paymentResponse.details;\n\n return fetch('...', {\n method: 'POST',\n body: {\n transactionIdentifier,\n paymentData\n }\n })\n .then(res => res.json())\n .then(successHandler)\n .catch(errorHandler)\n });\n```\n\n
\nSee Android Pay Example\n
\n\n```es6\npaymentRequest.show()\n .then(paymentResponse => {\n const { getPaymentToken } = paymentResponse.details;\n\n return getPaymentToken()\n .then(paymentToken => {\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 => res.json())\n .then(successHandler)\n .catch(errorHandler)\n });\n });\n```\n\n
\n
\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 => {\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 => res.json())\n .then(successHandler)\n .catch(errorHandler);\n });\n```\n\n
\nSee Android Pay Example\n
\n\n```es6\npaymentRequest.show()\n .then(paymentResponse => {\n const { getPaymentToken } = paymentResponse.details;\n\n return getPaymentToken()\n .then(paymentToken => fetch('...', {\n method: 'POST',\n body: {\n paymentToken\n }\n })\n .then(res => res.json())\n .then(successHandler)\n .catch(errorHandler);\n });\n });\n```\n\n
\n
\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> ⚠️ **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>\n> ⚠️ **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](packages/react-native-payments/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](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/NativePayments.md)\n### [PaymentRequest](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/PaymentRequest.md)\n### [PaymentRequestUpdateEvent](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/docs/PaymentRequestUpdateEvent.md)\n### [PaymentResponse](https://github.com/naoufal/react-native-payments/blob/master/packages/react-native-payments/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","readmeFilename":"README.md"}