@test-glide/glide-payment 0.0.4 → 0.0.6
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 +60 -35
- package/dist/index.cjs.js +11 -11
- package/dist/index.es.js +75 -77
- package/dist/index.umd.js +7 -7
- package/dist/native/native.cjs.js +1 -1
- package/dist/native/native.es.js +6 -6
- package/dist/react/react.cjs.js +11 -11
- package/dist/react/react.es.js +53 -55
- package/dist/react/style.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,9 +29,15 @@ import * as BivoPayments from "@test-glide/glide-payment";
|
|
|
29
29
|
import "@test-glide/glide-payment/style.css";
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
---
|
|
33
|
+
|
|
32
34
|
## Usage
|
|
33
35
|
|
|
34
|
-
The SDK can be used in
|
|
36
|
+
The SDK can be used in three ways:
|
|
37
|
+
|
|
38
|
+
1. **React Component** (with npm install)
|
|
39
|
+
2. **Vanilla JavaScript API** (with npm install or CDN)
|
|
40
|
+
3. **CDN Only** (no build required, single HTML file)
|
|
35
41
|
|
|
36
42
|
---
|
|
37
43
|
|
|
@@ -101,6 +107,8 @@ function App() {
|
|
|
101
107
|
|
|
102
108
|
For non-React applications, use the `init()` function from the main entry point:
|
|
103
109
|
|
|
110
|
+
### With npm (ES Modules)
|
|
111
|
+
|
|
104
112
|
```javascript
|
|
105
113
|
import * as BivoPayments from "@test-glide/glide-payment";
|
|
106
114
|
import "@test-glide/glide-payment/style.css";
|
|
@@ -140,6 +148,56 @@ document.querySelector("#openBtn").addEventListener("click", () => {
|
|
|
140
148
|
bivo.destroy();
|
|
141
149
|
```
|
|
142
150
|
|
|
151
|
+
### With CDN (No Build Required)
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<!doctype html>
|
|
155
|
+
<html lang="en">
|
|
156
|
+
<head>
|
|
157
|
+
<meta charset="UTF-8" />
|
|
158
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
159
|
+
<title>Bivo Payments</title>
|
|
160
|
+
|
|
161
|
+
<link
|
|
162
|
+
rel="stylesheet"
|
|
163
|
+
href="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/style.css"
|
|
164
|
+
/>
|
|
165
|
+
</head>
|
|
166
|
+
<body>
|
|
167
|
+
<div id="app"></div>
|
|
168
|
+
<button id="open-modal">Open Modal</button>
|
|
169
|
+
|
|
170
|
+
<script src="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/index.umd.js"></script>
|
|
171
|
+
<script>
|
|
172
|
+
const TOKEN = "your-session-token";
|
|
173
|
+
const ENDPOINT = "your-api-endpoint";
|
|
174
|
+
|
|
175
|
+
const handleCallback = (result) => {
|
|
176
|
+
if (result.success) {
|
|
177
|
+
console.log("Success! Data:", result.data);
|
|
178
|
+
} else {
|
|
179
|
+
console.error("Error:", result.error);
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
// Modal mode
|
|
184
|
+
const bivoModal = BivoPayments.init({
|
|
185
|
+
token: TOKEN,
|
|
186
|
+
endpoint: ENDPOINT,
|
|
187
|
+
isModal: true,
|
|
188
|
+
onCallback: handleCallback,
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
document.getElementById("open-modal").addEventListener("click", () => {
|
|
192
|
+
bivoModal.open();
|
|
193
|
+
});
|
|
194
|
+
</script>
|
|
195
|
+
</body>
|
|
196
|
+
</html>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
The SDK is immediately available as `BivoPayments` on the global scope when loaded via CDN.
|
|
200
|
+
|
|
143
201
|
### Selector Options for `mount()`
|
|
144
202
|
|
|
145
203
|
The `mount()` method accepts one of three selector formats:
|
|
@@ -158,44 +216,11 @@ The `AddCard` React component accepts the following props:
|
|
|
158
216
|
| ----------------- | ---------- | ----------- | ------------------------------------------------------------------------------- |
|
|
159
217
|
| `token` | `string` | **Yes** | Session token for API authentication. |
|
|
160
218
|
| `endpoint` | `string` | **Yes** | API endpoint URL for card submission. |
|
|
219
|
+
| `beneficiaryCard` | `boolean` | No | If `true`, shows recipient card flow. Defaults to `false` (individual flow). |
|
|
161
220
|
| `onCallback` | `function` | No | Callback function receiving `{ success: boolean, data?: any, error?: string }`. |
|
|
162
221
|
| `onClose` | `function` | No | Callback function triggered when modal is closed (modal mode only). |
|
|
163
222
|
| `isModal` | `boolean` | No | If `true`, renders in modal mode. Defaults to `false`. |
|
|
164
223
|
| `isOpen` | `boolean` | Conditional | **Required if `isModal` is true.** Controls modal visibility. |
|
|
165
|
-
| `beneficiaryCard` | `boolean` | No | If `true`, shows recipient card flow. Defaults to `false` (individual flow). |
|
|
166
|
-
|
|
167
|
-
---
|
|
168
|
-
|
|
169
|
-
## Vanilla JS API
|
|
170
|
-
|
|
171
|
-
### `init(options)` Function
|
|
172
|
-
|
|
173
|
-
Returns an object with the following methods:
|
|
174
|
-
|
|
175
|
-
```typescript
|
|
176
|
-
init(options: {
|
|
177
|
-
token: string;
|
|
178
|
-
endpoint: string;
|
|
179
|
-
beneficiaryCard?: boolean;
|
|
180
|
-
isModal?: boolean;
|
|
181
|
-
onCallback?: (args: { success: boolean; error?: string; data?: any }) => void;
|
|
182
|
-
onModalClose?: () => void;
|
|
183
|
-
}): {
|
|
184
|
-
mount(selector: Selector): void;
|
|
185
|
-
open(): void;
|
|
186
|
-
destroy(): void;
|
|
187
|
-
}
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
**Methods:**
|
|
191
|
-
|
|
192
|
-
- **`mount(selector)`** - Mounts the form to a DOM element. Accepts one selector type: `{ id: string }`, `{ className: string }`, or `{ element: HTMLElement }`.
|
|
193
|
-
- **`open()`** - Opens the modal (only works if `isModal: true`).
|
|
194
|
-
- **`destroy()`** - Closes the modal and cleans up resources.
|
|
195
|
-
|
|
196
|
-
**Options:**
|
|
197
|
-
|
|
198
|
-
- **`onModalClose`** - Optional callback triggered when the modal is closed via `destroy()`.
|
|
199
224
|
|
|
200
225
|
---
|
|
201
226
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(t,n={}){const e=document.createElement(t),{className:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(t,n={}){const e=document.createElement(t),{className:a,id:l,innerHTML:m,textContent:c,attributes:o,styles:h,dataset:s,children:r,events:d}=n;if(a){const p=Array.isArray(a)?a:a.split(" ");e.classList.add(...p.filter(Boolean))}if(l&&(e.id=l),m&&(e.innerHTML=m),c&&(e.textContent=c),o)for(const[p,i]of Object.entries(o))i&&e.setAttribute(p,i);if(h)for(const[p,i]of Object.entries(h))e.style[p]=i;if(s)for(const[p,i]of Object.entries(s))e.dataset[p]=i;if(r&&e.append(...r.filter(Boolean)),d)for(const[p,i]of Object.entries(d))e.addEventListener(p,i);return e}function M(t,n){const e="id"in t?[document.getElementById(t.id)].filter(Boolean):"className"in t?Array.from(document.getElementsByClassName(t.className)):[t.element];if(!e.length){console.warn("updateElements: no elements found for",t);return}for(const a of e){const{styles:l,attributes:m,dataset:c,innerHTML:o,textContent:h,className:s}=n;if(l)for(const[r,d]of Object.entries(l))a.style[r]=d;if(m)for(const[r,d]of Object.entries(m))a.setAttribute(r,d);if(c)for(const[r,d]of Object.entries(c))a.dataset[r]=d;if(o!==void 0&&(a.innerHTML=o),h!==void 0&&(a.textContent=h),s?.add){const r=Array.isArray(s.add)?s.add:[s.add];a.classList.add(...r)}if(s?.remove){const r=Array.isArray(s.remove)?s.remove:[s.remove];a.classList.remove(...r)}s?.toggle&&(Array.isArray(s.toggle)?s.toggle:[s.toggle]).forEach(d=>a.classList.toggle(d))}}const J=`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
clip-rule="evenodd"
|
|
14
14
|
></path>
|
|
15
15
|
</svg>
|
|
16
|
-
`,
|
|
16
|
+
`,Q=`
|
|
17
17
|
<svg
|
|
18
18
|
xmlns="http://www.w3.org/2000/svg"
|
|
19
19
|
width="16"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
>
|
|
29
29
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
30
30
|
</svg>
|
|
31
|
-
`,
|
|
31
|
+
`,X=`<svg
|
|
32
32
|
xmlns="http://www.w3.org/2000/svg"
|
|
33
33
|
width="20"
|
|
34
34
|
height="20"
|
|
@@ -45,28 +45,28 @@
|
|
|
45
45
|
></path>
|
|
46
46
|
</svg>`,k=`
|
|
47
47
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
48
|
-
`,
|
|
48
|
+
`,ee=({children:t,onClick:n,disabled:e=!1,size:a="medium",type:l="button",className:m="",variant:c="primary"})=>{const o=u("span",{className:"button-spinner",innerHTML:Q,dataset:{show:"false"}}),h=u("span",{className:"button-label",children:[null],textContent:t}),s=u("button",{className:`custom-button ${c} ${a} ${m}`,attributes:{type:l,...e?{disabled:"true"}:{}},events:{click:n},children:[o,h]}),r=(p=!1)=>{M({element:o},{dataset:{show:String(p)}}),d(p)},d=(p=!1)=>{p?s.setAttribute("disabled","true"):s.removeAttribute("disabled")};return{element:s,setLoading:r,setDisabled:d}},te=({content:t,position:n="top",delay:e=200,maxWidth:a=250,className:l="",id:m=""})=>{var c=u("div",{className:`tooltip ${n} ${l}`,styles:{maxWidth:`${a}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
|
|
49
49
|
<div class="tooltip-content">${t}</div>
|
|
50
50
|
<div class="tooltip-arrow"></div>
|
|
51
|
-
`});let
|
|
51
|
+
`});let o=null;var r=u("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{e>0?o=window.setTimeout(()=>{c.dataset.show="true",d()},e):(c.dataset.show="true",d())},mouseleave:()=>{o&&clearTimeout(o),c.dataset.show="false"}}});function d(){if(!r||!c)return;const i=r.getBoundingClientRect(),g=c.getBoundingClientRect(),b=8;let f,y;switch(n){case"top":f=i.top-g.height-b,y=i.left+i.width/2-g.width/2;break;case"bottom":f=i.bottom+b,y=i.left+i.width/2-g.width/2;break;case"left":f=i.top+i.height/2-g.height/2,y=i.left-g.width-b;break;case"right":f=i.top+i.height/2-g.height/2,y=i.right+b;break;default:f=i.top-g.height-b,y=i.left+i.width/2-g.width/2}const N=window.innerWidth,D=window.innerHeight;y<0&&(y=b),y+g.width>N&&(y=N-g.width-b),f<0&&(f=b),f+g.height>D&&(f=D-g.height-b),c.style.top=`${f}px`,c.style.left=`${y}px`}return u("div",{className:"tooltip-wrapper",id:`tooltip-${m}`,children:[r,c]})},ne=(t,n=!1)=>{const e={},a=Object.values(t).every(o=>!o||o.trim()===""),l=t.cardNumber?.replace(/\s/g,"");if(l?/^\d{13,19}$/.test(l)||(e.cardNumber="Card number must be 13-19 digits"):e.cardNumber="Card number is required",!t.expiryDate&&!n)e.expiryDate="Expiry date is required";else if(t.expiryDate){const o=t.expiryDate.replace(/\D/g,"");if(o.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(o.substring(0,2),10),s=parseInt(o.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(s)||s<0||s>99)e.expiryDate="Invalid year";else{const r=new Date,d=r.getFullYear(),p=r.getMonth()+1,i=Math.floor(d/100)*100,g=i+s,b=i+100+s;let f;g>=d&&g<=d+20?f=g:(b>=d&&b<=d+20,f=b),f<d||f===d&&h<p?e.expiryDate="Card has expired":f>d+20&&(e.expiryDate="Expiry year is too far in the future")}}}const m=t.cvv.trim();m&&!/^\d{3,4}$/.test(m)&&(e.cvv="CVV must be 3 or 4 digits");const c=t.zipCode.trim();return c&&!/^[A-Z0-9\s-]{3,10}$/i.test(c)&&(e.zipCode="Invalid ZIP code format"),{isValid:Object.keys(e).length===0,errors:e,isEmpty:a}};function se(t){const n=parseInt(t,10);if(isNaN(n)||n<0||n>99)return null;const e=new Date().getFullYear(),a=Math.floor(e/100)*100;let l=a+n;return l>=e&&l<=e+20||(l=a+100+n,l>=e&&l<=e+20)?l:a+100+n}function I(t=""){return t.trim().replaceAll(/\s/g,"").replaceAll("-","")}const re={card:t=>t.replace(/\s+/g,"").replace(/[^0-9]/gi,"").substring(0,16).match(/.{1,4}/g)?.join(" ")??"",phone:t=>{const n=t.replace(/\D/g,"").substring(0,10),e=n.match(/^(\d{3})(\d{3})(\d{4})$/);return e?`(${e[1]}) ${e[2]}-${e[3]}`:n},expiry:t=>{const n=t.replace(/[^0-9/]/g,"");return n.length<=2?n:n.includes("/")?n.substring(0,5):n.substring(0,2)+"/"+n.substring(2,4)},cvv:t=>t.replace(/\D/g,"").substring(0,4),zip:t=>{const n=t.replace(/\D/g,"").substring(0,9);return n.length>5?`${n.substring(0,5)}-${n.substring(5)}`:n}};function ae(t,n){return n==="none"?t:re[n](t)}const $=({label:t,maskType:n,id:e,name:a,type:l="text",placeholder:m="Enter value",tooltip:c="",onChange:o})=>{const h=["card","expiry","phone","cvv","zip"].includes(n)?"numeric":"",s=u("label",{className:"input-label",innerHTML:t,attributes:{for:e}});let r=!1;const p=u("input",{id:e||"input-id",className:"styled-input",attributes:{placeholder:m,type:l,inputMode:h,name:a},events:{input:i,blur:g,keydown:w=>{w.key==="Enter"&&(r=!0)}}});function i(w){const T=n!=="none"?ae(w?.target?.value,n):w?.target?.value;p.value=T,o?.(T)}function g(){r=!0,o?.(p?.value||"")}const b=u("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),f=c?u("div",{className:"input-right-element",children:[te({content:c,id:e})]}):null,y=u("div",{className:"input-wrapper",children:[p,b,f]}),N=u("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
|
|
52
52
|
${k}
|
|
53
53
|
<span></span>
|
|
54
|
-
`});return{element:u("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{
|
|
54
|
+
`});return{element:u("div",{className:"custom-input-group",children:[s,y,N]}),setLoading:w=>{M({element:y},{dataset:{loading:w?"true":"false"}}),M({element:p},{attributes:{disabled:w?"true":"false"}}),M({element:b},{dataset:{show:w?"true":"false"}})},setError:(w="")=>{M({element:y},{className:w&&r?{add:"input-error"}:{remove:"input-error"}}),M({element:N},{dataset:{show:w&&r?"true":"false"},innerHTML:`
|
|
55
55
|
${k}
|
|
56
56
|
<span>${w||""}</span>
|
|
57
|
-
`})}}},
|
|
57
|
+
`})}}},oe=async(t,n={})=>{const{method:e="GET",headers:a={},body:l=null,...m}=n;try{const c={method:e,headers:{Accept:"*/*","Content-Type":"application/json",...a},...m};l&&["POST","PUT","PATCH","DELETE"].includes(e.toUpperCase())&&(c.body=typeof l=="string"?l:JSON.stringify(l));const o=await fetch(t,c),h=o.headers.get("content-type");let s;if(h?.includes("application/json")?s=await o.json():s=await o.text(),!o.ok){const r=s;throw new Error(r?.message||`HTTP error! status: ${o.status}`)}return{data:s,error:null}}catch(c){return{data:null,error:c instanceof Error?c.message:"An error occurred"}}},ie=({title:t="",children:n,onClose:e,showBackBtn:a=!1,showCloseBtn:l=!0})=>{const m=u("button",{className:"back-btn",innerHTML:X,dataset:{show:String(a)},events:{click:()=>d()}}),c=u("h3",{textContent:t}),o=u("button",{className:"close-btn",innerHTML:"×",dataset:{show:String(l)},attributes:{"aria-label":"Close modal"},events:{click:()=>d()}}),h=u("div",{className:"modal-header",children:[m,c,o]}),s=u("div",{className:"modal-content",children:[n]}),r=u("dialog",{className:"custom-modal",children:[h,s],events:{cancel:i=>{i.preventDefault(),d()}}}),d=()=>{r.close(),e?.()};return{element:r,setModalVisibility:i=>{i?r.showModal():r.close()}}},le=({token:t,endpoint:n,beneficiaryCard:e=!1,isModal:a=!1,onCallback:l=()=>null})=>{const m=e?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",c=e?"Enter the debit card details of the recipient you're sending funds to.":"Linking an external account allows you to send and receive money to your account.",o=e?"Debit Card Number":"Your Debit Card Number",h=e?"Enter recipient's card number":"Enter your card number",s=`add-card-form-wrapper${e?" recipient-form":""}`,r={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:d,setError:p}=$({label:o,placeholder:h,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(v){L("cardNumber",v,p)}}),{element:i,setError:g}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(v){L("expiryDate",v,g)}}),{element:b,setError:f}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",id:"cvv-input",name:"cvv",tooltip:"A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",onChange(v){L("cvv",v,f)}}),{element:y,setError:N}=$({label:"ZIP Code",placeholder:e?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(v){L("zipCode",v,N)}}),D=u("div",{className:e?"input-sections":"inputs",children:[d,i,b,y]}),A=u("p",{className:"submit-error",dataset:{show:"false"}}),{element:V,setDisabled:w,setLoading:T}=ee({children:"Link Card",type:"submit",disabled:!0}),j=(v="")=>{M({element:A},{dataset:{show:String(!!v)},innerHTML:`
|
|
58
58
|
${k}
|
|
59
59
|
${v||""}
|
|
60
|
-
`})},B=(v=!0)=>{w(v),T(v)};function L(v,H,E){r[v]=H;const{isValid:S,errors:
|
|
60
|
+
`})},B=(v=!0)=>{w(v),T(v)};function L(v,H,E){r[v]=H;const{isValid:S,errors:x}=ne(r,e);x[v]?E(x[v]):E(""),w(!S)}const O=u("div",{className:"submit-button-wrapper",children:[A,V]});async function P(v){v.preventDefault();const H=new FormData(v.target),E=Object.fromEntries(H.entries()),S=E?.cardNumber?I(E?.cardNumber):null,x=E?.expiryDate||null,_=E?.cvv?I(E?.cvv):null,G=E?.zipCode?I(E?.zipCode):null,K=x?Number(x?.split("/")[0]):null,U=x?se(x?.split("/")[1]):null;B(!0),j("");const C=await oe(n,{method:"POST",body:{token:t,pan:S,expiry_month:K,expiry_year:U,cvv:_,address:{postal_code:G}}});C.error?(console.error("Request failed:",C.error),B(!1),j(C.error),l?.({success:!1,error:C.error})):(console.log("Request success:",C.data),B(!1),l?.({success:!0,data:C.data}))}const Z=()=>u("form",{events:{submit:P},children:[D,O]}),W=()=>u("div",{className:"form-title",innerHTML:`
|
|
61
61
|
<p>${c}</p>
|
|
62
62
|
|
|
63
63
|
<div>
|
|
64
|
-
${
|
|
64
|
+
${J}
|
|
65
65
|
|
|
66
66
|
<span>Secured with 256-bit encryption</span>
|
|
67
67
|
</div>
|
|
68
|
-
`}),
|
|
68
|
+
`}),z=()=>u("div",{className:a?"":"non-modal-content",children:[W(),Z()]}),R=a?null:u("div",{className:`${s} non-modal`,children:[u("div",{className:"non-modal-header",innerHTML:`
|
|
69
69
|
<span></span>
|
|
70
70
|
<h3>${m}</h3>
|
|
71
71
|
<span></span>
|
|
72
|
-
`}),
|
|
72
|
+
`}),z()]}),{element:Y,setModalVisibility:F}=a?ie({title:m,children:z()}):{element:null,setModalVisibility:()=>{}};function q(){Y&&(document.body.appendChild(u("div",{className:s,children:[Y]})),F(!0))}return{renderFormWithModal:q,nonModalForm:R,closeModal:()=>F(!1)}};function ce({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:l,onModalClose:m}){const{renderFormWithModal:c,nonModalForm:o,closeModal:h}=le({token:t,endpoint:n,beneficiaryCard:e,isModal:a,onCallback:l});return{mount(s){const r="className"in s?document.querySelector(s.className):"id"in s?document.getElementById(s.id):s.element;r&&o&&r.appendChild(o)},open(){c()},destroy(){h(),m?.()}}}exports.init=ce;
|
package/dist/index.es.js
CHANGED
|
@@ -18,7 +18,7 @@ function u(t, n = {}) {
|
|
|
18
18
|
e.addEventListener(p, i);
|
|
19
19
|
return e;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function M(t, n) {
|
|
22
22
|
const e = "id" in t ? [document.getElementById(t.id)].filter(Boolean) : "className" in t ? Array.from(document.getElementsByClassName(t.className)) : [t.element];
|
|
23
23
|
if (!e.length) {
|
|
24
24
|
console.warn("updateElements: no elements found for", t);
|
|
@@ -46,7 +46,7 @@ function x(t, n) {
|
|
|
46
46
|
s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
const
|
|
49
|
+
const J = `
|
|
50
50
|
<svg
|
|
51
51
|
xmlns="http://www.w3.org/2000/svg"
|
|
52
52
|
width="16"
|
|
@@ -61,7 +61,7 @@ const Q = `
|
|
|
61
61
|
clip-rule="evenodd"
|
|
62
62
|
></path>
|
|
63
63
|
</svg>
|
|
64
|
-
`,
|
|
64
|
+
`, Q = `
|
|
65
65
|
<svg
|
|
66
66
|
xmlns="http://www.w3.org/2000/svg"
|
|
67
67
|
width="16"
|
|
@@ -76,7 +76,7 @@ const Q = `
|
|
|
76
76
|
>
|
|
77
77
|
<path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
|
|
78
78
|
</svg>
|
|
79
|
-
`,
|
|
79
|
+
`, X = `<svg
|
|
80
80
|
xmlns="http://www.w3.org/2000/svg"
|
|
81
81
|
width="20"
|
|
82
82
|
height="20"
|
|
@@ -93,10 +93,10 @@ const Q = `
|
|
|
93
93
|
></path>
|
|
94
94
|
</svg>`, k = `
|
|
95
95
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
96
|
-
`,
|
|
96
|
+
`, ee = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: l = "button", className: m = "", variant: c = "primary" }) => {
|
|
97
97
|
const o = u("span", {
|
|
98
98
|
className: "button-spinner",
|
|
99
|
-
innerHTML:
|
|
99
|
+
innerHTML: Q,
|
|
100
100
|
dataset: { show: "false" }
|
|
101
101
|
}), h = u("span", {
|
|
102
102
|
className: "button-label",
|
|
@@ -118,7 +118,7 @@ const Q = `
|
|
|
118
118
|
h
|
|
119
119
|
]
|
|
120
120
|
}), r = (p = !1) => {
|
|
121
|
-
|
|
121
|
+
M({ element: o }, {
|
|
122
122
|
dataset: { show: String(p) }
|
|
123
123
|
}), d(p);
|
|
124
124
|
}, d = (p = !1) => {
|
|
@@ -129,7 +129,7 @@ const Q = `
|
|
|
129
129
|
setLoading: r,
|
|
130
130
|
setDisabled: d
|
|
131
131
|
};
|
|
132
|
-
},
|
|
132
|
+
}, te = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: l = "", id: m = "" }) => {
|
|
133
133
|
var c = u("div", {
|
|
134
134
|
className: `tooltip ${n} ${l}`,
|
|
135
135
|
styles: {
|
|
@@ -163,26 +163,26 @@ const Q = `
|
|
|
163
163
|
});
|
|
164
164
|
function d() {
|
|
165
165
|
if (!r || !c) return;
|
|
166
|
-
const i = r.getBoundingClientRect(),
|
|
166
|
+
const i = r.getBoundingClientRect(), v = c.getBoundingClientRect(), b = 8;
|
|
167
167
|
let f, y;
|
|
168
168
|
switch (n) {
|
|
169
169
|
case "top":
|
|
170
|
-
f = i.top -
|
|
170
|
+
f = i.top - v.height - b, y = i.left + i.width / 2 - v.width / 2;
|
|
171
171
|
break;
|
|
172
172
|
case "bottom":
|
|
173
|
-
f = i.bottom + b, y = i.left + i.width / 2 -
|
|
173
|
+
f = i.bottom + b, y = i.left + i.width / 2 - v.width / 2;
|
|
174
174
|
break;
|
|
175
175
|
case "left":
|
|
176
|
-
f = i.top + i.height / 2 -
|
|
176
|
+
f = i.top + i.height / 2 - v.height / 2, y = i.left - v.width - b;
|
|
177
177
|
break;
|
|
178
178
|
case "right":
|
|
179
|
-
f = i.top + i.height / 2 -
|
|
179
|
+
f = i.top + i.height / 2 - v.height / 2, y = i.right + b;
|
|
180
180
|
break;
|
|
181
181
|
default:
|
|
182
|
-
f = i.top -
|
|
182
|
+
f = i.top - v.height - b, y = i.left + i.width / 2 - v.width / 2;
|
|
183
183
|
}
|
|
184
|
-
const N = window.innerWidth,
|
|
185
|
-
y < 0 && (y = b), y +
|
|
184
|
+
const N = window.innerWidth, D = window.innerHeight;
|
|
185
|
+
y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height > D && (f = D - v.height - b), c.style.top = `${f}px`, c.style.left = `${y}px`;
|
|
186
186
|
}
|
|
187
187
|
return u("div", {
|
|
188
188
|
className: "tooltip-wrapper",
|
|
@@ -192,7 +192,7 @@ const Q = `
|
|
|
192
192
|
c
|
|
193
193
|
]
|
|
194
194
|
});
|
|
195
|
-
},
|
|
195
|
+
}, ne = (t, n = !1) => {
|
|
196
196
|
const e = {}, a = Object.values(t).every(
|
|
197
197
|
(o) => !o || o.trim() === ""
|
|
198
198
|
), l = t.cardNumber?.replace(/\s/g, "");
|
|
@@ -209,9 +209,9 @@ const Q = `
|
|
|
209
209
|
else if (isNaN(s) || s < 0 || s > 99)
|
|
210
210
|
e.expiryDate = "Invalid year";
|
|
211
211
|
else {
|
|
212
|
-
const r = /* @__PURE__ */ new Date(), d = r.getFullYear(), p = r.getMonth() + 1, i = Math.floor(d / 100) * 100,
|
|
212
|
+
const r = /* @__PURE__ */ new Date(), d = r.getFullYear(), p = r.getMonth() + 1, i = Math.floor(d / 100) * 100, v = i + s, b = i + 100 + s;
|
|
213
213
|
let f;
|
|
214
|
-
|
|
214
|
+
v >= d && v <= d + 20 ? f = v : (b >= d && b <= d + 20, f = b), f < d || f === d && h < p ? e.expiryDate = "Card has expired" : f > d + 20 && (e.expiryDate = "Expiry year is too far in the future");
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
}
|
|
@@ -224,7 +224,7 @@ const Q = `
|
|
|
224
224
|
isEmpty: a
|
|
225
225
|
};
|
|
226
226
|
};
|
|
227
|
-
function
|
|
227
|
+
function se(t) {
|
|
228
228
|
const n = parseInt(t, 10);
|
|
229
229
|
if (isNaN(n) || n < 0 || n > 99) return null;
|
|
230
230
|
const e = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(e / 100) * 100;
|
|
@@ -234,7 +234,7 @@ function re(t) {
|
|
|
234
234
|
function V(t = "") {
|
|
235
235
|
return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
|
|
236
236
|
}
|
|
237
|
-
const
|
|
237
|
+
const re = {
|
|
238
238
|
card: (t) => t.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
|
|
239
239
|
phone: (t) => {
|
|
240
240
|
const n = t.replace(/\D/g, "").substring(0, 10), e = n.match(/^(\d{3})(\d{3})(\d{4})$/);
|
|
@@ -250,8 +250,8 @@ const ae = {
|
|
|
250
250
|
return n.length > 5 ? `${n.substring(0, 5)}-${n.substring(5)}` : n;
|
|
251
251
|
}
|
|
252
252
|
};
|
|
253
|
-
function
|
|
254
|
-
return n === "none" ? t :
|
|
253
|
+
function ae(t, n) {
|
|
254
|
+
return n === "none" ? t : re[n](t);
|
|
255
255
|
}
|
|
256
256
|
const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholder: m = "Enter value", tooltip: c = "", onChange: o }) => {
|
|
257
257
|
const h = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = u("label", {
|
|
@@ -273,17 +273,17 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
273
273
|
},
|
|
274
274
|
events: {
|
|
275
275
|
input: i,
|
|
276
|
-
blur:
|
|
276
|
+
blur: v,
|
|
277
277
|
keydown: (w) => {
|
|
278
278
|
w.key === "Enter" && (r = !0);
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
281
|
});
|
|
282
282
|
function i(w) {
|
|
283
|
-
const T = n !== "none" ?
|
|
283
|
+
const T = n !== "none" ? ae(w?.target?.value, n) : w?.target?.value;
|
|
284
284
|
p.value = T, o?.(T);
|
|
285
285
|
}
|
|
286
|
-
function
|
|
286
|
+
function v() {
|
|
287
287
|
r = !0, o?.(p?.value || "");
|
|
288
288
|
}
|
|
289
289
|
const b = u("div", {
|
|
@@ -293,7 +293,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
293
293
|
}), f = c ? u("div", {
|
|
294
294
|
className: "input-right-element",
|
|
295
295
|
children: [
|
|
296
|
-
|
|
296
|
+
te({ content: c, id: e })
|
|
297
297
|
]
|
|
298
298
|
}) : null, y = u("div", {
|
|
299
299
|
className: "input-wrapper",
|
|
@@ -320,18 +320,18 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
320
320
|
]
|
|
321
321
|
}),
|
|
322
322
|
setLoading: (w) => {
|
|
323
|
-
|
|
323
|
+
M({ element: y }, {
|
|
324
324
|
dataset: { loading: w ? "true" : "false" }
|
|
325
|
-
}),
|
|
325
|
+
}), M({ element: p }, {
|
|
326
326
|
attributes: { disabled: w ? "true" : "false" }
|
|
327
|
-
}),
|
|
327
|
+
}), M({ element: b }, {
|
|
328
328
|
dataset: { show: w ? "true" : "false" }
|
|
329
329
|
});
|
|
330
330
|
},
|
|
331
331
|
setError: (w = "") => {
|
|
332
|
-
|
|
332
|
+
M({ element: y }, {
|
|
333
333
|
className: w && r ? { add: "input-error" } : { remove: "input-error" }
|
|
334
|
-
}),
|
|
334
|
+
}), M({ element: N }, {
|
|
335
335
|
dataset: { show: w && r ? "true" : "false" },
|
|
336
336
|
innerHTML: `
|
|
337
337
|
${k}
|
|
@@ -340,7 +340,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
340
340
|
});
|
|
341
341
|
}
|
|
342
342
|
};
|
|
343
|
-
},
|
|
343
|
+
}, oe = async (t, n = {}) => {
|
|
344
344
|
const { method: e = "GET", headers: a = {}, body: l = null, ...m } = n;
|
|
345
345
|
try {
|
|
346
346
|
const c = {
|
|
@@ -365,7 +365,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
365
365
|
} catch (c) {
|
|
366
366
|
return { data: null, error: c instanceof Error ? c.message : "An error occurred" };
|
|
367
367
|
}
|
|
368
|
-
},
|
|
368
|
+
}, ie = ({
|
|
369
369
|
title: t = "",
|
|
370
370
|
children: n,
|
|
371
371
|
onClose: e,
|
|
@@ -374,7 +374,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
374
374
|
}) => {
|
|
375
375
|
const m = u("button", {
|
|
376
376
|
className: "back-btn",
|
|
377
|
-
innerHTML:
|
|
377
|
+
innerHTML: X,
|
|
378
378
|
dataset: { show: String(a) },
|
|
379
379
|
events: { click: () => d() }
|
|
380
380
|
}), c = u("h3", {
|
|
@@ -408,7 +408,7 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
408
408
|
i ? r.showModal() : r.close();
|
|
409
409
|
}
|
|
410
410
|
};
|
|
411
|
-
},
|
|
411
|
+
}, le = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: l = () => null }) => {
|
|
412
412
|
const m = e ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", c = e ? "Enter the debit card details of the recipient you're sending funds to." : "Linking an external account allows you to send and receive money to your account.", o = e ? "Debit Card Number" : "Your Debit Card Number", h = e ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${e ? " recipient-form" : ""}`, r = {
|
|
413
413
|
cardNumber: "",
|
|
414
414
|
expiryDate: "",
|
|
@@ -420,17 +420,17 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
420
420
|
id: "card-number-input",
|
|
421
421
|
name: "cardNumber",
|
|
422
422
|
maskType: "card",
|
|
423
|
-
onChange(
|
|
424
|
-
L("cardNumber",
|
|
423
|
+
onChange(g) {
|
|
424
|
+
L("cardNumber", g, p);
|
|
425
425
|
}
|
|
426
|
-
}), { element: i, setError:
|
|
426
|
+
}), { element: i, setError: v } = $({
|
|
427
427
|
label: "Expiration Date",
|
|
428
428
|
placeholder: "MM/YY",
|
|
429
429
|
id: "expiry-input",
|
|
430
430
|
name: "expiryDate",
|
|
431
431
|
maskType: "expiry",
|
|
432
|
-
onChange(
|
|
433
|
-
L("expiryDate",
|
|
432
|
+
onChange(g) {
|
|
433
|
+
L("expiryDate", g, v);
|
|
434
434
|
}
|
|
435
435
|
}), { element: b, setError: f } = $({
|
|
436
436
|
label: "CVV",
|
|
@@ -440,8 +440,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
440
440
|
id: "cvv-input",
|
|
441
441
|
name: "cvv",
|
|
442
442
|
tooltip: "A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",
|
|
443
|
-
onChange(
|
|
444
|
-
L("cvv",
|
|
443
|
+
onChange(g) {
|
|
444
|
+
L("cvv", g, f);
|
|
445
445
|
}
|
|
446
446
|
}), { element: y, setError: N } = $({
|
|
447
447
|
label: "ZIP Code",
|
|
@@ -449,67 +449,65 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
449
449
|
id: "zip-input",
|
|
450
450
|
name: "zipCode",
|
|
451
451
|
maskType: "zip",
|
|
452
|
-
onChange(
|
|
453
|
-
L("zipCode",
|
|
452
|
+
onChange(g) {
|
|
453
|
+
L("zipCode", g, N);
|
|
454
454
|
}
|
|
455
|
-
}),
|
|
455
|
+
}), D = u("div", {
|
|
456
456
|
className: e ? "input-sections" : "inputs",
|
|
457
457
|
children: [d, i, b, y]
|
|
458
458
|
}), A = u("p", {
|
|
459
459
|
className: "submit-error",
|
|
460
460
|
dataset: { show: "false" }
|
|
461
461
|
// innerHTML: `//icon`
|
|
462
|
-
}), { element: S, setDisabled: w, setLoading: T } =
|
|
462
|
+
}), { element: S, setDisabled: w, setLoading: T } = ee({
|
|
463
463
|
children: "Link Card",
|
|
464
464
|
type: "submit",
|
|
465
465
|
disabled: !0
|
|
466
|
-
}), j = (
|
|
467
|
-
|
|
468
|
-
dataset: { show: String(!!
|
|
466
|
+
}), j = (g = "") => {
|
|
467
|
+
M({ element: A }, {
|
|
468
|
+
dataset: { show: String(!!g) },
|
|
469
469
|
innerHTML: `
|
|
470
470
|
${k}
|
|
471
|
-
${
|
|
471
|
+
${g || ""}
|
|
472
472
|
`
|
|
473
473
|
});
|
|
474
|
-
}, B = (
|
|
475
|
-
w(
|
|
474
|
+
}, B = (g = !0) => {
|
|
475
|
+
w(g), T(g);
|
|
476
476
|
};
|
|
477
|
-
function L(
|
|
478
|
-
r[
|
|
479
|
-
const { isValid: I, errors:
|
|
480
|
-
|
|
477
|
+
function L(g, H, E) {
|
|
478
|
+
r[g] = H;
|
|
479
|
+
const { isValid: I, errors: x } = ne(r, e);
|
|
480
|
+
x[g] ? E(x[g]) : E(""), w(!I);
|
|
481
481
|
}
|
|
482
482
|
const O = u("div", {
|
|
483
483
|
className: "submit-button-wrapper",
|
|
484
484
|
children: [A, S]
|
|
485
485
|
});
|
|
486
|
-
async function P(
|
|
487
|
-
|
|
488
|
-
const H = new FormData(
|
|
489
|
-
console.log(E);
|
|
490
|
-
const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = re(D?.split("/")[1]), J = V(I);
|
|
486
|
+
async function P(g) {
|
|
487
|
+
g.preventDefault();
|
|
488
|
+
const H = new FormData(g.target), E = Object.fromEntries(H.entries()), I = E?.cardNumber ? V(E?.cardNumber) : null, x = E?.expiryDate || null, _ = E?.cvv ? V(E?.cvv) : null, G = E?.zipCode ? V(E?.zipCode) : null, K = x ? Number(x?.split("/")[0]) : null, U = x ? se(x?.split("/")[1]) : null;
|
|
491
489
|
B(!0), j("");
|
|
492
|
-
const
|
|
490
|
+
const C = await oe(n, {
|
|
493
491
|
method: "POST",
|
|
494
492
|
body: {
|
|
495
493
|
token: t,
|
|
496
|
-
pan:
|
|
494
|
+
pan: I,
|
|
497
495
|
expiry_month: K,
|
|
498
496
|
expiry_year: U,
|
|
499
|
-
cvv:
|
|
497
|
+
cvv: _,
|
|
500
498
|
address: {
|
|
501
|
-
postal_code:
|
|
499
|
+
postal_code: G
|
|
502
500
|
}
|
|
503
501
|
}
|
|
504
502
|
});
|
|
505
|
-
|
|
503
|
+
C.error ? (console.error("Request failed:", C.error), B(!1), j(C.error), l?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), l?.({ success: !0, data: C.data }));
|
|
506
504
|
}
|
|
507
505
|
const Z = () => u("form", {
|
|
508
506
|
events: {
|
|
509
507
|
submit: P
|
|
510
508
|
},
|
|
511
509
|
children: [
|
|
512
|
-
|
|
510
|
+
D,
|
|
513
511
|
O
|
|
514
512
|
]
|
|
515
513
|
}), W = () => u("div", {
|
|
@@ -518,12 +516,12 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
518
516
|
<p>${c}</p>
|
|
519
517
|
|
|
520
518
|
<div>
|
|
521
|
-
${
|
|
519
|
+
${J}
|
|
522
520
|
|
|
523
521
|
<span>Secured with 256-bit encryption</span>
|
|
524
522
|
</div>
|
|
525
523
|
`
|
|
526
|
-
}),
|
|
524
|
+
}), z = () => u("div", {
|
|
527
525
|
className: a ? "" : "non-modal-content",
|
|
528
526
|
children: [W(), Z()]
|
|
529
527
|
}), R = a ? null : u("div", {
|
|
@@ -537,15 +535,15 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
537
535
|
<span></span>
|
|
538
536
|
`
|
|
539
537
|
}),
|
|
540
|
-
|
|
538
|
+
z()
|
|
541
539
|
]
|
|
542
|
-
}), { element:
|
|
540
|
+
}), { element: Y, setModalVisibility: F } = a ? ie({ title: m, children: z() }) : { element: null, setModalVisibility: () => {
|
|
543
541
|
} };
|
|
544
542
|
function q() {
|
|
545
|
-
|
|
543
|
+
Y && (document.body.appendChild(
|
|
546
544
|
u("div", {
|
|
547
545
|
className: s,
|
|
548
|
-
children: [
|
|
546
|
+
children: [Y]
|
|
549
547
|
})
|
|
550
548
|
), F(!0));
|
|
551
549
|
}
|
|
@@ -555,8 +553,8 @@ const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholde
|
|
|
555
553
|
closeModal: () => F(!1)
|
|
556
554
|
};
|
|
557
555
|
};
|
|
558
|
-
function
|
|
559
|
-
const { renderFormWithModal: c, nonModalForm: o, closeModal: h } =
|
|
556
|
+
function ce({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: l, onModalClose: m }) {
|
|
557
|
+
const { renderFormWithModal: c, nonModalForm: o, closeModal: h } = le({
|
|
560
558
|
token: t,
|
|
561
559
|
endpoint: n,
|
|
562
560
|
beneficiaryCard: e,
|
|
@@ -577,5 +575,5 @@ function de({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback:
|
|
|
577
575
|
};
|
|
578
576
|
}
|
|
579
577
|
export {
|
|
580
|
-
|
|
578
|
+
ce as init
|
|
581
579
|
};
|