@tap-payments/connect-v2 1.0.3-beta → 1.0.3-sandbox
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 +44 -33
- package/build/index.cjs.js +1 -1
- package/build/index.esm.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ This package provides:
|
|
|
6
6
|
|
|
7
7
|
- **_ConnectElement_**: a React component that can be embedded directly in your app to enable secure, localized, and customizable connections.
|
|
8
8
|
|
|
9
|
-
- **
|
|
9
|
+
- **_renderConnectElement_**: 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.
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
@@ -77,7 +77,7 @@ You can also use the SDK without a React build setup by including the UMD bundle
|
|
|
77
77
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
78
78
|
|
|
79
79
|
<!-- Tap Connect SDK UMD bundle -->
|
|
80
|
-
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-1.0.3-
|
|
80
|
+
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-1.0.3-sandbox/index.js"></script>
|
|
81
81
|
|
|
82
82
|
<script>
|
|
83
83
|
function openConnect() {
|
|
@@ -98,41 +98,52 @@ You can also use the SDK without a React build setup by including the UMD bundle
|
|
|
98
98
|
</html>
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
+
`renderConnectElement` returns an `{ unmount }` handle — call `unmount()` to tear
|
|
102
|
+
the widget down:
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
const { unmount } = TapConnectSDK.renderConnectElement('connect-container', {
|
|
106
|
+
/* props */
|
|
107
|
+
});
|
|
108
|
+
// later:
|
|
109
|
+
unmount();
|
|
110
|
+
```
|
|
111
|
+
|
|
101
112
|
---
|
|
102
113
|
|
|
103
114
|
## 🧠 Props
|
|
104
115
|
|
|
105
|
-
| Prop | Type | Required | Description
|
|
106
|
-
| ----------------------- | ---------------------------------------------------------------- | -------- |
|
|
107
|
-
| **open** | `boolean` | ✅ | Controls whether the Connect element is open or closed.
|
|
108
|
-
| **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments.
|
|
109
|
-
| **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://example.com`).
|
|
110
|
-
| **scope** | `ConnectScope` | ✅ | Defines the integration scope.
|
|
111
|
-
| **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully.
|
|
112
|
-
| **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed.
|
|
113
|
-
| **onError** | `(error: CustomError) => void` | ❌ | Triggered when an error occurs.
|
|
114
|
-
| **onSuccess** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered when the flow completes successfully.
|
|
115
|
-
| **onCreated** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered after creating an account.
|
|
116
|
-
| **onBoardCompleted** | `() => void` | ❌ | Triggered when all board flows are completed.
|
|
117
|
-
| **theme** | `ConnectTheme` | ❌ | UI theme configuration.
|
|
118
|
-
| **language** | `ConnectLanguage` | ❌ | Localization language.
|
|
119
|
-
| **businessCountryCode** | `string` | ❌ | ISO2 country code of the merchant.
|
|
120
|
-
| **leadId** | `string` | ❌ | ID to Load an existing lead.
|
|
121
|
-
| **showBoard** | `boolean` | ❌ | Show merchant board UI.
|
|
122
|
-
| **boardEditable** | `boolean` | ❌ | Allow merchant board editing.
|
|
123
|
-
| **platforms** | `string[]` | ❌ | List of merchant platforms.
|
|
124
|
-
| **features** | `ConnectAppFeatures` | ❌ | UI and behavior customization options.
|
|
125
|
-
| **paymentProvider** | `ConnectPaymentProvider` | ❌ | Payment provider configuration.
|
|
126
|
-
| **postUrl** | `string` | ❌ | Endpoint to post collected data to your backend.
|
|
127
|
-
| **redirectUrl** | `string` | ❌ | Redirect URL after success.
|
|
128
|
-
| **data** | `string[]` | ❌ | Data modules to collect (e.g. `brand`, `entity`).
|
|
129
|
-
| **mode** | `ConnectMode` | ❌ |
|
|
130
|
-
| **notification** | `ConnectNotification` | ❌ | Notification configuration.
|
|
131
|
-
| **flow** | `ConnectFlows` | ❌ | Specifies a predefined flow to open directly (e.g., `brand`, `entity`, `kyc`, etc.).
|
|
132
|
-
| **token** | `string` | ❌ | Connect session token. Required when `flow` is provided and the flow is not `board` or `auth`.
|
|
133
|
-
| **boardId** | `string` | ❌ | Identifier of the board to load. Required when `flow` is set to `board`.
|
|
134
|
-
| **configToken** | `string` | ❌ | Pre-generated configuration token from backend.
|
|
135
|
-
| **region** | `ConnectRegions` | ❌ | Region code determining middleware domain.
|
|
116
|
+
| Prop | Type | Required | Description |
|
|
117
|
+
| ----------------------- | ---------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
118
|
+
| **open** | `boolean` | ✅ | Controls whether the Connect element is open or closed. |
|
|
119
|
+
| **publicKey** | `string` | ✅ | Your public API key provided by Tap Payments. |
|
|
120
|
+
| **merchantDomain** | `string` | ✅ | Merchant's domain (e.g. `https://example.com`). |
|
|
121
|
+
| **scope** | `ConnectScope` | ✅ | Defines the integration scope. |
|
|
122
|
+
| **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully. |
|
|
123
|
+
| **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed. |
|
|
124
|
+
| **onError** | `(error: CustomError) => void` | ❌ | Triggered when an error occurs. |
|
|
125
|
+
| **onSuccess** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered when the flow completes successfully. |
|
|
126
|
+
| **onCreated** | `(response: Record<string, string \| number \| object>) => void` | ❌ | Triggered after creating an account. |
|
|
127
|
+
| **onBoardCompleted** | `() => void` | ❌ | Triggered when all board flows are completed. |
|
|
128
|
+
| **theme** | `ConnectTheme` | ❌ | UI theme configuration. |
|
|
129
|
+
| **language** | `ConnectLanguage` | ❌ | Localization language. |
|
|
130
|
+
| **businessCountryCode** | `string` | ❌ | ISO2 country code of the merchant. |
|
|
131
|
+
| **leadId** | `string` | ❌ | ID to Load an existing lead. |
|
|
132
|
+
| **showBoard** | `boolean` | ❌ | Show merchant board UI. |
|
|
133
|
+
| **boardEditable** | `boolean` | ❌ | Allow merchant board editing. |
|
|
134
|
+
| **platforms** | `string[]` | ❌ | List of merchant platforms. |
|
|
135
|
+
| **features** | `ConnectAppFeatures` | ❌ | UI and behavior customization options. |
|
|
136
|
+
| **paymentProvider** | `ConnectPaymentProvider` | ❌ | Payment provider configuration. |
|
|
137
|
+
| **postUrl** | `string` | ❌ | Endpoint to post collected data to your backend. |
|
|
138
|
+
| **redirectUrl** | `string` | ❌ | Redirect URL after success. |
|
|
139
|
+
| **data** | `string[]` | ❌ | Data modules to collect (e.g. `brand`, `entity`). |
|
|
140
|
+
| **mode** | `ConnectMode` | ❌ | Display mode. Every mode except `PAGE` renders the Connect page in an iframe overlay; `PAGE` redirects the whole page to the Connect URL. |
|
|
141
|
+
| **notification** | `ConnectNotification` | ❌ | Notification configuration. |
|
|
142
|
+
| **flow** | `ConnectFlows` | ❌ | Specifies a predefined flow to open directly (e.g., `brand`, `entity`, `kyc`, etc.). |
|
|
143
|
+
| **token** | `string` | ❌ | Connect session token. Required when `flow` is provided and the flow is not `board` or `auth`. |
|
|
144
|
+
| **boardId** | `string` | ❌ | Identifier of the board to load. Required when `flow` is set to `board`. |
|
|
145
|
+
| **configToken** | `string` | ❌ | Pre-generated configuration token from backend. |
|
|
146
|
+
| **region** | `ConnectRegions` | ❌ | Region code determining middleware domain. |
|
|
136
147
|
|
|
137
148
|
##### `ConnectAppFeatures`
|
|
138
149
|
|
package/build/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),P=require("react-dom");function B(e){const t=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(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const m=B(p);var x=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(x||{}),I=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(I||{}),S=(e=>(e.AUTH="auth",e.BANK="bank",e.BOARD="board",e.BRAND="brand",e.ENTITY="entity",e.INDIVIDUAL="individual",e.KYC="kyc",e.TAX="tax",e.TERMINAL="terminal",e))(S||{}),R=(e=>(e.SA="sa",e.SA_DR="sa-dr",e))(R||{}),b=(e=>(e.DARK="dark",e.LIGHT="light",e.DYNAMIC="dynamic",e))(b||{}),_=(e=>(e.AR="ar",e.EN="en",e.DYNAMIC="dynamic",e))(_||{}),N=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(N||{}),y=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(y||{}),u=(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.ON_CREATED="connect:onCreated",e.ON_BOARD_COMPLETED="connect:onBoardCompleted",e))(u||{}),h=(e=>(e.CONFIG_TOKEN="config_token",e.THEME="theme",e.LANGUAGE="lang",e))(h||{});const M=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:t="rgba(238, 238, 238, 1)",innerStartColor:r="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:a=3,toggleAnimation:s=!1})=>n.jsx("div",{style:{position:"relative",width:"135px",height:"135px"},children:n.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:n.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[n.jsxs("g",{children:[n.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:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 89.5 86.5",to:"360 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; 425; 425; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})}),n.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:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"360 89.5 86.5",to:"0 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; -300; -300; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})})]}),n.jsxs("defs",{children:[n.jsxs("filter",{id:"filter0_dddi_1427_22275",x:"0.882668",y:"0.899429",width:"198.08",height:"195.314",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[n.jsx("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),n.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"}),n.jsx("feOffset",{dy:"1.68224"}),n.jsx("feGaussianBlur",{stdDeviation:"4.20656"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_1427_22275"}),n.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"}),n.jsx("feOffset",{dx:"22.3542",dy:"22.6047"}),n.jsx("feGaussianBlur",{stdDeviation:"9.80447"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"effect1_dropShadow_1427_22275",result:"effect2_dropShadow_1427_22275"}),n.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"}),n.jsx("feOffset",{dx:"-6.03352",dy:"-3.01676"}),n.jsx("feGaussianBlur",{stdDeviation:"7.5419"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"effect2_dropShadow_1427_22275",result:"effect3_dropShadow_1427_22275"}),n.jsx("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect3_dropShadow_1427_22275",result:"shape"}),n.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"}),n.jsx("feOffset",{dy:"1.50838"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"shape",result:"effect4_innerShadow_1427_22275"})]}),n.jsxs("linearGradient",{id:"strokeGradientOuter_1427_22275",x1:"89.5",y1:"19",x2:"89.5",y2:"154",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:e}),n.jsx("stop",{offset:"1",stopColor:t})]}),n.jsxs("linearGradient",{id:"strokeGradientInner_1427_22275",x1:"89.4991",y1:"38.2849",x2:"89.4991",y2:"134.713",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:r}),n.jsx("stop",{offset:"1",stopColor:o})]})]})]})})}),H=p.memo(M),T=p.createContext({}),v=()=>p.useContext(T);function $({children:e,props:t}){var d;const[r,o]=p.useState(!1),a=l=>{o(l)},s=()=>{o(!1)};return n.jsx(T.Provider,{value:{...t,features:{...t.features,overlay:((d=t.features)==null?void 0:d.overlay)??!0},onLoadingHandler:a,loading:r,onLoaded:s},children:e})}const K="https://connect-mw.beta.tap.company/middleware/v3/connect",W="https://connect-mw.beta.tap.company/middleware/v3/connect",F="https://connect-mw.beta.tap.company/middleware/v3/connect",Y="tap-connect-sdk-iframe",O="https://sdk-connect.beta.tap.company",q="https://sdk-connect.beta.tap.company",z="https://sdk-connect.beta.tap.company",V=({src:e})=>{const{loading:t}=v();return n.jsxs(n.Fragment,{children:[t&&n.jsx(H,{toggleAnimation:!0}),e&&n.jsx("iframe",{id:Y,title:"connect",src:e,style:{width:"100%",height:"100%",border:"none",position:"absolute",top:0,left:0}})]})};var J=function(e){var t,r;return((r=(t=e==null?void 0:e.response)===null||t===void 0?void 0:t.data)===null||r===void 0?void 0:r.errors)!==void 0},X=function(e){return e instanceof Error},Q=function(e){return typeof e=="string"},Z=function(e){try{var t=e.response.data.errors,r=t[0],o=r.description,a=r.code;return{message:o,code:a}}catch(s){return{message:s.message,code:"UNKNOWN"}}},ee=function(e){try{var t=e.message,r=t.split("::"),o=r[0],a=r[1];return{message:a,code:o}}catch(s){return{message:s.message,code:"UNKNOWN"}}},te=function(e){try{var t=e.split("::"),r=t[0],o=t[1];return{message:o,code:r}}catch(a){return{message:a,code:"UNKNOWN"}}},re=function(){function e(t){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}),J(t)){var r=Z(t);this.code=r.code,this.message=r.message}else if(X(t)){var r=ee(t);this.code=r.code,this.message=r.message}else if(Q(t)){var r=te(t);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 ne=(e="tap-connect-sdk-element")=>{const t=document.getElementById(e);if(t)return t;const r=document.createElement("div");return r.setAttribute("id",e),document.body.prepend(r),r},D=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,L=e=>e==="dr",oe=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?F:W:K},ae=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?z:q:O},se=e=>{var t,r,o,a,s,d,l,i,c,f,C,E,g,j,w,k;return{operator:{public_key:e.publicKey},scope:e.scope,mode:e.mode||x.PAGE,domain:e.merchantDomain,...e.businessCountryCode&&{country:e.businessCountryCode},...e.data&&{data:e.data},board:{...e.boardId&&{id:e.boardId},display:e.showBoard??!0,editable:e.boardEditable??!0},interface:{theme:e.theme||b.DYNAMIC,locale:e.language||_.DYNAMIC,edges:((t=e.features)==null?void 0:t.dialogEdgeFormat)||N.CURVED,parnter_logo:((r=e.features)==null?void 0:r.merchantLogo)??!1,dialog_transition:{start:((o=e.features)==null?void 0:o.dialogStartTransition)||y.UP,end:((a=e.features)==null?void 0:a.dialogEndTransition)||y.DOWN}},notification:{email:((s=e.notification)==null?void 0:s.email)??!1,sms:((d=e.notification)==null?void 0:d.sms)??!1},features:{poweredby:((l=e.features)==null?void 0:l.poweredBy)??!0,close_button:((i=e.features)==null?void 0:i.closeButton)??!1,embedded:((c=e.features)==null?void 0:c.embedded)??!1,email_auth:((f=e.features)==null?void 0:f.emailAuth)??!1},...e.leadId&&{lead:{id:e.leadId}},...e.postUrl&&{post:{url:e.postUrl}},...e.redirectUrl&&{redirect:{url:e.redirectUrl}},...e.platforms&&{platforms:e.platforms},...(((C=e.paymentProvider)==null?void 0:C.institutionId)||((E=e.paymentProvider)==null?void 0:E.technologyId))&&{payment_provider:{...((g=e.paymentProvider)==null?void 0:g.institutionId)&&{institution:{id:(j=e.paymentProvider)==null?void 0:j.institutionId}},...((w=e.paymentProvider)==null?void 0:w.technologyId)&&{technology:{id:(k=e.paymentProvider)==null?void 0:k.technologyId}}}},...e.token&&{auth_token:e.token},app_info:{name:"connect-sdk-v2",version:"1.0.3-beta",identifier:window.location.hostname||window.location.origin}}},ie=({theme:e,language:t,configToken:r,flow:o,region:a})=>{const s=new URLSearchParams;let d="";return o&&(d=o),e&&s.append(h.THEME,e),t&&s.append(h.LANGUAGE,t),s.append(h.CONFIG_TOKEN,r),`${ae(a)}/${d}?${s.toString()}`},de=async e=>{const t=await fetch(oe(e.region),{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.publicKey}`,mdn:e.merchantDomain||O},body:JSON.stringify(se(e))});if(!t.ok)throw new Error(`${t.status}::${t.statusText}`);return t.json()},le=()=>{const[e,t]=m.useState(""),r=v(),o=async()=>{var a,s,d;r.onLoadingHandler(!0);try{let l=r.configToken,i;if(!l){if(i=await de(r),!i.token)throw new Error("500::Config token is missing");l=i.token}const c=ie({theme:(a=i==null?void 0:i.interface)==null?void 0:a.theme,language:(s=i==null?void 0:i.interface)==null?void 0:s.locale,configToken:l,flow:r.flow,region:r.region});if(r.mode!==x.PAGE)return t(c);window.location.href=c}catch(l){const i=new re(l);(d=r.onError)==null||d.call(r,i.getClientError()),r.onLoadingHandler(!1)}};return m.useEffect(()=>{o()},[]),{connectLink:e}},ce=()=>{m.useEffect(()=>{const e=document.documentElement,t=document.body,r=t.style.overflow,o=e.style.overflow;return t.style.overflow="hidden",e.style.overflow="hidden",()=>{t.style.overflow=r,e.style.overflow=o}},[])},ue=()=>{const{onSuccess:e,onClose:t,onError:r,onReady:o,onLoaded:a,onCreated:s,onBoardCompleted:d}=v(),l=m.useCallback(async i=>{if(i.origin!==O)return;const{data:c,event:f}=i.data;switch(f){case u.ON_CLOSE:t==null||t();break;case u.ON_ERROR:r==null||r(c);break;case u.ON_SUCCESS:e==null||e(c);break;case u.ON_LOADED:a();break;case u.ON_READY:o==null||o();break;case u.ON_CREATED:s==null||s(c);break;case u.ON_BOARD_COMPLETED:d==null||d();break}},[t,r,a,o,e,s,d]);m.useEffect(()=>(window.addEventListener("message",l,!1),()=>{window.removeEventListener("message",l)}),[l])},me=()=>{const{connectLink:e}=le(),{features:t,loading:r}=v();return ue(),ce(),n.jsx("div",{id:"tap-connect-main-container",style:{display:"flex",alignItems:"center",justifyContent:"center",background:t!=null&&t.overlay&&r?"rgba(0, 0, 0, 0.5)":"",position:"fixed",top:0,left:0,width:"100%",height:"100%",zIndex:(t==null?void 0:t.zIndex)??9999},children:n.jsx(V,{src:e})})},pe=e=>n.jsx($,{props:e,children:e.open&&n.jsx(me,{})}),U=m.memo(pe);var G,A=P;G=A.createRoot,A.hydrateRoot;const fe=(e,t)=>{const r=ne(e),o=G(r);return o.render(n.jsx(U,{...t})),{unmount:()=>o.unmount()}};exports.ConnectDialogEdgeFormat=N;exports.ConnectDialogTransition=y;exports.ConnectElement=U;exports.ConnectFlows=S;exports.ConnectLanguage=_;exports.ConnectMode=x;exports.ConnectRegions=R;exports.ConnectScope=I;exports.ConnectTheme=b;exports.renderConnectElement=fe;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),P=require("react-dom");function B(e){const t=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(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const m=B(p);var x=(e=>(e.PAGE="page",e.POPUP="popup",e.CONTENT="content",e))(x||{}),I=(e=>(e.AUTH="auth",e.MERCHANT="merchant",e))(I||{}),S=(e=>(e.AUTH="auth",e.BANK="bank",e.BOARD="board",e.BRAND="brand",e.ENTITY="entity",e.INDIVIDUAL="individual",e.KYC="kyc",e.TAX="tax",e.TERMINAL="terminal",e))(S||{}),R=(e=>(e.SA="sa",e.SA_DR="sa-dr",e))(R||{}),b=(e=>(e.DARK="dark",e.LIGHT="light",e.DYNAMIC="dynamic",e))(b||{}),_=(e=>(e.AR="ar",e.EN="en",e.DYNAMIC="dynamic",e))(_||{}),N=(e=>(e.STRAIGHT="straight",e.CURVED="curved",e))(N||{}),y=(e=>(e.LEFT="left",e.RIGHT="right",e.UP="up",e.DOWN="down",e))(y||{}),u=(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.ON_CREATED="connect:onCreated",e.ON_BOARD_COMPLETED="connect:onBoardCompleted",e))(u||{}),h=(e=>(e.CONFIG_TOKEN="config_token",e.THEME="theme",e.LANGUAGE="lang",e))(h||{});const M=({outerStartColor:e="rgba(244, 244, 244, 1)",outerEndColor:t="rgba(238, 238, 238, 1)",innerStartColor:r="rgba(244, 244, 244, 1)",innerEndColor:o="rgba(238, 238, 238, 1)",duration:a=3,toggleAnimation:s=!1})=>n.jsx("div",{style:{position:"relative",width:"67.5px",height:"67.5px"},children:n.jsx("div",{style:{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",opacity:.9},children:n.jsxs("svg",{width:"199",height:"197",viewBox:"0 0 199 197",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[n.jsxs("g",{children:[n.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:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 89.5 86.5",to:"360 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; 425; 425; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})}),n.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:s&&n.jsxs(n.Fragment,{children:[n.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"360 89.5 86.5",to:"0 89.5 86.5",dur:`${a/3}s`,repeatCount:"indefinite"}),n.jsx("animate",{attributeName:"stroke-dashoffset",values:"0; -300; -300; 0; 0",keyTimes:"0; 0.45; 0.55; 0.9; 1",dur:`${a}s`,repeatCount:"indefinite"})]})})]}),n.jsxs("defs",{children:[n.jsxs("filter",{id:"filter0_dddi_1427_22275",x:"0.882668",y:"0.899429",width:"198.08",height:"195.314",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[n.jsx("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),n.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"}),n.jsx("feOffset",{dy:"1.68224"}),n.jsx("feGaussianBlur",{stdDeviation:"4.20656"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"BackgroundImageFix",result:"effect1_dropShadow_1427_22275"}),n.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"}),n.jsx("feOffset",{dx:"22.3542",dy:"22.6047"}),n.jsx("feGaussianBlur",{stdDeviation:"9.80447"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"effect1_dropShadow_1427_22275",result:"effect2_dropShadow_1427_22275"}),n.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"}),n.jsx("feOffset",{dx:"-6.03352",dy:"-3.01676"}),n.jsx("feGaussianBlur",{stdDeviation:"7.5419"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"out"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"effect2_dropShadow_1427_22275",result:"effect3_dropShadow_1427_22275"}),n.jsx("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect3_dropShadow_1427_22275",result:"shape"}),n.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"}),n.jsx("feOffset",{dy:"1.50838"}),n.jsx("feComposite",{in2:"hardAlpha",operator:"arithmetic",k2:"-1",k3:"1"}),n.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"}),n.jsx("feBlend",{mode:"normal",in2:"shape",result:"effect4_innerShadow_1427_22275"})]}),n.jsxs("linearGradient",{id:"strokeGradientOuter_1427_22275",x1:"89.5",y1:"19",x2:"89.5",y2:"154",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:e}),n.jsx("stop",{offset:"1",stopColor:t})]}),n.jsxs("linearGradient",{id:"strokeGradientInner_1427_22275",x1:"89.4991",y1:"38.2849",x2:"89.4991",y2:"134.713",gradientUnits:"userSpaceOnUse",children:[n.jsx("stop",{stopColor:r}),n.jsx("stop",{offset:"1",stopColor:o})]})]})]})})}),H=p.memo(M),T=p.createContext({}),v=()=>p.useContext(T);function $({children:e,props:t}){var d;const[r,o]=p.useState(!1),a=l=>{o(l)},s=()=>{o(!1)};return n.jsx(T.Provider,{value:{...t,features:{...t.features,overlay:((d=t.features)==null?void 0:d.overlay)??!0},onLoadingHandler:a,loading:r,onLoaded:s},children:e})}const K="https://connect-mw.sandbox.tap.company/middleware/v3/connect",W="https://connect-mw.sandbox.tap.company/middleware/v3/connect",F="https://connect-mw.sandbox.tap.company/middleware/v3/connect",Y="tap-connect-sdk-iframe",O="https://sdk-connect.sandbox.tap.company",q="https://sdk-connect.sandbox.tap.company",z="https://sdk-connect.sandbox.tap.company",V=({src:e})=>{const{loading:t}=v();return n.jsxs(n.Fragment,{children:[t&&n.jsx(H,{toggleAnimation:!0}),e&&n.jsx("iframe",{id:Y,title:"connect",src:e,style:{width:"100%",height:"100%",border:"none",position:"absolute",top:0,left:0}})]})};var J=function(e){var t,r;return((r=(t=e==null?void 0:e.response)===null||t===void 0?void 0:t.data)===null||r===void 0?void 0:r.errors)!==void 0},X=function(e){return e instanceof Error},Q=function(e){return typeof e=="string"},Z=function(e){try{var t=e.response.data.errors,r=t[0],o=r.description,a=r.code;return{message:o,code:a}}catch(s){return{message:s.message,code:"UNKNOWN"}}},ee=function(e){try{var t=e.message,r=t.split("::"),o=r[0],a=r[1];return{message:a,code:o}}catch(s){return{message:s.message,code:"UNKNOWN"}}},te=function(e){try{var t=e.split("::"),r=t[0],o=t[1];return{message:o,code:r}}catch(a){return{message:a,code:"UNKNOWN"}}},re=function(){function e(t){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}),J(t)){var r=Z(t);this.code=r.code,this.message=r.message}else if(X(t)){var r=ee(t);this.code=r.code,this.message=r.message}else if(Q(t)){var r=te(t);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 ne=(e="tap-connect-sdk-element")=>{const t=document.getElementById(e);if(t)return t;const r=document.createElement("div");return r.setAttribute("id",e),document.body.prepend(r),r},D=e=>e?["sa","sau"].includes(e.toLowerCase()):!1,L=e=>e==="dr",oe=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?F:W:K},ae=(e="")=>{const[t,r]=e.split("-");return D(t)?L(r)?z:q:O},se=e=>{var t,r,o,a,s,d,l,i,c,f,C,E,g,j,w,k;return{operator:{public_key:e.publicKey},scope:e.scope,mode:e.mode||x.PAGE,domain:e.merchantDomain,...e.businessCountryCode&&{country:e.businessCountryCode},...e.data&&{data:e.data},board:{...e.boardId&&{id:e.boardId},display:e.showBoard??!0,editable:e.boardEditable??!0},interface:{theme:e.theme||b.DYNAMIC,locale:e.language||_.DYNAMIC,edges:((t=e.features)==null?void 0:t.dialogEdgeFormat)||N.CURVED,parnter_logo:((r=e.features)==null?void 0:r.merchantLogo)??!1,dialog_transition:{start:((o=e.features)==null?void 0:o.dialogStartTransition)||y.UP,end:((a=e.features)==null?void 0:a.dialogEndTransition)||y.DOWN}},notification:{email:((s=e.notification)==null?void 0:s.email)??!1,sms:((d=e.notification)==null?void 0:d.sms)??!1},features:{poweredby:((l=e.features)==null?void 0:l.poweredBy)??!0,close_button:((i=e.features)==null?void 0:i.closeButton)??!1,embedded:((c=e.features)==null?void 0:c.embedded)??!1,email_auth:((f=e.features)==null?void 0:f.emailAuth)??!1},...e.leadId&&{lead:{id:e.leadId}},...e.postUrl&&{post:{url:e.postUrl}},...e.redirectUrl&&{redirect:{url:e.redirectUrl}},...e.platforms&&{platforms:e.platforms},...(((C=e.paymentProvider)==null?void 0:C.institutionId)||((E=e.paymentProvider)==null?void 0:E.technologyId))&&{payment_provider:{...((g=e.paymentProvider)==null?void 0:g.institutionId)&&{institution:{id:(j=e.paymentProvider)==null?void 0:j.institutionId}},...((w=e.paymentProvider)==null?void 0:w.technologyId)&&{technology:{id:(k=e.paymentProvider)==null?void 0:k.technologyId}}}},...e.token&&{auth_token:e.token},app_info:{name:"connect-sdk-v2",version:"1.0.3-sandbox",identifier:window.location.hostname||window.location.origin}}},ie=({theme:e,language:t,configToken:r,flow:o,region:a})=>{const s=new URLSearchParams;let d="";return o&&(d=o),e&&s.append(h.THEME,e),t&&s.append(h.LANGUAGE,t),s.append(h.CONFIG_TOKEN,r),`${ae(a)}/${d}?${s.toString()}`},de=async e=>{const t=await fetch(oe(e.region),{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.publicKey}`,mdn:e.merchantDomain||O},body:JSON.stringify(se(e))});if(!t.ok)throw new Error(`${t.status}::${t.statusText}`);return t.json()},le=()=>{const[e,t]=m.useState(""),r=v(),o=async()=>{var a,s,d;r.onLoadingHandler(!0);try{let l=r.configToken,i;if(!l){if(i=await de(r),!i.token)throw new Error("500::Config token is missing");l=i.token}const c=ie({theme:(a=i==null?void 0:i.interface)==null?void 0:a.theme,language:(s=i==null?void 0:i.interface)==null?void 0:s.locale,configToken:l,flow:r.flow,region:r.region});if(r.mode!==x.PAGE)return t(c);window.location.href=c}catch(l){const i=new re(l);(d=r.onError)==null||d.call(r,i.getClientError()),r.onLoadingHandler(!1)}};return m.useEffect(()=>{o()},[]),{connectLink:e}},ce=()=>{m.useEffect(()=>{const e=document.documentElement,t=document.body,r=t.style.overflow,o=e.style.overflow;return t.style.overflow="hidden",e.style.overflow="hidden",()=>{t.style.overflow=r,e.style.overflow=o}},[])},ue=()=>{const{onSuccess:e,onClose:t,onError:r,onReady:o,onLoaded:a,onCreated:s,onBoardCompleted:d}=v(),l=m.useCallback(async i=>{if(i.origin!==O)return;const{data:c,event:f}=i.data;switch(f){case u.ON_CLOSE:t==null||t();break;case u.ON_ERROR:r==null||r(c);break;case u.ON_SUCCESS:e==null||e(c);break;case u.ON_LOADED:a();break;case u.ON_READY:o==null||o();break;case u.ON_CREATED:s==null||s(c);break;case u.ON_BOARD_COMPLETED:d==null||d();break}},[t,r,a,o,e,s,d]);m.useEffect(()=>(window.addEventListener("message",l,!1),()=>{window.removeEventListener("message",l)}),[l])},me=()=>{const{connectLink:e}=le(),{features:t,loading:r}=v();return ue(),ce(),n.jsx("div",{id:"tap-connect-main-container",style:{display:"flex",alignItems:"center",justifyContent:"center",background:t!=null&&t.overlay&&r?"rgba(0, 0, 0, 0.5)":"",position:"fixed",top:0,left:0,width:"100%",height:"100%",zIndex:(t==null?void 0:t.zIndex)??9999},children:n.jsx(V,{src:e})})},pe=e=>n.jsx($,{props:e,children:e.open&&n.jsx(me,{})}),U=m.memo(pe);var G,A=P;G=A.createRoot,A.hydrateRoot;const fe=(e,t)=>{const r=ne(e),o=G(r);return o.render(n.jsx(U,{...t})),{unmount:()=>o.unmount()}};exports.ConnectDialogEdgeFormat=N;exports.ConnectDialogTransition=y;exports.ConnectElement=U;exports.ConnectFlows=S;exports.ConnectLanguage=_;exports.ConnectMode=x;exports.ConnectRegions=R;exports.ConnectScope=I;exports.ConnectTheme=b;exports.renderConnectElement=fe;
|
package/build/index.esm.js
CHANGED
|
@@ -15,8 +15,8 @@ const H = ({
|
|
|
15
15
|
{
|
|
16
16
|
style: {
|
|
17
17
|
position: "relative",
|
|
18
|
-
width: "
|
|
19
|
-
height: "
|
|
18
|
+
width: "67.5px",
|
|
19
|
+
height: "67.5px"
|
|
20
20
|
},
|
|
21
21
|
children: /* @__PURE__ */ n(
|
|
22
22
|
"div",
|
|
@@ -234,7 +234,7 @@ function j({ children: e, props: t }) {
|
|
|
234
234
|
}
|
|
235
235
|
);
|
|
236
236
|
}
|
|
237
|
-
const K = "https://connect-mw.
|
|
237
|
+
const K = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", W = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", Y = "https://connect-mw.sandbox.tap.company/middleware/v3/connect", F = "tap-connect-sdk-iframe", E = "https://sdk-connect.sandbox.tap.company", z = "https://sdk-connect.sandbox.tap.company", V = "https://sdk-connect.sandbox.tap.company", q = ({ src: e }) => {
|
|
238
238
|
const { loading: t } = v();
|
|
239
239
|
return /* @__PURE__ */ u(_, { children: [
|
|
240
240
|
t && /* @__PURE__ */ n($, { toggleAnimation: !0 }),
|
|
@@ -410,7 +410,7 @@ const ne = (e = "tap-connect-sdk-element") => {
|
|
|
410
410
|
...e.token && { auth_token: e.token },
|
|
411
411
|
app_info: {
|
|
412
412
|
name: "connect-sdk-v2",
|
|
413
|
-
version: "1.0.3-
|
|
413
|
+
version: "1.0.3-sandbox",
|
|
414
414
|
identifier: window.location.hostname || window.location.origin
|
|
415
415
|
}
|
|
416
416
|
};
|