{"id":19366805,"url":"https://github.com/rsoury/buyte-checkout","last_synced_at":"2026-05-02T08:34:33.818Z","repository":{"id":144018436,"uuid":"415741870","full_name":"rsoury/buyte-checkout","owner":"rsoury","description":"Apple Pay and Google Pay in a single install. Checkout website widget and hosted payment page for Buyte built on a React.js","archived":false,"fork":false,"pushed_at":"2021-10-12T14:58:54.000Z","size":2302,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T08:04:10.300Z","etag":null,"topics":["applepay","checkout","googlepay","javascript","payments","react","reactjs","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rsoury.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-11T01:25:15.000Z","updated_at":"2021-10-18T15:58:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b096f25-2e66-46b9-8779-074258be42e9","html_url":"https://github.com/rsoury/buyte-checkout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rsoury/buyte-checkout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsoury%2Fbuyte-checkout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsoury%2Fbuyte-checkout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsoury%2Fbuyte-checkout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsoury%2Fbuyte-checkout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rsoury","download_url":"https://codeload.github.com/rsoury/buyte-checkout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsoury%2Fbuyte-checkout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32528317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["applepay","checkout","googlepay","javascript","payments","react","reactjs","widget"],"created_at":"2024-11-10T07:46:35.029Z","updated_at":"2026-05-02T08:34:33.804Z","avatar_url":"https://github.com/rsoury.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Buyte Checkout\n\nA drop-in Checkout widget and self-hosted payment page for \u003ca href=\"https://github.com/rsoury/buyte\"\u003eBuyte\u003c/a\u003e - digital wallet payment orchestration, built with React.js\n\n![Buyte Banner](https://github.com/rsoury/buyte/blob/master/examples/images/banner-1544x500.jpg)\n\n## Demo\n\n[See demo on Youtube](https://www.youtube.com/watch?v=fKnVh8_HLwk)\n\n## Getting Started\n\nThese instructions will get you a copy of the project built for deployment or local development.\n\n### Prerequisites\n\n- Node.js 10.0+\n\n### Set up\n\n1. Clone the repository `git clone git@github.com:rsoury/buyte-checkout.git`\n2. Install Node.js Dependencies: `yarn`\n3. Copy `.env.example` to `.env`, `.env.development` or `.env.production` and configure you environment settings.\n\n### Local Development\n\n- Start the Widget App - `yarn start:widget`\n- Start the Go App - `yarn start:go`\n\n### Deployment\n\n1. Build your App\n   `yarn build-public`\n   1. If you would like to build the widget as a standalone app, use `yarn build-public:widget`\n2. Deploy your Widget build files to a public repository to be used in a drop-in script\n   1. S3: `aws s3 sync ./build/widget s3://public-bucket/buyte-widget`\n3. Deploy your Go (Hosted Payment) App.\n   [Netlify](https://netlify.com/) is a great service for hosting static websites\n   \n## Buyte Widget\n\nThe widget is an embeddable React.js app responsible for receiving a user's intent to pay, opening the Go page, and displaying a checkout confirmation dialog/modal after the payment has been authorised.  \n\n## Buyte Go Page (Hosted Payment Page)\n\nThe \"Go\" Hosted Payment Page is a React.js Web App, separate from the widget, developed to mitigate failed domain verifications and minimise domain verification maintenance when offering Apple Pay.  \n\n\u003e This supports use-cases where a Payment Facilitator can offer Apple Pay through their hosted page, and therefore dismiss the requirement for its clients to manage their own Apple Pay Merchant Id Domain Association File.\n\n### Apple Pay \u0026 the Go Page\n\nThe **Apple Pay Merchant Id Domain Association File** is required to be hosted on any domain where an Apple Pay purchase is conducted.  \nThis includes the Go Page.\nDuring an Apple Pay purchase, `https://go.yourdomain.com/.well-known/apple-developer-merchantid-domain-association.txt` will be requested to ensure that the domain is verified.  \nYou can download this file from your Apple Developer Portal.  \n\nWhen deploying the Go Page to Netlify or some alternative, we advise using a Proxy configuration for the association file to simplify management and renewal.  \nIn the `./public/_redirects` file, the following snippet can be added for an association file hosted on S3.  \n```\n/.well-known/* https://s3-ap-southeast-2.amazonaws.com/buyte.au/well-known/:splat 200\n```\n\nNow with this file reachable, third-party websites/domains that have installed their Checkout can redirect to your \"Go\" Page to facilitate their Apple Pay transactions. \n\n## `window.Buyte`\n\n### Installation\n\nYou can use the following script to load the Buyte Widget.  \nPlease replace the S3 URL in the snippet with your own URL targeting the built widget `index.js` file.  \n\n```javascript\n(function(window, document){\n   var load = function(){\n      var script = document.createElement('script');\n      script.async = true;\n      script.type = 'text/javascript';\n      script.src = 'URL_TO_WIDGET_JS_INDEX.js';\n      var firstScript = document.getElementsByTagName('script')[0];\n      firstScript.parentNode.insertBefore(script, firstScript);\n   };\n   if(document.readyState === \"complete\"){\n      load();\n   }else if(window.attachEvent){\n      window.attachEvent('onload', load);\n   }else{\n      window.addEventListener('load', load);\n   }\n})(window, document);\n```\n\n### Create your settings\n\nCheckout settings are established in an object. The parameters are as follows:\n\n| Property           | Type    | Description                                                                                                   |\n| :---               | :---    | :---                                                                                                          |\n| `publicKey`        | string  | **REQUIRED:** The public key retrieved from your Buyte Dashboard, or Buyte API                                |\n| `widgetId`         | string  | **REQUIRED:** The ID of the Checkout Widget retrieved from your Buyte Dashboard, or Buyte API                 |\n| `options.enabled`  | boolean | Whether to enable the widget or not                                                                           |\n| `options.shipping` | boolean | Whether to include shipping options select within the confirmation dialog/modal. Disable for virtual products |\n| `options.dark`     | boolean | Whether to render white buttons for a dark background                                                         |\n| `items[].name`     | string  | The name of the item in the items array                                                                       |\n| `items[].amount`   | integer | The price amount of the item in the items array. Amount is in cents, such that $5.36 is 536                   |\n| `items[].quantity` | integer | The item quantity in the items array.                                                                         |\n\n### Load the Checkout\n\n```javascript\nwindow.Buyte(\"load\", {\n   publicKey: \"pk_ZlQjZlNvLyCfAIDvLu00YlUkXIU2KIKfZPw1KvQiYlpuYyHwXvDh\",\n   widgetId: \"3d50e4a2-ebd9-4c19-8c78-596fe6a07794\",\n   options: {\n      // dark: true\n      enabled: true,\n      shipping: true\n   },\n   items: [\n      {\n         label: \"Some drone\",\n         amount: 5500\n      },\n      {\n         label: \"Some other item\",\n         amount: 1200\n         quantity: 2\n      },\n   ]\n});\n```\n\n### Callbacks\n\n- `onReady`  \n  \n  ```javascript\n  window.Buyte(\"onReady\", function(){ \n     console.log(\"I'm ready!\") \n  });\n  ```\n  \n- `onShippingRequired`  \n  *This is a special callback*  \n  Here, a AJAX request to fetch available shipping methods for the given contact must be made and supplied to the Checkout.  \n  This is only necessary where `shipping` is enabled.  \n  \n  ```javascript\n  window.Buyte(\"onShippingRequired\", function(shippingContact, setShippingMethods){\n      console.log(shippingContact);\n      setTimeout(function(){ // Some AJAX request.\n         setShippingMethods([\n            {\n               \"id\": \"free-shipping\",\n               \"name\": \"Free Shipping\",\n               // \"description\": \"Delivery in a week\",\n               \"rate\": 0,\n               \"minOrder\": 5000\n            },\n            {\n               \"id\": \"express-delivery\",\n               \"name\": \"Express Delivery\",\n               // \"description\": \"Delivers overnight\",\n               \"rate\": 2900,\n               \"minOrder\": 0\n            },\n            {\n               \"id\": \"standard-shipping\",\n               \"name\": \"Standard Shipping\",\n               // \"description\": \"Delivery in a week\",\n               \"rate\": 990,\n               \"minOrder\": 0,\n               \"maxOrder\": 5000\n            }\n         ]);\n      }, 2000);\n   })\n  ```\n  \n- `onPayment`  \n  *This is a special callback*  \n  Here, we receive the Buyte Payment Token.  \n  This Token must be submitted to the Merchant Server to facilitate the payment with the Buyte API.  \n  \n  ```javascript\n   window.Buyte(\"onPayment\", function(paymentToken, done){\n      console.log(paymentToken);\n      setTimeout(function(){ // AJAX request for Payment Capture\n         done();\n         alert(\"Apple Pay Payment Authorised! \" + JSON.stringify(paymentToken));\n      }, 3000)\n   });\n  ```\n  \n- `onAbort`  \n  Triggered when payment authorisation was aborted.\n  \n  ```javascript\n   window.Buyte(\"onAbort\", function(){\n      console.log('From Window: Buyte Closed.');\n   });\n  ```\n- `onStart`  \n  You can optionally choose to delay starting the checkout process and opening the Go Page.\n  \n  ```javascript\n   window.Buyte(\"onStart\", function(type, start){\n      setTimeout(function(){\n         start();\n      }, 1000);\n   });\n  ```\n  \n- `onDestroy`  \n  \n  ```javascript\n  window.Buyte(\"onDestroy\", function(){\n     console.log(\"The widget has been destroyed...\");\n  });\n  ```\n  \n- `onShow`  \n  \n  ```javascript\n   window.Buyte(\"onShow\", function(){\n      console.log(\"The widget has been shown!\");\n   });\n  ```\n  \n- `onHide`  \n  \n  ```javascript\n   window.Buyte(\"onHide\", function(){\n      console.log(\"The widget has been hidden...\");\n   });\n  ```\n  \n- `onEnable`  \n  \n  ```javascript\n   window.Buyte(\"onEnable\", function(){\n      console.log(\"The widget has been enabled!\");\n   });\n  ```\n  \n- `onDisable`  \n  \n  ```javascript\n   window.Buyte(\"onDisable\", function(){\n      console.log(\"The widget has been disabled...\");\n   });\n  ```\n\n### Actions\n\nIt is important to call some actions within the `onReady` callback to ensure that they affect the checkout.\n\n- Add Item  \n   \n   ```javascript\n   window.Buyte(\"add\", {\n      name: \"Some drone #2\"\n      amount: 6000\n   });\n   ```\n   \n- Remove Item  \n  \n  ```javascript\n  window.Buyte(\"remove\", {\n     name: \"Some drone\"\n   });\n   ```\n   \n- Update Checkout  \n  This action is responsible for updating the Checkout's settings.\n  \n  ```javascript\n  window.Buyte(\"update\", {\n     items: [\n        {\n           name: \"This is my cool product!\",\n           amount: 400,\n           quantity: 5\n         }\n      ]\n   });\n  ```\n   \n- Enable Checkout  \n  Delaying checkout enablement may be necessary for eCommerce websites that fetch product data over an AJAX request. In that case, the checkout may be loaded with empty items in a disabled state until the data has been added accordingly.\n   \n   ```javascript\n   window.Buyte(\"enable\");\n   ```\n   \n- Disable Checkout  \n   \n   ```javascript\n   window.Buyte(\"enable\");\n   ```\n   \n- Hide Checkout  \n   \n   ```javascript\n   window.Buyte(\"hide\");\n   ```\n   \n- Show Checkout  \n   \n   ```javascript\n   window.Buyte(\"show\");\n   ```\n   \n- Destroy Checkout  \n   This will require re-loading the checkout.\n   \n   ```javascript\n   window.Buyte(\"destroy\");\n   ```\n\n## Contribution\n\nSimply fork this repo and make it your own, or create a pull request and we can build something awesome together!\n\n## Enterprise Support\n\nWhether you're looking to integrate a Legacy Payment Processor or Banking API, or looking for managed deployment and operation in your cloud, you can contact us at [Web Doodle](https://www.webdoodle.com.au/?ref=github-buyte) to discuss tailored solutions.\n\n## Found this repo interesting?\n\nStar this project ⭐️⭐️⭐️, and feel free to follow me on [Github](https://github.com/rsoury), [Twitter](https://twitter.com/@ryan_soury) or [Medium](https://rsoury.medium.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsoury%2Fbuyte-checkout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frsoury%2Fbuyte-checkout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsoury%2Fbuyte-checkout/lists"}