{"id":19343185,"url":"https://github.com/swashcap/rnwebviewwithvisacheckout","last_synced_at":"2026-05-05T01:41:40.314Z","repository":{"id":149576265,"uuid":"153864426","full_name":"swashcap/RNWebViewWithVisaCheckout","owner":"swashcap","description":"Testing Visa’s Checkout SDK in a React Native WebView","archived":false,"fork":false,"pushed_at":"2018-10-29T19:58:13.000Z","size":795,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-06T12:41:54.866Z","etag":null,"topics":["react","react-native","visa-checkout"],"latest_commit_sha":null,"homepage":null,"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/swashcap.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":"2018-10-20T03:03:32.000Z","updated_at":"2018-10-29T19:58:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"50c3f246-2d6a-4cc3-8fe3-5f53b17bea38","html_url":"https://github.com/swashcap/RNWebViewWithVisaCheckout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashcap%2FRNWebViewWithVisaCheckout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashcap%2FRNWebViewWithVisaCheckout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashcap%2FRNWebViewWithVisaCheckout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashcap%2FRNWebViewWithVisaCheckout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swashcap","download_url":"https://codeload.github.com/swashcap/RNWebViewWithVisaCheckout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240449891,"owners_count":19803125,"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":["react","react-native","visa-checkout"],"created_at":"2024-11-10T03:37:40.955Z","updated_at":"2025-11-17T01:03:45.942Z","avatar_url":"https://github.com/swashcap.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RNWebViewWithVisaCheckout\n\n_Testing [Visa’s Checkout](https://developer.visa.com/capabilities/visa_checkout) SDK in a React Native WebView_\n\n## Workflow\n\nThe following details this repository's workflow between a React Native application and Visa Checkout's JavaScript SDK.\n\n### 1. Cart\n\nThis is a 100% React Native view powered by stubbed products. Pressing the “Continue” button animates to the next view by triggering a navigation action. (Navigation is powered by [react-navigation](https://reactnavigation.org) in this example.)\n\n|Android|iOS|\n|:---:|:---:|\n|![Android Cart](docs/android-cart.jpg)|![iOS Cart](docs/ios-cart.jpg)|\n\n### 2. Checkout\n\nThe content of this view is a [React Native WebView](https://facebook.github.io/react-native/docs/webview); its web page is rendered by the server. The “Checkout” button is included for display purposes and does not function. The server renders the “Visa Checkout” button per [Visa’s integration guide](https://developer.visa.com/capabilities/visa_checkout/docs#adding_visa_checkout_to_your_web_page).\n\n|Android|iOS|\n|:---:|:---:|\n|![Android Checkout](docs/android-checkout.jpg)|![iOS Checkout](docs/ios-checkout.jpg)|\n\n### 3. Visa Flow\n\nPressing the “Visa Checkout” button leads the user into Visa’s flow (these screenshots show a repeat customer flow). This happens in the same Checkout WebView.\n\n|Android|iOS|\n|:---:|:---:|\n|![Android Visa Step 1](docs/android-visa-1.jpg)|![iOS Visa Step 1](docs/ios-visa-1.jpg)|\n|![Android Visa Step 2](docs/android-visa-2.jpg)|![iOS Visa Step 2](docs/ios-visa-2.jpg)|\n|![Android Visa Step 3](docs/android-visa-3.jpg)|![iOS Visa Step 3](docs/ios-visa-3.jpg)|\n|![Android Visa Step 4](docs/android-visa-4.jpg)|![iOS Visa Step 4](docs/ios-visa-4.jpg)|\n\nThe user enters authentication credentials, selects a payment method stored within Visa Checkout, and presses “Continue,” returning to the original web page. Visa offers new user signup and payment method editing/updating workflows, too.\n\n### 4. Successful Payment\n\nThe Visa Checkout SDK sends a `payment.success` event containing encrypted payment method data to a registered handler within the WebView. This handler passes the data back to the native application using [the WebView’s `onMessage` property](https://facebook.github.io/react-native/docs/webview#onmessage), which passes the data to the server. The server decrypts the payment method using a secret Visa Checkout key and stores it for processing.\n\n### 5. Order Confirmation\n\nThe client contacts the server to retrieve payment processing status, then displays a successful order confirmation view. _(Note: working code awaiting a “full” access account from Visa Developer relations.)_\n\n## Setup\n\nMake sure you have:\n\n* [Node.js](https://nodejs.org/en/) (\u003e= 8.x.x)\n* [yarn](https://yarnpkg.com/en/)\n* [Xcode](https://developer.apple.com/xcode/) (\u003e= 9)\n* [Android Studio](https://developer.android.com/studio/) (\u003e= 3.1)\n\n### Visa\n\n1. Sign up for a test account at [developer.visa.com](https://developer.visa.com)\n2. Create a new project within the Visa developer dashboard with “Visa Checkout” enabled\n3. Add the newly created project's API key and shared secret as env var entries in _server/.env_:\n\n    ```shell\n    echo 'VISA_CHECKOUT_API_KEY=\u003cyour key\u003e' \u003e server/.env\n    echo 'VISA_CHECKOUT_SHARED_SECRET=\u003cyour secret\u003e' \u003e\u003e server/.env\n    ```\n\n### Web Server\n\nTo test the Visa Checkout SDK properly the server must run on a real host:\n\n\u003e **Note:** The page you add a Visa Checkout button to must be hosted on a web server for the lightbox and JavaScript library to perform properly.\n\n— [_Visa Checkout_ documentation](https://developer.visa.com/capabilities/visa_checkout/docs#adding_visa_checkout_to_your_web_page)\n\nTo make this work for local development, the server should run on a test domain, `dev.walmart.com`. Add this entry to `/etc/hosts`:\n\n```\n127.0.0.1       dev.walmart.com\n```\n\n### Dependencies\n\nUse [yarn](https://yarnpkg.com/en/) to install dependencies:\n\n```shell\nyarn install # root dependencies\nyarn install --cwd \"$PWD/client\" # client dependencies\nyarn install --cwd \"$PWD/server\" # server dependencies\n```\n\n## Running\n\nRunning the project requires both a server and client:\n\n* **Server**: run `yarn start` in _server/_\n* **Client**:\n    * run `yarn start` in _client/_ to start the react-native packager\n    * run `yarn run react-native run-ios` in _client/_ to start and build for the iOS simulator\n    * run `yarn run react-native run-andriod` in _client/_ to start and build for the Android emulator\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashcap%2Frnwebviewwithvisacheckout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswashcap%2Frnwebviewwithvisacheckout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashcap%2Frnwebviewwithvisacheckout/lists"}