@tap-payments/connect-v2 0.0.26-test → 0.0.28-test
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 +147 -40
- package/build/index.cjs.js +1 -1
- package/build/index.d.ts +12 -10
- package/build/index.esm.js +18 -18
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,50 +1,157 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Connect SDK V2
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A React SDK that allows merchants to easily integrate with Tap Connect in their applications, handling identification and authentication seamlessly.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
This package provides:
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
7
|
+
- **_ConnectElement_**: a React component that can be embedded directly in your app to enable secure, localized, and customizable connections.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
- **_renderTapConnect_**: a UMD helper function (available on the global TapConnectSDK object) that lets you render the widget in plain JavaScript environments without a React build setup.
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
---
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
## 📦 Installation
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
15
|
+
- Using `npm`:
|
|
16
|
+
```bash
|
|
17
|
+
npm install @tap-payments/connect-v2
|
|
18
|
+
```
|
|
19
|
+
- Using `yarn`:
|
|
20
|
+
```bash
|
|
21
|
+
yarn add @tap-payments/connect-v2
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## ⚡ Quick Start
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import React, { useState } from 'react';
|
|
30
|
+
import { ConnectElement, ConnectScope, ConnectTheme, ConnectMode } from '@tap-payments/connect-v2';
|
|
31
|
+
|
|
32
|
+
const App = () => {
|
|
33
|
+
const [open, setOpen] = useState(false);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<button onClick={() => setOpen(true)}>Open Connect Element</button>
|
|
38
|
+
|
|
39
|
+
<ConnectElement
|
|
40
|
+
open={open}
|
|
41
|
+
publicKey="pk_test_XXXXXXXXXXXXXXXXXXXXXXX"
|
|
42
|
+
merchantDomain="https://example.com"
|
|
43
|
+
theme={ConnectTheme.DARK}
|
|
44
|
+
scope={ConnectScope.MERCHANT}
|
|
45
|
+
appInfo={{
|
|
46
|
+
name: 'My App',
|
|
47
|
+
version: '1.0.0',
|
|
48
|
+
}}
|
|
49
|
+
onClose={() => setOpen(false)}
|
|
50
|
+
features={{ poweredBy: true, closeButton: true }}
|
|
51
|
+
mode={ConnectMode.POPUP}
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default App;
|
|
26
58
|
```
|
|
27
59
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
## 🌐 Vanilla JS Demo
|
|
61
|
+
|
|
62
|
+
You can also use the SDK without a React build setup by including the UMD bundle directly in your HTML file. The global TapConnectSDK object provides a helper method to render the widget into any container element.
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<!doctype html>
|
|
66
|
+
<html>
|
|
67
|
+
<head>
|
|
68
|
+
<title>Tap Connect SDK Demo</title>
|
|
69
|
+
</head>
|
|
70
|
+
<body>
|
|
71
|
+
<div id="connect-container"></div>
|
|
72
|
+
|
|
73
|
+
<button onclick="openConnect()">Open Connect</button>
|
|
74
|
+
|
|
75
|
+
<!-- React and ReactDOM (required for the widget to work) -->
|
|
76
|
+
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
77
|
+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
78
|
+
|
|
79
|
+
<!-- Tap Connect SDK UMD bundle -->
|
|
80
|
+
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-0.0.28-test/index.js"></script>
|
|
81
|
+
|
|
82
|
+
<script>
|
|
83
|
+
function openConnect() {
|
|
84
|
+
TapConnectSDK.renderConnectElement('connect-container', {
|
|
85
|
+
open: true,
|
|
86
|
+
publicKey: 'pk_test_lat64TEDSvHrUOYAxVRe28PQ',
|
|
87
|
+
merchantDomain: 'https://connect.dev.tap.company',
|
|
88
|
+
language: TapConnectSDK.ConnectLanguage.EN,
|
|
89
|
+
appInfo: {
|
|
90
|
+
name: 'My App',
|
|
91
|
+
},
|
|
92
|
+
theme: TapConnectSDK.ConnectTheme.DARK,
|
|
93
|
+
scope: TapConnectSDK.ConnectScope.MERCHANT,
|
|
94
|
+
data: ['brand', 'entity'],
|
|
95
|
+
showBoard: true,
|
|
96
|
+
mode: TapConnectSDK.ConnectMode.PAGE,
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
</script>
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
50
102
|
```
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## 🧠 Props
|
|
107
|
+
|
|
108
|
+
| Prop | Type | Required | Description |
|
|
109
|
+
| ----------------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
110
|
+
| **open** | `boolean` | ✅ | Controls whether Connect element is open or closed. |
|
|
111
|
+
| **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments. |
|
|
112
|
+
| **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://expamle.com`). |
|
|
113
|
+
| **scope** | `ConnectScope` | ✅ | Defines the integration scope [**auth**, **merchant**]. |
|
|
114
|
+
| **appInfo** | `ConnectAppInfo` | ✅ | Information about the merchant’s host application. |
|
|
115
|
+
| — name | `string` | ✅ | The display name of your application. |
|
|
116
|
+
| — identifier | `string` | ❌ | A unique identifier for your application (e.g., bundle ID or package name). |
|
|
117
|
+
| — version | `string` | ❌ | The current version of your application (e.g., `1.0.0`). |
|
|
118
|
+
| **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully initializing. |
|
|
119
|
+
| **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed by the user. |
|
|
120
|
+
| **onError** | `(eror: CustomError) => void` | ❌ | Triggered on any error. |
|
|
121
|
+
| **onSuccess** | `(response: Record<string, string \| number>) => void` | ❌ | Callback triggered when the flow completes successfully. |
|
|
122
|
+
| **theme** | `ConnectTheme` | ❌ | Customize the app theme [**light**, **dark**]. |
|
|
123
|
+
| **language** | `ConnectLanguage` | ❌ | Language code for localization [**en**, **ar**]. |
|
|
124
|
+
| **businessCountryCode** | `string` | ❌ | Country ISO2 code of the merchant country. |
|
|
125
|
+
| **showBoard** | `boolean` | ❌ | Show the merchant board UI. |
|
|
126
|
+
| **leadId** | `string` | ❌ | Optional lead ID for loading lead data. |
|
|
127
|
+
| **platforms** | `string` | ❌ | - |
|
|
128
|
+
| **paymentProvider** | `ConnectPaymentProvider` | ❌ | Information about the payment provider configuration. |
|
|
129
|
+
| — technologyId | `string` | ✅ | - |
|
|
130
|
+
| — settlementBy | `string` | ✅ | - |
|
|
131
|
+
| **features** | `ConnectAppFeatures` | ❌ | Additional configuration options for appearance and UI. |
|
|
132
|
+
| — poweredBy | `boolean` | ❌ | Show or hide the “Powered by Tap” logo. |
|
|
133
|
+
| — merchantLogo | `boolean` | ❌ | Show or hide the merchant’s logo in the widget. |
|
|
134
|
+
| — closeButton | `boolean` | ❌ | Display a close button on the widget. |
|
|
135
|
+
| — dialogStartTransition | `ConnectDialogTransition` | ❌ | Transition animation when the dialog opens [**left**,**right**,**up**,**down**]. |
|
|
136
|
+
| — dialogEndTransition | `ConnectDialogTransition` | ❌ | Transition animation when the dialog closes [**left**,**right**,**up**,**down**]. |
|
|
137
|
+
| — dialogEdgeFormat | `ConnectDialogEdgeFormat` | ❌ | Controls the shape/format of the dialog edges [**curved**, **straight**]. |
|
|
138
|
+
| **postUrl** | `string` | ❌ | Endpoint to post our data to merchant's server. |
|
|
139
|
+
| **redirectUrl** | `string` | ❌ | Redirect URL after success. |
|
|
140
|
+
| **data** | `string[]` | ❌ | Merchant data array (e.g. **operator**, **brand**, **entity**, etc.). |
|
|
141
|
+
| **mode** | `ConnectMode` | ❌ | Controls the display behavior of the Connect Element, using the ConnectMode enum to specify whether it appears as a full page, popup, or display content only. |
|
|
142
|
+
| **notification** | `ConnectNotification` | ❌ | Notification configuration to notify the user after account creation. |
|
|
143
|
+
| — email | `boolean` | ✅ | Enable or disable email notifications. |
|
|
144
|
+
| — mobile | `boolean` | ❌ | Enable or disable mobile (SMS) notifications. |
|
|
145
|
+
| **boardEditable** | `boolean` | ❌ | Allow merchant board to be editable. |
|
|
146
|
+
| **boardId** | `string` | ❌ | Specify existing board ID. |
|
|
147
|
+
| **boardInfoId** | `string` | ❌ | Specify board info ID for password kit. |
|
|
148
|
+
| **userId** | `string` | ❌ | User ID for password kit. |
|
|
149
|
+
| **userType** | `string` | ❌ | Type of the user for password kit. |
|
|
150
|
+
| **operationType** | `ConnectPasswordOperationType` | ❌ | Operation type for password kit. |
|
|
151
|
+
| **loginMode** | `boolean` | ❌ | Opens Connect in login/auth mode. |
|
|
152
|
+
| **region** | `string` | ❌ | Region code that changes the target middlware (e.g., **sa** for Saudi). |
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
Developed by **Tap Payments**
|
|
157
|
+
🌐 [Website](https://www.tap.company) · 💬 [Support](https://www.tap.company/support) · 💼 [LinkedIn](https://www.linkedin.com/company/tappayments)
|
package/build/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("react"),A=require("react-dom");function R(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const u=R(f);var g=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(g||{}),_=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(_||{}),y=(e=>(e.SET_PASSWORD="set_password",e.RESET_PASSWORD="reset_password",e))(y||{}),C=(e=>(e.DARK="dark",e.LIGHT="light",e))(C||{}),O=(e=>(e.AR="ar",e.EN="en",e))(O||{}),E=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(E||{}),b=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(b||{}),l=(e=>(e.ON_CLOSE="connect:onClose",e.ON_ERROR="connect:onError",e.ON_SUCCESS="connect:onSuccess",e.ON_READY="connect:onReady",e.ON_LOADED="connect:onLoaded",e))(l||{}),h=(e=>(e.PROFILE_TOKEN="profile_token",e.THEME="theme",e.LANGUAGE="lang",e))(h||{});const L=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:n="rgba(238, 238, 238, 1)",innerStartColor:r="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:s=3,toggleAnimation:i=!1})=>t.jsx("div",{style:{position:"relative",width:"135px",height:"135px"},children:t.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:t.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("react"),A=require("react-dom");function R(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const u=R(f);var g=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(g||{}),_=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(_||{}),y=(e=>(e.SET_PASSWORD="set_password",e.RESET_PASSWORD="reset_password",e))(y||{}),C=(e=>(e.DARK="dark",e.LIGHT="light",e))(C||{}),O=(e=>(e.AR="ar",e.EN="en",e))(O||{}),E=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(E||{}),b=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(b||{}),l=(e=>(e.ON_CLOSE="connect:onClose",e.ON_ERROR="connect:onError",e.ON_SUCCESS="connect:onSuccess",e.ON_READY="connect:onReady",e.ON_LOADED="connect:onLoaded",e))(l||{}),h=(e=>(e.PROFILE_TOKEN="profile_token",e.THEME="theme",e.LANGUAGE="lang",e))(h||{});const L=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:n="rgba(238, 238, 238, 1)",innerStartColor:r="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:s=3,toggleAnimation:i=!1})=>t.jsx("div",{style:{position:"relative",width:"135px",height:"135px"},children:t.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:t.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{children:[t.jsx("circle",{cx:"89.5",cy:"86.5",r:"67.5",fill:"none",stroke:"url(#strokeGradientOuter_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"425 125",children:i&&t.jsxs(t.Fragment,{children:[t.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 89.5 86.5",to:"360 89.5 86.5",dur:`${s/3}s`,repeatCount:"indefinite"}),t.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; 425; 425; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${s}s`,repeatCount:"indefinite"})]})}),t.jsx("circle",{cx:"89.5",cy:"86.5",r:"48",fill:"none",stroke:"url(#strokeGradientInner_1427_22275)",strokeWidth:"9.6",strokeLinecap:"round",strokeDasharray:"300 100",children:i&&t.jsxs(t.Fragment,{children:[t.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"360 89.5 86.5",to:"0 89.5 86.5",dur:`${s/3}s`,repeatCount:"indefinite"}),t.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; -300; -300; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${s}s`,repeatCount:"indefinite"})]})})]}),t.jsxs("defs",{children:[t.jsxs("filter",{id:"filter0_dddi_1427_22275",x:"0.882668",y:"0.899429",width:"198.08",height:"195.314",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[t.jsx("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),t.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),t.jsx("feOffset",{dy:"1.68224"}),t.jsx("feGaussianBlur",{stdDeviation:"4.20656"}),t.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),t.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 0 0.824495 0 0 0 1 0"}),t.jsx("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_1427_22275"}),t.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),t.jsx("feOffset",{dx:"22.3542",dy:"22.6047"}),t.jsx("feGaussianBlur",{stdDeviation:"9.80447"}),t.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),t.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0 0.740723 0 0 0 0.6 0"}),t.jsx("feBlend",{mode:"normal",in2:"effect1_dropShadow_1427_22275",result:"effect2_dropShadow_1427_22275"}),t.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),t.jsx("feOffset",{dx:"-6.03352",dy:"-3.01676"}),t.jsx("feGaussianBlur",{stdDeviation:"7.5419"}),t.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),t.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"}),t.jsx("feBlend",{mode:"normal",in2:"effect2_dropShadow_1427_22275",result:"effect3_dropShadow_1427_22275"}),t.jsx("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect3_dropShadow_1427_22275",result:"shape"}),t.jsx("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",result:"hardAlpha"}),t.jsx("feOffset",{dy:"1.50838"}),t.jsx("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),t.jsx("feColorMatrix",{type:"matrix",values:"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"}),t.jsx("feBlend",{mode:"normal",in2:"shape",result:"effect4_innerShadow_1427_22275"})]}),t.jsxs("linearGradient",{id:"strokeGradientOuter_1427_22275",x1:"89.5",y1:"19",x2:"89.5",y2:"154",gradientUnits:"userSpaceOnUse",children:[t.jsx("stop",{stopColor:e}),t.jsx("stop",{offset:"1",stopColor:n})]}),t.jsxs("linearGradient",{id:"strokeGradientInner_1427_22275",x1:"89.4991",y1:"38.2849",x2:"89.4991",y2:"134.713",gradientUnits:"userSpaceOnUse",children:[t.jsx("stop",{stopColor:r}),t.jsx("stop",{offset:"1",stopColor:o})]})]})]})})}),T=f.memo(L),N=f.createContext({}),v=()=>f.useContext(N);function U({children:e,props:n}){const[r,o]=f.useState(!1),s=a=>{o(a)},i=()=>{o(!1)};return t.jsx(N.Provider,{value:{...n,onLoadingHandler:s,loading:r,onLoaded:i},children:e})}const G="https://68b564fae5dc090291aeddd7.mockapi.io/api/config",I="https://68b564fae5dc090291aeddd7.mockapi.io/api/config",P="https://68b564fae5dc090291aeddd7.mockapi.io/api/config",D="tap-connect-sdk-iframe",x="https://connect.alpha.tap.company",F=({src:e})=>{const{loading:n}=v();return t.jsxs(t.Fragment,{children:[n&&t.jsx(T,{toggleAnimation:!0}),e&&t.jsx("iframe",{id:D,title:"connect",src:e,style:{width:"100%",height:"100%",border:"none",position:"absolute",top:0,left:0}})]})};var M=function(e){var n,r;return((r=(n=e==null?void 0:e.response)===null||n===void 0?void 0:n.data)===null||r===void 0?void 0:r.errors)!==void 0},B=function(e){return e instanceof Error},$=function(e){return typeof e=="string"},H=function(e){try{var n=e.response.data.errors,r=n[0],o=r.description,s=r.code;return{message:o,code:s}}catch(i){return{message:i.message,code:"UNKNOWN"}}},W=function(e){try{var n=e.message,r=n.split("::"),o=r[0],s=r[1];return{message:s,code:o}}catch(i){return{message:i.message,code:"UNKNOWN"}}},K=function(e){try{var n=e.split("::"),r=n[0],o=n[1];return{message:o,code:r}}catch(s){return{message:s,code:"UNKNOWN"}}},q=function(){function e(n){if(Object.defineProperty(this,"code",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),M(n)){var r=H(n);this.code=r.code,this.message=r.message}else if(B(n)){var r=W(n);this.code=r.code,this.message=r.message}else if($(n)){var r=K(n);this.code=r.code,this.message=r.message}else this.code="UNKNOWN",this.message="Unknown error"}return Object.defineProperty(e.prototype,"getCode",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.code}}),Object.defineProperty(e.prototype,"getMessage",{enumerable:!1,configurable:!0,writable:!0,value:function(){return this.message}}),Object.defineProperty(e.prototype,"getClientError",{enumerable:!1,configurable:!0,writable:!0,value:function(){return{message:this.message,code:this.code}}}),e}();const Y=(e="tap-connect-sdk-element")=>{const n=document.getElementById(e);if(n)return n;const r=document.createElement("div");return r.setAttribute("id",e),document.body.prepend(r),r},z=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,J=e=>e==="dr",V=(e="")=>{const[n,r]=e.split("-");return z(n)?J(r)?P:I:G},Q=()=>{const[e,n]=u.useState(""),{onError:r,onLoadingHandler:o,loginMode:s,region:i,...a}=v(),p=async()=>{o(!0);try{const c=await fetch(V(i),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(a)});if(!c.ok)throw new Error(`${c.status}::${c.statusText}`);const d=await c.json();if(!d.redirect_url){const m=new URLSearchParams;a!=null&&a.theme&&m.append(h.THEME,a.theme),a!=null&&a.language&&m.append(h.LANGUAGE,a.language),m.append(h.PROFILE_TOKEN,d.id);const k=s?`${x}/auth`:x;d.redirect_url=`${k}?${m.toString()}`}if(a.mode!==g.PAGE)return n(d.redirect_url);window.location.href=d.redirect_url}catch(c){const d=new q(c);r==null||r(d.getClientError()),o(!1)}};return u.useEffect(()=>{p()},[]),{connectLink:e}},X=()=>{const{onSuccess:e,onClose:n,onError:r,onReady:o,onLoaded:s}=v(),i=u.useCallback(async a=>{if(a.origin!==x)return;const{data:p,event:c}=a.data;switch(c){case l.ON_CLOSE:n==null||n();break;case l.ON_ERROR:r==null||r(p);break;case l.ON_SUCCESS:e(p);break;case l.ON_LOADED:s();break;case l.ON_READY:o==null||o();break}},[n,r,s,o,e]);u.useEffect(()=>(window.addEventListener("message",i,!1),()=>{window.removeEventListener("message",i)}),[i])},Z=()=>{const{connectLink:e}=Q();return X(),t.jsx("div",{id:"tap-connect-main-container",style:{display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(0, 0, 0, 0.5)",position:"fixed",top:0,left:0,width:"100%",height:"100%"},children:t.jsx(F,{src:e})})},ee=e=>t.jsx(U,{props:e,children:e.open&&t.jsx(Z,{})}),w=u.memo(ee);var S,j=A;S=j.createRoot,j.hydrateRoot;const te=(e,n)=>{const r=Y(e),o=S(r);return o.render(t.jsx(w,{...n})),{unmount:()=>o.unmount()}};exports.ConnectDialogEdgeFormat=E;exports.ConnectDialogTransition=b;exports.ConnectElement=w;exports.ConnectLanguage=O;exports.ConnectMode=g;exports.ConnectPasswordOperationType=y;exports.ConnectScope=_;exports.ConnectTheme=C;exports.renderConnectElement=te;
|
package/build/index.d.ts
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React_2 from 'react';
|
|
3
3
|
|
|
4
|
+
declare type ConnectAppFeatures = {
|
|
5
|
+
poweredBy?: boolean;
|
|
6
|
+
merchantLogo?: boolean;
|
|
7
|
+
closeButton?: boolean;
|
|
8
|
+
dialogStartTransition?: ConnectDialogTransition;
|
|
9
|
+
dialogEndTransition?: ConnectDialogTransition;
|
|
10
|
+
dialogEdgeFormat?: ConnectDialogEdgeFormat;
|
|
11
|
+
};
|
|
12
|
+
|
|
4
13
|
export declare type ConnectAppInfo = {
|
|
5
14
|
name: string;
|
|
6
15
|
identifier?: string;
|
|
@@ -43,8 +52,8 @@ export declare enum ConnectPasswordOperationType {
|
|
|
43
52
|
}
|
|
44
53
|
|
|
45
54
|
export declare type ConnectPaymentProvider = {
|
|
46
|
-
|
|
47
|
-
|
|
55
|
+
technologyId: string;
|
|
56
|
+
settlementBy: string;
|
|
48
57
|
};
|
|
49
58
|
|
|
50
59
|
export declare type ConnectProps = {
|
|
@@ -64,14 +73,7 @@ export declare type ConnectProps = {
|
|
|
64
73
|
leadId?: string;
|
|
65
74
|
platforms?: Array<string>;
|
|
66
75
|
paymentProvider?: ConnectPaymentProvider;
|
|
67
|
-
features?:
|
|
68
|
-
poweredBy?: boolean;
|
|
69
|
-
merchantLogo?: boolean;
|
|
70
|
-
closeButton?: boolean;
|
|
71
|
-
dialogStartTransition?: ConnectDialogTransition;
|
|
72
|
-
dialogEndTransition?: ConnectDialogTransition;
|
|
73
|
-
dialogEdgeFormat?: ConnectDialogEdgeFormat;
|
|
74
|
-
};
|
|
76
|
+
features?: ConnectAppFeatures;
|
|
75
77
|
postUrl?: string;
|
|
76
78
|
redirectUrl?: string;
|
|
77
79
|
data?: Array<string>;
|
package/build/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as c, Fragment as v } from "react/jsx-runtime";
|
|
2
2
|
import * as f from "react";
|
|
3
3
|
import g from "react";
|
|
4
4
|
import w from "react-dom";
|
|
@@ -30,8 +30,8 @@ const U = ({
|
|
|
30
30
|
height: "100%",
|
|
31
31
|
opacity: 0.9
|
|
32
32
|
},
|
|
33
|
-
children: /* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */
|
|
33
|
+
children: /* @__PURE__ */ c("svg", { width: "199", height: "197", viewBox: "0 0 199 197", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
34
|
+
/* @__PURE__ */ c("g", { children: [
|
|
35
35
|
/* @__PURE__ */ t(
|
|
36
36
|
"circle",
|
|
37
37
|
{
|
|
@@ -43,7 +43,7 @@ const U = ({
|
|
|
43
43
|
strokeWidth: "9.6",
|
|
44
44
|
strokeLinecap: "round",
|
|
45
45
|
strokeDasharray: "425 125",
|
|
46
|
-
children: i && /* @__PURE__ */
|
|
46
|
+
children: i && /* @__PURE__ */ c(v, { children: [
|
|
47
47
|
/* @__PURE__ */ t(
|
|
48
48
|
"animateTransform",
|
|
49
49
|
{
|
|
@@ -79,7 +79,7 @@ const U = ({
|
|
|
79
79
|
strokeWidth: "9.6",
|
|
80
80
|
strokeLinecap: "round",
|
|
81
81
|
strokeDasharray: "300 100",
|
|
82
|
-
children: i && /* @__PURE__ */
|
|
82
|
+
children: i && /* @__PURE__ */ c(v, { children: [
|
|
83
83
|
/* @__PURE__ */ t(
|
|
84
84
|
"animateTransform",
|
|
85
85
|
{
|
|
@@ -105,8 +105,8 @@ const U = ({
|
|
|
105
105
|
}
|
|
106
106
|
)
|
|
107
107
|
] }),
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
108
|
+
/* @__PURE__ */ c("defs", { children: [
|
|
109
|
+
/* @__PURE__ */ c(
|
|
110
110
|
"filter",
|
|
111
111
|
{
|
|
112
112
|
id: "filter0_dddi_1427_22275",
|
|
@@ -177,7 +177,7 @@ const U = ({
|
|
|
177
177
|
]
|
|
178
178
|
}
|
|
179
179
|
),
|
|
180
|
-
/* @__PURE__ */
|
|
180
|
+
/* @__PURE__ */ c(
|
|
181
181
|
"linearGradient",
|
|
182
182
|
{
|
|
183
183
|
id: "strokeGradientOuter_1427_22275",
|
|
@@ -192,7 +192,7 @@ const U = ({
|
|
|
192
192
|
]
|
|
193
193
|
}
|
|
194
194
|
),
|
|
195
|
-
/* @__PURE__ */
|
|
195
|
+
/* @__PURE__ */ c(
|
|
196
196
|
"linearGradient",
|
|
197
197
|
{
|
|
198
198
|
id: "strokeGradientInner_1427_22275",
|
|
@@ -223,7 +223,7 @@ function T({ children: e, props: n }) {
|
|
|
223
223
|
}
|
|
224
224
|
const I = "https://68b564fae5dc090291aeddd7.mockapi.io/api/config", P = "https://68b564fae5dc090291aeddd7.mockapi.io/api/config", D = "https://68b564fae5dc090291aeddd7.mockapi.io/api/config", B = "tap-connect-sdk-iframe", _ = "https://connect.alpha.tap.company", $ = ({ src: e }) => {
|
|
225
225
|
const { loading: n } = y();
|
|
226
|
-
return /* @__PURE__ */
|
|
226
|
+
return /* @__PURE__ */ c(v, { children: [
|
|
227
227
|
n && /* @__PURE__ */ t(G, { toggleAnimation: !0 }),
|
|
228
228
|
e && /* @__PURE__ */ t(
|
|
229
229
|
"iframe",
|
|
@@ -351,16 +351,16 @@ const q = (e = "tap-connect-sdk-element") => {
|
|
|
351
351
|
const [e, n] = f.useState(""), { onError: r, onLoadingHandler: o, loginMode: a, region: i, ...s } = y(), p = async () => {
|
|
352
352
|
o(!0);
|
|
353
353
|
try {
|
|
354
|
-
const
|
|
354
|
+
const d = await fetch(z(i), {
|
|
355
355
|
method: "POST",
|
|
356
356
|
headers: {
|
|
357
357
|
"Content-Type": "application/json"
|
|
358
358
|
},
|
|
359
359
|
body: JSON.stringify(s)
|
|
360
360
|
});
|
|
361
|
-
if (!
|
|
362
|
-
throw new Error(`${
|
|
363
|
-
const l = await
|
|
361
|
+
if (!d.ok)
|
|
362
|
+
throw new Error(`${d.status}::${d.statusText}`);
|
|
363
|
+
const l = await d.json();
|
|
364
364
|
if (!l.redirect_url) {
|
|
365
365
|
const m = new URLSearchParams();
|
|
366
366
|
s != null && s.theme && m.append(h.THEME, s.theme), s != null && s.language && m.append(h.LANGUAGE, s.language), m.append(h.PROFILE_TOKEN, l.id);
|
|
@@ -369,8 +369,8 @@ const q = (e = "tap-connect-sdk-element") => {
|
|
|
369
369
|
}
|
|
370
370
|
if (s.mode !== O.PAGE) return n(l.redirect_url);
|
|
371
371
|
window.location.href = l.redirect_url;
|
|
372
|
-
} catch (
|
|
373
|
-
const l = new Y(
|
|
372
|
+
} catch (d) {
|
|
373
|
+
const l = new Y(d);
|
|
374
374
|
r == null || r(l.getClientError()), o(!1);
|
|
375
375
|
}
|
|
376
376
|
};
|
|
@@ -381,8 +381,8 @@ const q = (e = "tap-connect-sdk-element") => {
|
|
|
381
381
|
const { onSuccess: e, onClose: n, onError: r, onReady: o, onLoaded: a } = y(), i = f.useCallback(
|
|
382
382
|
async (s) => {
|
|
383
383
|
if (s.origin !== _) return;
|
|
384
|
-
const { data: p, event:
|
|
385
|
-
switch (
|
|
384
|
+
const { data: p, event: d } = s.data;
|
|
385
|
+
switch (d) {
|
|
386
386
|
case u.ON_CLOSE:
|
|
387
387
|
n == null || n();
|
|
388
388
|
break;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/connect-v2",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.28-test",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "build/index.cjs.js",
|
|
7
7
|
"module": "build/index.esm.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"vite-tsconfig-paths": "^5.1.4"
|
|
68
68
|
},
|
|
69
69
|
"lint-staged": {
|
|
70
|
-
"*.{js,ts,tsx,json,css,yml}": [
|
|
70
|
+
"*.{js,ts,tsx,json,css,yml,md,html}": [
|
|
71
71
|
"prettier --write",
|
|
72
72
|
"eslint"
|
|
73
73
|
]
|