{"id":22096498,"url":"https://github.com/uphold/topper-web-sdk","last_synced_at":"2025-06-28T17:32:04.335Z","repository":{"id":216859775,"uuid":"742536102","full_name":"uphold/topper-web-sdk","owner":"uphold","description":"Web SDK designed to help developers to integrate Topper into their web applications.","archived":false,"fork":false,"pushed_at":"2025-02-14T15:33:41.000Z","size":127,"stargazers_count":8,"open_issues_count":2,"forks_count":6,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-04T23:11:36.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/uphold/topper-web-sdk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uphold.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-01-12T17:42:38.000Z","updated_at":"2025-04-07T13:14:52.000Z","dependencies_parsed_at":"2024-01-13T09:22:24.498Z","dependency_job_id":"c55cfd86-da56-4784-b1b5-93b3e8127d85","html_url":"https://github.com/uphold/topper-web-sdk","commit_stats":null,"previous_names":["uphold/topper-web-sdk"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/uphold/topper-web-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uphold%2Ftopper-web-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uphold%2Ftopper-web-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uphold%2Ftopper-web-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uphold%2Ftopper-web-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uphold","download_url":"https://codeload.github.com/uphold/topper-web-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uphold%2Ftopper-web-sdk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262468799,"owners_count":23316193,"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":[],"created_at":"2024-12-01T04:11:16.920Z","updated_at":"2025-06-28T17:32:04.328Z","avatar_url":"https://github.com/uphold.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Topper Web SDK\n\nThis web SDK is designed to help developers to integrate Topper into their web applications.\n\n## Installation\n\n```bash\n# Using yarn\n$ yarn add @uphold/topper-web-sdk\n\n# Using npm\n$ npm install @uphold/topper-web-sdk\n```\n\n## Usage\n\n### Creating an instance\n\nFirst, create an instance of `TopperWebSdk`:\n\n```javascript\nimport { TopperWebSdk } from '@uphold/topper-web-sdk';\n\nconst topper = new TopperWebSdk();\n```\n\nWhere a `config` object can be passed to the constructor:\n\n| Property       | Default Value | Values                                         |\n| -------------- | ------------- | ---------------------------------------------- |\n| environment    | `production`  | `production`, `sandbox`                        |\n| initial_screen |               | `authentication`                               |\n| is_android_app | `false`       | `true`, `false`                                |\n| is_ios_app     | `false`       | `true`, `false`                                |\n| locale         | `en`          | `en`, `en-US`, `pt`, `pt-BR`, `es`, `es-ES`    |\n| theme          | `dark`        | `dark`, `light`                                |\n| variant        | `new-tab`     | `new-tab`, `same-tab`, `iframe`                |\n\n### Initiate Topper\n\n```javascript\nimport { TOPPER_ENVIRONMENTS, TOPPER_VARIANTS, TopperWebSdk } from '@uphold/topper-web-sdk';\n\n// Open in a new tab (default).\nconst topper = new TopperWebSdk();\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n\n// Open in an iframe.\nconst topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });\nconst topperIframe = document.getElementById('topper-iframe');\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e, iframeElement: topperIframe });\n\n// Open in the same tab.\nconst topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.SAME_TAB });\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n\n// Open sandbox environment.\nconst topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX });\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n\n// Open with specific locale.\nconst topper = new TopperWebSdk({ locale: TOPPER_LOCALES.PT });\n\n// Open with light theme.\nconst topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT });\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n\n// Override initial config if needed.\nconst topper = new TopperWebSdk();\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e, config: { variant: TOPPER_VARIANTS.SAME_TAB } });\n```\n\n### Event Handling\n\nListen to single events like order placed or all events:\n\nSingle event:\n\n```javascript\nconst topper = new TopperWebSdk();\n\ntopper.on(TOPPER_EVENTS.ORDER_PLACED, ({ data }) =\u003e {});\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n``` \n\nAll events:\n\n```javascript\nconst topper = new TopperWebSdk();\n\ntopper.on(TOPPER_EVENTS.ALL, ({ data, name }) =\u003e {});\n\ntopper.initialize({ bootstrapToken: \u003cbootstrap token\u003e });\n``` \n\n### Multiple instances\n\nYou can initiate Topper on multiple instances, and listen to events like:\n\n```javascript\nconst topperIframe1 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });\nconst topperIframe2 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });\n\nconst topperIframe1Element = document.getElementById('topper-iframe-1');\nconst topperIframe2Element = document.getElementById('topper-iframe-2');\n\ntopperIframe1.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) =\u003e {});\ntopperIframe2.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) =\u003e {});\n\ntopperIframe1.initialize({ bootstrapToken: \u003cbootstrap token\u003e, iframeElement: topperIframe1Element });\ntopperIframe2.initialize({ bootstrapToken: \u003cbootstrap token\u003e, iframeElement: topperIframe2Element });\n```\n\n### Triggering Events\n\nUsed by `@uphold/topper-web` to trigger events:\n\nTrigger events:\n\n```javascript\nTopperWebSdk.triggerEvent(TOPPER_EVENTS.ORDER_PLACED, data);\n```\n\n## Issues\n\nFor reporting issues, bugs, or feature requests, please use the [GitHub Issues page](https://github.com/uphold/topper-web-sdk/issues).\n\n## Release process\n\nThe release of a version is automated via the release GitHub workflow. Run it by clicking the \"Run workflow\" button.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file in the GitHub repository for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuphold%2Ftopper-web-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuphold%2Ftopper-web-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuphold%2Ftopper-web-sdk/lists"}