@juspay-tech/hyperswitch-control-center-embed-core 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -11
- package/package.json +52 -53
package/README.md
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
@juspay-tech/hyperswitch-control-center-embed-core
|
|
1
|
+
# @juspay-tech/hyperswitch-control-center-embed-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Core JavaScript SDK for embedding Hyperswitch Control Center components into any web application.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The `loadHyperswitch` function is the main entry point for initializing embedded Hyperswitch components.
|
|
8
|
+
It:
|
|
9
|
+
|
|
10
|
+
- **Loads UI via an iframe** from the Hyperswitch Control Center
|
|
11
|
+
- **Requires a `fetchToken` function** that calls your backend to retrieve an embedded token
|
|
12
|
+
- **Optionally accepts `initConfig`** to customize the appearance of the embedded UI
|
|
4
13
|
|
|
5
14
|
## Installation
|
|
6
15
|
|
|
@@ -8,24 +17,141 @@
|
|
|
8
17
|
npm install @juspay-tech/hyperswitch-control-center-embed-core
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
|
|
20
|
+
or with `pnpm`:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
pnpm add @juspay-tech/hyperswitch-control-center-embed-core
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Imports
|
|
27
|
+
|
|
28
|
+
### ES Module (recommended)
|
|
12
29
|
|
|
13
30
|
```javascript
|
|
14
31
|
import { loadHyperswitch } from '@juspay-tech/hyperswitch-control-center-embed-core';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### CommonJS
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
const { loadHyperswitch } = require('@juspay-tech/hyperswitch-control-center-embed-core');
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Basic usage
|
|
41
|
+
|
|
42
|
+
Initialize the SDK by providing a `fetchToken` function that calls your backend:
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
const hyperswitch = loadHyperswitch({
|
|
46
|
+
fetchToken: async () => {
|
|
47
|
+
// Call your backend endpoint to get the embedded token
|
|
48
|
+
const response = await fetch('https://your-api.com/embedded/hyperswitch', {
|
|
49
|
+
method: 'GET',
|
|
50
|
+
headers: { 'Content-Type': 'application/json' }
|
|
51
|
+
});
|
|
52
|
+
const data = await response.json();
|
|
53
|
+
return data.token;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Optional customization
|
|
59
|
+
|
|
60
|
+
You can customize the appearance by passing a theme configuration as `initConfig`:
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
const initConfig = {
|
|
64
|
+
primaryColor: '#0066ff',
|
|
65
|
+
backgroundColor: '#ffffff',
|
|
66
|
+
buttons: {
|
|
67
|
+
primary: {
|
|
68
|
+
backgroundColor: '#0066ff',
|
|
69
|
+
textColor: '#ffffff',
|
|
70
|
+
hoverBackgroundColor: '#0052cc'
|
|
71
|
+
},
|
|
72
|
+
secondary: {
|
|
73
|
+
backgroundColor: '#f0f0f0',
|
|
74
|
+
textColor: '#333333',
|
|
75
|
+
hoverBackgroundColor: '#e0e0e0'
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
15
79
|
|
|
16
|
-
// Initialize and use the SDK
|
|
17
80
|
const hyperswitch = loadHyperswitch({
|
|
18
|
-
|
|
81
|
+
fetchToken: async () => { /* ... */ },
|
|
82
|
+
initConfig
|
|
83
|
+
});
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
All fields in `initConfig` are optional. Omitting them uses the default Control Center theme.
|
|
87
|
+
|
|
88
|
+
## Creating a component
|
|
89
|
+
|
|
90
|
+
Create an embeddable component instance:
|
|
91
|
+
|
|
92
|
+
```javascript
|
|
93
|
+
const connectors = hyperswitch.create('connectors', {
|
|
94
|
+
url: 'https://app.hyperswitch.io'
|
|
19
95
|
});
|
|
20
96
|
```
|
|
21
97
|
|
|
22
|
-
|
|
98
|
+
Currently available component: `connectors`.
|
|
99
|
+
|
|
100
|
+
## Mounting
|
|
101
|
+
|
|
102
|
+
Mount the component into a container element in your HTML:
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<div id="hyperswitch-root"></div>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```javascript
|
|
109
|
+
connectors.mount('#hyperswitch-root');
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## API reference
|
|
113
|
+
|
|
114
|
+
### `loadHyperswitch(options)`
|
|
115
|
+
|
|
116
|
+
Returns a `Hyperswitch` instance.
|
|
117
|
+
|
|
118
|
+
| Parameter | Type | Required | Description |
|
|
119
|
+
|-----------|------|----------|-------------|
|
|
120
|
+
| `fetchToken` | `() => Promise<string \| undefined>` | Yes | Async function that fetches the embedded token from your backend |
|
|
121
|
+
| `initConfig` | `MerchantTheme` | No | Theme customization object |
|
|
122
|
+
|
|
123
|
+
### `MerchantTheme`
|
|
124
|
+
|
|
125
|
+
| Property | Type | Description |
|
|
126
|
+
|----------|------|-------------|
|
|
127
|
+
| `primaryColor?` | `string` | Primary accent color |
|
|
128
|
+
| `backgroundColor?` | `string` | Page background color |
|
|
129
|
+
| `buttons?.primary?` | `object` | Primary button styling |
|
|
130
|
+
| `buttons?.primary?.backgroundColor?` | `string` | Primary button background color |
|
|
131
|
+
| `buttons?.primary?.textColor?` | `string` | Primary button text color |
|
|
132
|
+
| `buttons?.primary?.hoverBackgroundColor?` | `string` | Primary button hover color |
|
|
133
|
+
| `buttons?.secondary?` | `object` | Secondary button styling |
|
|
134
|
+
| `buttons?.secondary?.backgroundColor?` | `string` | Secondary button background color |
|
|
135
|
+
| `buttons?.secondary?.textColor?` | `string` | Secondary button text color |
|
|
136
|
+
| `buttons?.secondary?.hoverBackgroundColor?` | `string` | Secondary button hover color |
|
|
137
|
+
|
|
138
|
+
### `Hyperswitch.create(name, options)`
|
|
139
|
+
|
|
140
|
+
Creates a component instance.
|
|
141
|
+
|
|
142
|
+
| Parameter | Type | Description |
|
|
143
|
+
|-----------|------|-------------|
|
|
144
|
+
| `name` | `string` | Component name (e.g., `'connectors'`) |
|
|
145
|
+
| `options.url` | `string` | Base URL for the embedded component |
|
|
146
|
+
|
|
147
|
+
### `.mount(selector)`
|
|
148
|
+
|
|
149
|
+
Mounts the component to a DOM element matching the given CSS selector.
|
|
150
|
+
|
|
151
|
+
## Documentation
|
|
23
152
|
|
|
24
|
-
|
|
25
|
-
- No framework dependencies
|
|
26
|
-
- TypeScript support
|
|
27
|
-
- Tree-shakeable exports
|
|
153
|
+
For more details and examples, see the [Integration Guide](https://docs.hyperswitch.io/explore-hyperswitch/account-management/beta-embeddable-components/integration-guide).
|
|
28
154
|
|
|
29
155
|
## License
|
|
30
156
|
|
|
31
|
-
|
|
157
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,56 +1,55 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
},
|
|
15
|
-
"files": [
|
|
16
|
-
"dist",
|
|
17
|
-
"README.md"
|
|
18
|
-
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"build": "rollup -c",
|
|
21
|
-
"type-check": "tsc --noEmit",
|
|
22
|
-
"clean": "rm -rf dist",
|
|
23
|
-
"prepublishOnly": "pnpm run clean && pnpm run build"
|
|
24
|
-
},
|
|
25
|
-
"keywords": [
|
|
26
|
-
"hyperswitch",
|
|
27
|
-
"control-center",
|
|
28
|
-
"embedded",
|
|
29
|
-
"sdk",
|
|
30
|
-
"embed"
|
|
31
|
-
],
|
|
32
|
-
"author": "Juspay Technologies",
|
|
33
|
-
"license": "ISC",
|
|
34
|
-
"repository": {
|
|
35
|
-
"type": "git",
|
|
36
|
-
"url": "https://github.com/juspay/hyperswitch-control-center-embedded.git",
|
|
37
|
-
"directory": "core"
|
|
38
|
-
},
|
|
39
|
-
"bugs": {
|
|
40
|
-
"url": "https://github.com/juspay/hyperswitch-control-center-embedded/issues"
|
|
41
|
-
},
|
|
42
|
-
"homepage": "https://github.com/juspay/hyperswitch-control-center-embedded#readme",
|
|
43
|
-
"publishConfig": {
|
|
44
|
-
"access": "public"
|
|
45
|
-
},
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"@rollup/plugin-commonjs": "^29.0.0",
|
|
48
|
-
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
49
|
-
"@rollup/plugin-replace": "^6.0.3",
|
|
50
|
-
"@types/node": "^24.10.0",
|
|
51
|
-
"rollup": "^2.79.2",
|
|
52
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
53
|
-
"rollup-plugin-typescript2": "^0.36.0",
|
|
54
|
-
"typescript": "^5.9.3"
|
|
2
|
+
"name": "@juspay-tech/hyperswitch-control-center-embed-core",
|
|
3
|
+
"version": "1.1.1",
|
|
4
|
+
"description": "Hyperswitch Control Center Embed - Core Javascript SDK for embedding components",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.esm.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.esm.js",
|
|
11
|
+
"require": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
55
13
|
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"keywords": [
|
|
20
|
+
"hyperswitch",
|
|
21
|
+
"control-center",
|
|
22
|
+
"embedded",
|
|
23
|
+
"sdk",
|
|
24
|
+
"embed"
|
|
25
|
+
],
|
|
26
|
+
"author": "Juspay Technologies",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://github.com/juspay/hyperswitch-control-center-embedded.git",
|
|
31
|
+
"directory": "core"
|
|
32
|
+
},
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "https://github.com/juspay/hyperswitch-control-center-embedded/issues"
|
|
35
|
+
},
|
|
36
|
+
"homepage": "https://github.com/juspay/hyperswitch-control-center-embedded#readme",
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
42
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
43
|
+
"@rollup/plugin-replace": "^6.0.3",
|
|
44
|
+
"@types/node": "^24.10.0",
|
|
45
|
+
"rollup": "^2.79.2",
|
|
46
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
47
|
+
"rollup-plugin-typescript2": "^0.36.0",
|
|
48
|
+
"typescript": "^5.9.3"
|
|
49
|
+
},
|
|
50
|
+
"scripts": {
|
|
51
|
+
"build": "rollup -c",
|
|
52
|
+
"type-check": "tsc --noEmit",
|
|
53
|
+
"clean": "rm -rf dist"
|
|
54
|
+
}
|
|
56
55
|
}
|