@taprail/checkout 0.3.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +25 -11
  2. package/dist/chunk-CIVYKW6L.js +56 -0
  3. package/dist/index.cjs +33 -10
  4. package/dist/index.d.cts +23 -9
  5. package/dist/index.d.ts +23 -9
  6. package/dist/index.global.js +33 -10
  7. package/dist/index.js +1 -1
  8. package/dist/react.cjs +33 -10
  9. package/dist/react.js +1 -1
  10. package/package.json +1 -1
  11. package/dist/chunk-UZGOWXDY.js +0 -33
package/README.md CHANGED
@@ -1,16 +1,23 @@
1
1
  # @taprail/checkout
2
2
 
3
- Drop-in **Pay with Taprail** for the browser. Your customer pays inside the
4
- Taprail app. Card details never touch your site, and your API key never
5
- touches the browser.
3
+ Drop-in **Pay with Taprail** for the browser. Card details never touch your
4
+ site, and your API key never touches the browser.
6
5
 
7
6
  The shape of it: your server creates an order with your secret key, hands the
8
- result to the page, and the SDK takes it from there. On desktop that's a small
9
- modal with a QR code the shopper scans. On a phone it opens the Taprail app
10
- directly and shows a waiting card until they come back. The modal is themeable.
7
+ result to the page, and the SDK takes it from there.
11
8
 
12
- It's about 5 KB gzipped with zero dependencies, and ships ESM, CJS, a UMD
13
- build for script tags, and a React subpath.
9
+ - **Desktop** is email-first. The shopper enters their email and the SDK picks
10
+ the rail: if they already have a Taprail account they approve a push in the
11
+ app; if not, they pay by a one-time bank transfer (Paystack "Pay with
12
+ Transfer") and the SDK confirms it automatically.
13
+ - **Mobile** opens the Taprail app directly and shows a waiting card until the
14
+ shopper comes back.
15
+
16
+ The modal is themeable. After a transfer payment the SDK shows a light "get the
17
+ app" nudge so first-time payers can tap next time.
18
+
19
+ It ships with zero dependencies as ESM, CJS, a UMD build for script tags, and a
20
+ React subpath.
14
21
 
15
22
  ## 1. Create the order on your server
16
23
 
@@ -89,6 +96,13 @@ If you've set a return URL in the dashboard and don't want to handle the
89
96
  result in code, pass `redirect: true` and the SDK sends the browser there
90
97
  itself, with `?order=<id>&status=<status>` appended.
91
98
 
99
+ A couple of optional knobs on `open(intent, opts)`:
100
+
101
+ | Option | Default | What it does |
102
+ | --- | --- | --- |
103
+ | `email` | — | Pre-fills the desktop email field (e.g. a signed-in shopper) |
104
+ | `appNudge` | `true` | Show the "get the Taprail app" prompt after a transfer payment |
105
+
92
106
  One thing to keep straight: the browser result is for the user experience,
93
107
  not for fulfilment. Ship goods off your `order.approved` webhook. The promise
94
108
  resolves on both desktop and mobile, but a shopper can always close the tab or
@@ -97,8 +111,8 @@ the source of truth.
97
111
 
98
112
  ## Theming
99
113
 
100
- The modal chrome (backdrop, panel, the mobile waiting card, buttons) follows a
101
- theme. Set a default once with `init`, or per checkout in `open`:
114
+ The modal chrome (backdrop, panel, the email field, transfer details, buttons)
115
+ follows a theme. Set a default once with `init`, or per checkout in `open`:
102
116
 
103
117
  ```ts
104
118
  import { init, open } from "@taprail/checkout";
@@ -123,7 +137,7 @@ resolved `mode`:
123
137
  | Field | What it colors |
124
138
  | --- | --- |
125
139
  | `mode` | `auto` (default — matches the OS), `light`, or `dark` |
126
- | `accent` / `accentText` | The "Open Taprail" button and focus rings |
140
+ | `accent` / `accentText` | The primary buttons (Continue, Open Taprail) and focus rings |
127
141
  | `surface` | The modal / card background |
128
142
  | `text` / `muted` | Primary and secondary text |
129
143
  | `backdrop` | The scrim behind the modal (include your own alpha) |
package/dist/chunk-CIVYKW6L.js ADDED
@@ -0,0 +1,56 @@
1
+ var Y=new Set(["approved","declined","expired","cancelled","refunded"]),v={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}},mt="https://taprail.app";function St(r){r.apiBase&&(v.apiBase=r.apiBase.replace(/\/$/,"")),r.embedBase&&(v.embedBase=r.embedBase.replace(/\/$/,"")),r.theme&&(v.theme={...v.theme,...r.theme});}function ft(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var gt="com.taprail.consumer";function X(r){let e=encodeURIComponent(r);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${e}#Intent;scheme=taprail;package=${gt};end`:`taprail://pay?o=${e}`}function Z(r){try{return new URL(r).searchParams.get("o")}catch{return null}}function tt(r){if(typeof r=="string"){if(/^https?:\/\//.test(r)){let a=Z(r);if(!a)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:a}}return {id:r}}let e=r.id||r.order_id||Z(r.deep_link||"")||"";if(!e)throw new Error("Taprail: could not determine the order id from the intent");return {id:e}}async function H(r){let e=await fetch(`${v.apiBase}/v1/checkout/orders/${r}`,{cache:"no-store"});if(!e.ok)return {_ok:false,status:"unknown",order_id:r,transaction_reference:null,return_url:null};let a=await e.json();return {_ok:true,status:a.status,order_id:a.id??r,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null,merchant_name:a.merchant_name??void 0,amount_kobo:typeof a.amount_kobo=="number"?a.amount_kobo:void 0,currency:a.currency??void 0}}async function bt(r,e){let a=await fetch(`${v.apiBase}/v1/checkout/orders/${r}/identify`,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({email:e}),cache:"no-store"}),d=null;try{d=await a.json();}catch{}if(!a.ok){let p=d&&(d.message||d.error)||"We couldn't continue. Please try again.";throw new Error(p)}return d}function D(r,e){let a=r/100;return !e||e==="NGN"?"\u20A6"+a.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${e} ${a.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function xt(r){if(r.return_url)try{let e=new URL(r.return_url);e.searchParams.set("order",r.order_id),e.searchParams.set("status",r.status),window.location.href=e.toString();}catch{}}var ht='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',vt={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},yt={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function kt(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function wt(r){let e={...v.theme,...r},a=e.mode==="light"?"light":e.mode==="dark"||kt()?"dark":"light",d=a==="light"?yt:vt;return {palette:{surface:e.surface??d.surface,text:e.text??d.text,muted:e.muted??d.muted,accent:e.accent??d.accent,accentText:e.accentText??d.accentText,backdrop:e.backdrop??d.backdrop},mode:a,radius:typeof e.radius=="number"?e.radius:20,font:e.fontFamily??ht}}function Et(r){let e=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(r.trim());if(!e)return "127,127,127";let a=e[1];a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]);let d=parseInt(a,16);return `${d>>16&255},${d>>8&255},${d&255}`}var J="taprail-checkout-css",Ct=`
2
+ [data-taprail="overlay"]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:var(--tr-backdrop);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);font-family:var(--tr-font);animation:tr-fade .12s ease both;}
3
+ [data-taprail="frame"]{position:relative;width:min(420px,92vw);background:var(--tr-surface);border-radius:var(--tr-radius);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.08),0 24px 70px -20px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.5);animation:tr-pop .19s cubic-bezier(.2,.9,.25,1) both;}
4
+ [data-taprail="card"]{padding:34px 30px 30px;text-align:center;color:var(--tr-text);}
5
+ [data-taprail="card"].tr-left{text-align:left;}
6
+ [data-taprail="card"] .tr-logo{margin:0 auto 20px;}
7
+ [data-taprail="card"].tr-left .tr-logo{margin:0 0 20px;}
8
+ .tr-logo{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tr-text);}
9
+ .tr-logo svg{display:block;flex:none;}
10
+ .tr-word{font-size:16px;font-weight:650;letter-spacing:-.02em;}
11
+ .tr-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(var(--tr-text-rgb),.16);border-top-color:var(--tr-text);animation:tr-spin .7s linear infinite;}
12
+ .tr-ring.tr-sm{width:15px;height:15px;border-width:2px;}
13
+ .tr-amount{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;}
14
+ .tr-merchant{font-size:13px;color:var(--tr-muted);margin-top:3px;}
15
+ .tr-title{font-size:17px;font-weight:650;letter-spacing:-.01em;}
16
+ .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 0;max-width:32ch;}
17
+ [data-taprail="card"].tr-left .tr-sub{margin-left:0;margin-right:0;}
18
+ .tr-field{margin-top:22px;text-align:left;}
19
+ .tr-label{display:block;font-size:12.5px;font-weight:600;color:var(--tr-muted);margin:0 0 7px 2px;}
20
+ .tr-input{width:100%;box-sizing:border-box;background:rgba(var(--tr-text-rgb),.045);color:var(--tr-text);border:1px solid rgba(var(--tr-text-rgb),.16);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;outline:none;transition:border-color .12s ease,box-shadow .12s ease;}
21
+ .tr-input::placeholder{color:var(--tr-muted);opacity:.8;}
22
+ .tr-input:focus{border-color:var(--tr-accent);box-shadow:0 0 0 3px rgba(var(--tr-text-rgb),.10);}
23
+ .tr-input.tr-bad{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.16);}
24
+ .tr-err{display:none;font-size:12.5px;color:#e5675b;margin:8px 2px 0;text-align:left;}
25
+ .tr-err.tr-on{display:block;}
26
+ .tr-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
27
+ .tr-btn:hover{filter:brightness(1.06);}
28
+ .tr-btn:active{transform:scale(.975);}
29
+ .tr-btn[disabled]{opacity:.6;cursor:default;pointer-events:none;}
30
+ .tr-btn.tr-mt{margin-top:18px;}
31
+ .tr-ghost{display:inline-block;width:100%;box-sizing:border-box;background:transparent;color:var(--tr-muted);border:0;border-radius:999px;padding:12px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:center;text-decoration:none;transition:color .12s ease;}
32
+ .tr-ghost:hover{color:var(--tr-text);}
33
+ .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:22px;}
34
+ .tr-cap{font-size:12.5px;color:var(--tr-muted);}
35
+ .tr-acct{margin-top:22px;border:1px solid rgba(var(--tr-text-rgb),.14);border-radius:14px;overflow:hidden;}
36
+ .tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid rgba(var(--tr-text-rgb),.10);}
37
+ .tr-row:first-child{border-top:0;}
38
+ .tr-rk{font-size:12.5px;color:var(--tr-muted);}
39
+ .tr-rv{font-size:14.5px;font-weight:600;color:var(--tr-text);text-align:right;}
40
+ .tr-rv.tr-mono{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:16px;}
41
+ .tr-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(var(--tr-text-rgb),.07);color:var(--tr-text);border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s ease;}
42
+ .tr-copy:hover{background:rgba(var(--tr-text-rgb),.12);}
43
+ .tr-copy svg{display:block;}
44
+ .tr-expiry{font-size:12px;color:var(--tr-muted);margin-top:12px;text-align:center;}
45
+ .tr-check{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(46,160,90,.14);color:#2ea05a;}
46
+ [data-taprail="close"]{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tr-surface);color:var(--tr-text);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.14),0 2px 10px -2px rgba(0,0,0,.4);transition:transform .12s ease,box-shadow .12s ease;}
47
+ [data-taprail="close"] svg{display:block;opacity:.7;transition:opacity .12s ease;}
48
+ [data-taprail="close"]:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.24),0 4px 14px -3px rgba(0,0,0,.5);}
49
+ [data-taprail="close"]:hover svg{opacity:1;}
50
+ [data-taprail="close"]:active{transform:scale(.93);}
51
+ [data-taprail="close"]:focus-visible{outline:2px solid var(--tr-accent);outline-offset:2px;}
52
+ @keyframes tr-fade{from{opacity:0}to{opacity:1}}
53
+ @keyframes tr-pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
54
+ @keyframes tr-spin{to{transform:rotate(360deg)}}
55
+ @media (prefers-reduced-motion:reduce){[data-taprail="overlay"],[data-taprail="frame"]{animation:none}.tr-ring{animation-duration:1.4s}.tr-btn,[data-taprail="close"]{transition:none}}
56
+ `;function _t(){if(typeof document>"u"||document.getElementById(J))return;let r=document.createElement("style");r.id=J,r.textContent=Ct,document.head.appendChild(r);}var Tt='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function T(r=false){let e=document.createElement("div");return e.className="tr-logo",r&&(e.style.justifyContent="flex-start"),e.innerHTML=`${Tt}<span class="tr-word">Taprail</span>`,e}function L(r=false){let e=document.createElement("div");return e.className=r?"tr-ring tr-sm":"tr-ring",e}var Lt='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',Nt='<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5.25" y="5.25" width="8.5" height="8.5" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M10.75 5.25V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4.75a2 2 0 0 0 2 2h1.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',At='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12.5l4.2 4.2L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';function Pt(r,e={}){let{id:a}=tt(r);return ft()?(window.location.href=X(a),Q(a,e,"app")):Q(a,e,"email")}function Q(r,e,a){return new Promise(d=>{let p=false,N=false,y,j=2e3,w=false,A=0,E=a==="app"?"app":"taprail",f={},et=document.activeElement,rt=document.body.style.overflow;_t();let{palette:b,radius:nt,font:at}=wt(e.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let g=document.createElement("div");g.setAttribute("data-taprail","overlay"),g.setAttribute("role","dialog"),g.setAttribute("aria-modal","true"),g.setAttribute("aria-label","Pay with Taprail");let F={"--tr-surface":b.surface,"--tr-text":b.text,"--tr-text-rgb":Et(b.text),"--tr-muted":b.muted,"--tr-accent":b.accent,"--tr-accent-text":b.accentText,"--tr-backdrop":b.backdrop,"--tr-radius":`${nt}px`,"--tr-font":at};for(let t in F)g.style.setProperty(t,F[t]);let S=document.createElement("div");S.setAttribute("data-taprail","frame");let x=document.createElement("button");x.setAttribute("data-taprail","close"),x.setAttribute("aria-label","Close"),x.innerHTML=Lt;let P=document.createElement("div");function C(t){P.replaceChildren(t);}function ot(){clearTimeout(y),document.removeEventListener("keydown",I),document.removeEventListener("visibilitychange",U),window.removeEventListener("focus",O),g.remove(),document.body.style.overflow=rt,et?.focus?.();}function k(t){p||(p=true,ot(),d(t),e.redirect&&t.status!=="closed"&&xt(t));}function M(){p||(e.onClose?.(),k({status:"closed",order_id:r,transaction_reference:null,return_url:null}));}function I(t){t.key==="Escape"&&M();}function G(t){if(p)return;W();let o={status:t.status,order_id:t.order_id,transaction_reference:t.transaction_reference,return_url:t.return_url,rail:E};t.status==="approved"?(e.onSuccess?.(o),pt(o)):k(o);}function R(t){w=true,j=t,clearTimeout(y),y=setTimeout(z,400);}function W(){w=false,clearTimeout(y);}async function z(){if(!(p||N||!w)){N=true;try{let t=await H(r);if(A=0,t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}}catch(t){A+=1,A===4&&e.onError?.(t instanceof Error?t:new Error(String(t)));}finally{N=false;}!p&&w&&(y=setTimeout(z,j));}}function O(){p||!w||(clearTimeout(y),z());}function U(){document.visibilityState==="visible"&&O();}function $(){let t=document.createElement("div");if(t.className="tr-sum",f.amount_kobo!=null){let o=document.createElement("div");if(o.className="tr-amount",o.textContent=D(f.amount_kobo,f.currency),t.appendChild(o),f.merchant_name){let s=document.createElement("div");s.className="tr-merchant",s.textContent=f.merchant_name,t.appendChild(s);}}else {let o=document.createElement("div");o.className="tr-title",o.textContent="Complete your payment",t.appendChild(o);}return t}function it(){P.querySelectorAll(".tr-sum").forEach(t=>t.replaceWith($()));}function K(){let t=document.createElement("div");t.setAttribute("data-taprail","card"),t.classList.add("tr-left");let o=document.createElement("div");o.className="tr-sub",o.textContent="Enter your email to pay with Taprail, or by bank transfer.";let s=document.createElement("div");s.className="tr-field";let c=document.createElement("label");c.className="tr-label",c.textContent="Email",c.htmlFor="tr-email";let n=document.createElement("input");n.className="tr-input",n.id="tr-email",n.type="email",n.inputMode="email",n.autocomplete="email",n.placeholder="you@example.com",n.value=e.email??"";let l=document.createElement("div");l.className="tr-err",s.append(c,n,l);let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Continue",i.appendChild(u);function m(h){l.textContent=h,l.classList.add("tr-on"),n.classList.add("tr-bad");}function V(){l.classList.remove("tr-on"),n.classList.remove("tr-bad");}async function q(){let h=n.value.trim();if(!h||!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(h)){m("Enter a valid email address."),n.focus();return}V(),i.setAttribute("disabled","true"),u.textContent="Checking",i.prepend(L(true));try{let _=await bt(r,h);_.method==="taprail"?(E="taprail",st()):(E="transfer",ct(_.account));}catch(_){i.querySelector(".tr-ring")?.remove(),i.removeAttribute("disabled"),u.textContent="Continue",m(_ instanceof Error?_.message:"Something went wrong. Try again.");}}n.addEventListener("input",V),n.addEventListener("keydown",h=>{h.key==="Enter"&&q();}),i.addEventListener("click",q),t.append(T(true),$(),o,s,i),C(t),setTimeout(()=>n.focus(),30);}function st(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Confirm in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="We sent a confirmation to your Taprail app. Approve it there to finish.";let c=document.createElement("div");c.className="tr-wait";let n=document.createElement("span");n.textContent="Waiting for approval",c.append(L(true),n);let l=document.createElement("button");l.className="tr-ghost",l.type="button",l.textContent="Use a different email",l.addEventListener("click",()=>{W(),E="taprail",K();}),t.append(T(),o,s,c,l),C(t),R(1800);}function ct(t){let o=document.createElement("div");o.setAttribute("data-taprail","card"),o.classList.add("tr-left");let s=document.createElement("div");s.className="tr-title",s.textContent="Pay by bank transfer";let c=document.createElement("div");c.className="tr-sub";let n=t.amount_kobo!=null?D(t.amount_kobo,f.currency):"the exact amount";c.textContent=`Send ${n} to the account below. We'll confirm automatically.`;let l=document.createElement("div");l.className="tr-acct",l.append(B("Bank",t.bank||"\u2014"),lt("Account number",t.account_number||"\u2014"),B("Account name",t.account_name||"Taprail")),t.amount_kobo!=null&&l.append(B("Amount",D(t.amount_kobo,f.currency)));let i=document.createElement("div");i.className="tr-wait";let u=document.createElement("span");if(u.textContent="Waiting for your transfer",i.append(L(true),u),o.append(T(true),s,c,l),t.expires_at){let m=document.createElement("div");m.className="tr-expiry",o.appendChild(m),dt(m,t.expires_at);}o.appendChild(i),C(o),R(1500);}function B(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");return n.className="tr-rv",n.textContent=o,s.append(c,n),s}function lt(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");n.style.display="inline-flex",n.style.alignItems="center",n.style.gap="10px";let l=document.createElement("span");l.className="tr-rv tr-mono",l.textContent=o;let i=document.createElement("button");return i.className="tr-copy",i.type="button",i.innerHTML=`${Nt}<span>Copy</span>`,i.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(o.replace(/\s/g,""));let u=i.querySelector("span");u&&(u.textContent="Copied",setTimeout(()=>u.textContent="Copy",1400));}catch{}}),n.append(l,i),s.append(c,n),s}function dt(t,o){let s=new Date(o).getTime();if(Number.isNaN(s))return;let c=()=>{if(p)return;let n=Math.max(0,Math.floor((s-Date.now())/1e3)),l=Math.floor(n/60),i=n%60;t.textContent=n>0?`Account expires in ${l}:${i.toString().padStart(2,"0")}`:"This account has expired.",n>0&&!p&&setTimeout(c,1e3);};c();}function ut(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Continue in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="Approve this payment in the Taprail app, then come back here.";let c=document.createElement("a");c.className="tr-btn tr-mt",c.href=X(r);let n=document.createElement("span");n.textContent="Open Taprail",c.appendChild(n);let l=document.createElement("div");l.className="tr-wait";let i=document.createElement("span");i.textContent="Waiting for approval",l.append(L(true),i),t.append(T(),$(),s,c,l),C(t),R(1200);}function pt(t){let o=document.createElement("div");o.setAttribute("data-taprail","card");let s=document.createElement("div");s.className="tr-check",s.innerHTML=At;let c=document.createElement("div");c.className="tr-title",c.textContent="Payment complete";let n=document.createElement("div");n.className="tr-sub",o.append(s,c,n);let l=E==="transfer"&&e.appNudge!==false;if(l){n.textContent="Next time, pay with a single tap. Get the Taprail app.";let i=document.createElement("a");i.className="tr-btn tr-mt",i.href=mt,i.target="_blank",i.rel="noopener";let u=document.createElement("span");u.textContent="Get the Taprail app",i.appendChild(u);let m=document.createElement("button");m.className="tr-ghost",m.type="button",m.textContent="Done",m.addEventListener("click",()=>k(t)),o.append(i,m);}else {n.textContent=f.merchant_name?`Your payment to ${f.merchant_name} is confirmed.`:"Your payment is confirmed.";let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Done",i.appendChild(u),i.addEventListener("click",()=>k(t)),o.append(i);}x.onclick=()=>k(t),setTimeout(()=>k(t),l?12e3:6e3),C(o);}x.addEventListener("click",M),g.addEventListener("click",t=>{t.target===g&&M();}),document.addEventListener("keydown",I),document.addEventListener("visibilitychange",U),window.addEventListener("focus",O),S.append(P,x),g.appendChild(S),document.body.appendChild(g),document.body.style.overflow="hidden",H(r).then(t=>{if(!p){if(t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}it();}}).catch(()=>{}),a==="app"?ut():K(),x.focus();})}async function Mt(r){let{id:e}=tt(r),a=await H(e);return {status:a.status,order_id:a.order_id,transaction_reference:a.transaction_reference,return_url:a.return_url}}export{St as a,Pt as b,Mt as c};
package/dist/index.cjs CHANGED
@@ -1,25 +1,48 @@
1
- 'use strict';var P=new Set(["approved","declined","expired","cancelled","refunded"]),d={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}};function se(e){e.apiBase&&(d.apiBase=e.apiBase.replace(/\/$/,"")),e.embedBase&&(d.embedBase=e.embedBase.replace(/\/$/,"")),e.theme&&(d.theme={...d.theme,...e.theme});}function V(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var Z="com.taprail.consumer";function N(e){let t=encodeURIComponent(e);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${t}#Intent;scheme=taprail;package=${Z};end`:`taprail://pay?o=${t}`}function R(e){try{return new URL(e).searchParams.get("o")}catch{return null}}function D(e){if(typeof e=="string"){if(/^https?:\/\//.test(e)){let i=R(e);if(!i)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:i,deepLink:e}}return {id:e,deepLink:`${d.embedBase}/pay?o=${e}`}}let t=e.id||e.order_id||R(e.deep_link||"")||"";if(!t)throw new Error("Taprail: could not determine the order id from the intent");let n=e.deep_link||e.qr_payload||`${d.embedBase}/pay?o=${t}`;return {id:t,deepLink:n}}async function F(e){let t=await fetch(`${d.apiBase}/v1/checkout/orders/${e}`,{cache:"no-store"});if(!t.ok)return {_ok:false,status:"unknown",order_id:e,transaction_reference:null,return_url:null};let n=await t.json();return {_ok:true,status:n.status,order_id:n.id??e,transaction_reference:n.transaction_reference??null,return_url:n.return_url??null,merchant_name:n.merchant_name??void 0,amount_kobo:typeof n.amount_kobo=="number"?n.amount_kobo:void 0,currency:n.currency??void 0}}function Y(e,t){let n=e/100;return !t||t==="NGN"?"\u20A6"+n.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${t} ${n.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function W(e){if(e.return_url)try{let t=new URL(e.return_url);t.searchParams.set("order",e.order_id),t.searchParams.set("status",e.status),window.location.href=t.toString();}catch{}}var J='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',Q={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},X={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function ee(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function te(e){let t={...d.theme,...e},n=t.mode==="light"?"light":t.mode==="dark"||ee()?"dark":"light",i=n==="light"?X:Q;return {palette:{surface:t.surface??i.surface,text:t.text??i.text,muted:t.muted??i.muted,accent:t.accent??i.accent,accentText:t.accentText??i.accentText,backdrop:t.backdrop??i.backdrop},mode:n,radius:typeof t.radius=="number"?t.radius:20,font:t.fontFamily??J}}function re(e){let t=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!t)return "127,127,127";let n=t[1];n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let i=parseInt(n,16);return `${i>>16&255},${i>>8&255},${i&255}`}var $="taprail-checkout-css",ne=`
1
+ 'use strict';var Y=new Set(["approved","declined","expired","cancelled","refunded"]),v={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}},mt="https://taprail.app";function St(r){r.apiBase&&(v.apiBase=r.apiBase.replace(/\/$/,"")),r.embedBase&&(v.embedBase=r.embedBase.replace(/\/$/,"")),r.theme&&(v.theme={...v.theme,...r.theme});}function ft(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var gt="com.taprail.consumer";function X(r){let e=encodeURIComponent(r);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${e}#Intent;scheme=taprail;package=${gt};end`:`taprail://pay?o=${e}`}function Z(r){try{return new URL(r).searchParams.get("o")}catch{return null}}function tt(r){if(typeof r=="string"){if(/^https?:\/\//.test(r)){let a=Z(r);if(!a)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:a}}return {id:r}}let e=r.id||r.order_id||Z(r.deep_link||"")||"";if(!e)throw new Error("Taprail: could not determine the order id from the intent");return {id:e}}async function H(r){let e=await fetch(`${v.apiBase}/v1/checkout/orders/${r}`,{cache:"no-store"});if(!e.ok)return {_ok:false,status:"unknown",order_id:r,transaction_reference:null,return_url:null};let a=await e.json();return {_ok:true,status:a.status,order_id:a.id??r,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null,merchant_name:a.merchant_name??void 0,amount_kobo:typeof a.amount_kobo=="number"?a.amount_kobo:void 0,currency:a.currency??void 0}}async function bt(r,e){let a=await fetch(`${v.apiBase}/v1/checkout/orders/${r}/identify`,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({email:e}),cache:"no-store"}),d=null;try{d=await a.json();}catch{}if(!a.ok){let p=d&&(d.message||d.error)||"We couldn't continue. Please try again.";throw new Error(p)}return d}function D(r,e){let a=r/100;return !e||e==="NGN"?"\u20A6"+a.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${e} ${a.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function xt(r){if(r.return_url)try{let e=new URL(r.return_url);e.searchParams.set("order",r.order_id),e.searchParams.set("status",r.status),window.location.href=e.toString();}catch{}}var ht='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',vt={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},yt={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function kt(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function wt(r){let e={...v.theme,...r},a=e.mode==="light"?"light":e.mode==="dark"||kt()?"dark":"light",d=a==="light"?yt:vt;return {palette:{surface:e.surface??d.surface,text:e.text??d.text,muted:e.muted??d.muted,accent:e.accent??d.accent,accentText:e.accentText??d.accentText,backdrop:e.backdrop??d.backdrop},mode:a,radius:typeof e.radius=="number"?e.radius:20,font:e.fontFamily??ht}}function Et(r){let e=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(r.trim());if(!e)return "127,127,127";let a=e[1];a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]);let d=parseInt(a,16);return `${d>>16&255},${d>>8&255},${d&255}`}var J="taprail-checkout-css",Ct=`
2
2
  [data-taprail="overlay"]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:var(--tr-backdrop);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);font-family:var(--tr-font);animation:tr-fade .12s ease both;}
3
3
  [data-taprail="frame"]{position:relative;width:min(420px,92vw);background:var(--tr-surface);border-radius:var(--tr-radius);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.08),0 24px 70px -20px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.5);animation:tr-pop .19s cubic-bezier(.2,.9,.25,1) both;}
4
- [data-taprail="frame"].tr-iframe{height:min(620px,90vh);}
5
- [data-taprail="frame"] iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;background:transparent;}
6
- [data-taprail="loader"]{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--tr-text);}
4
+ [data-taprail="card"]{padding:34px 30px 30px;text-align:center;color:var(--tr-text);}
5
+ [data-taprail="card"].tr-left{text-align:left;}
6
+ [data-taprail="card"] .tr-logo{margin:0 auto 20px;}
7
+ [data-taprail="card"].tr-left .tr-logo{margin:0 0 20px;}
7
8
  .tr-logo{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tr-text);}
8
9
  .tr-logo svg{display:block;flex:none;}
9
10
  .tr-word{font-size:16px;font-weight:650;letter-spacing:-.02em;}
10
11
  .tr-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(var(--tr-text-rgb),.16);border-top-color:var(--tr-text);animation:tr-spin .7s linear infinite;}
11
12
  .tr-ring.tr-sm{width:15px;height:15px;border-width:2px;}
12
- [data-taprail="card"]{padding:38px 30px 30px;text-align:center;color:var(--tr-text);}
13
- [data-taprail="card"] .tr-logo{margin:0 auto 22px;}
14
13
  .tr-amount{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;}
15
14
  .tr-merchant{font-size:13px;color:var(--tr-muted);margin-top:3px;}
16
15
  .tr-title{font-size:17px;font-weight:650;letter-spacing:-.01em;}
17
- .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 22px;max-width:30ch;}
18
- .tr-btn{display:block;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
16
+ .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 0;max-width:32ch;}
17
+ [data-taprail="card"].tr-left .tr-sub{margin-left:0;margin-right:0;}
18
+ .tr-field{margin-top:22px;text-align:left;}
19
+ .tr-label{display:block;font-size:12.5px;font-weight:600;color:var(--tr-muted);margin:0 0 7px 2px;}
20
+ .tr-input{width:100%;box-sizing:border-box;background:rgba(var(--tr-text-rgb),.045);color:var(--tr-text);border:1px solid rgba(var(--tr-text-rgb),.16);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;outline:none;transition:border-color .12s ease,box-shadow .12s ease;}
21
+ .tr-input::placeholder{color:var(--tr-muted);opacity:.8;}
22
+ .tr-input:focus{border-color:var(--tr-accent);box-shadow:0 0 0 3px rgba(var(--tr-text-rgb),.10);}
23
+ .tr-input.tr-bad{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.16);}
24
+ .tr-err{display:none;font-size:12.5px;color:#e5675b;margin:8px 2px 0;text-align:left;}
25
+ .tr-err.tr-on{display:block;}
26
+ .tr-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
19
27
  .tr-btn:hover{filter:brightness(1.06);}
20
28
  .tr-btn:active{transform:scale(.975);}
21
- .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:20px;}
29
+ .tr-btn[disabled]{opacity:.6;cursor:default;pointer-events:none;}
30
+ .tr-btn.tr-mt{margin-top:18px;}
31
+ .tr-ghost{display:inline-block;width:100%;box-sizing:border-box;background:transparent;color:var(--tr-muted);border:0;border-radius:999px;padding:12px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:center;text-decoration:none;transition:color .12s ease;}
32
+ .tr-ghost:hover{color:var(--tr-text);}
33
+ .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:22px;}
22
34
  .tr-cap{font-size:12.5px;color:var(--tr-muted);}
35
+ .tr-acct{margin-top:22px;border:1px solid rgba(var(--tr-text-rgb),.14);border-radius:14px;overflow:hidden;}
36
+ .tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid rgba(var(--tr-text-rgb),.10);}
37
+ .tr-row:first-child{border-top:0;}
38
+ .tr-rk{font-size:12.5px;color:var(--tr-muted);}
39
+ .tr-rv{font-size:14.5px;font-weight:600;color:var(--tr-text);text-align:right;}
40
+ .tr-rv.tr-mono{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:16px;}
41
+ .tr-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(var(--tr-text-rgb),.07);color:var(--tr-text);border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s ease;}
42
+ .tr-copy:hover{background:rgba(var(--tr-text-rgb),.12);}
43
+ .tr-copy svg{display:block;}
44
+ .tr-expiry{font-size:12px;color:var(--tr-muted);margin-top:12px;text-align:center;}
45
+ .tr-check{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(46,160,90,.14);color:#2ea05a;}
23
46
  [data-taprail="close"]{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tr-surface);color:var(--tr-text);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.14),0 2px 10px -2px rgba(0,0,0,.4);transition:transform .12s ease,box-shadow .12s ease;}
24
47
  [data-taprail="close"] svg{display:block;opacity:.7;transition:opacity .12s ease;}
25
48
  [data-taprail="close"]:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.24),0 4px 14px -3px rgba(0,0,0,.5);}
@@ -30,4 +53,4 @@
30
53
  @keyframes tr-pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
31
54
  @keyframes tr-spin{to{transform:rotate(360deg)}}
32
55
  @media (prefers-reduced-motion:reduce){[data-taprail="overlay"],[data-taprail="frame"]{animation:none}.tr-ring{animation-duration:1.4s}.tr-btn,[data-taprail="close"]{transition:none}}
33
- `;function ae(){if(typeof document>"u"||document.getElementById($))return;let e=document.createElement("style");e.id=$,e.textContent=ne,document.head.appendChild(e);}var ie='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function M(){let e=document.createElement("div");return e.className="tr-logo",e.innerHTML=`${ie}<span class="tr-word">Taprail</span>`,e}function O(e=false){let t=document.createElement("div");return t.className=e?"tr-ring tr-sm":"tr-ring",t}var oe='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';function ce(e,t={}){let{id:n}=D(e);return V()?(window.location.href=N(n),z(n,t,"app")):z(n,t,"iframe")}function z(e,t,n){return new Promise(i=>{let f=false,b=false,h,x=0,g=null,E=false,I=document.activeElement,j=document.body.style.overflow;ae();let{palette:l,mode:H,radius:G,font:U}=te(t.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let c=document.createElement("div");c.setAttribute("data-taprail","overlay"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-label","Pay with Taprail");let T={"--tr-surface":l.surface,"--tr-text":l.text,"--tr-text-rgb":re(l.text),"--tr-muted":l.muted,"--tr-accent":l.accent,"--tr-accent-text":l.accentText,"--tr-backdrop":l.backdrop,"--tr-radius":`${G}px`,"--tr-font":U};for(let r in T)c.style.setProperty(r,T[r]);let p=document.createElement("div");p.setAttribute("data-taprail","frame");let v;if(n==="iframe"){p.classList.add("tr-iframe");let r=document.createElement("div");r.setAttribute("data-taprail","loader");let a=document.createElement("div");a.className="tr-cap",a.textContent="Loading secure checkout\u2026",r.append(M(),O(),a);let s=document.createElement("iframe"),o=new URL(`${d.embedBase}/pay`);o.searchParams.set("o",e),o.searchParams.set("theme",H),o.searchParams.set("accent",l.accent),s.src=o.toString(),s.allow="clipboard-write",s.addEventListener("load",()=>r.remove()),p.appendChild(r),v=s;}else {let r=document.createElement("div");r.setAttribute("data-taprail","card");let a=document.createElement("div"),s=document.createElement("div");s.className="tr-title",s.textContent="Continue in the Taprail app",a.appendChild(s),g=a;let o=document.createElement("div");o.className="tr-sub",o.textContent="Approve this payment in the Taprail app, then come back here.";let u=document.createElement("a");u.className="tr-btn",u.href=N(e),u.textContent="Open Taprail";let C=document.createElement("div");C.className="tr-wait";let B=document.createElement("span");B.textContent="Waiting for approval",C.append(O(true),B),r.append(M(),a,o,u,C),v=r;}let m=document.createElement("button");m.setAttribute("data-taprail","close"),m.setAttribute("aria-label","Close"),m.innerHTML=oe;function K(){clearTimeout(h),window.removeEventListener("message",L),document.removeEventListener("keydown",A),document.removeEventListener("visibilitychange",S),window.removeEventListener("focus",_),c.remove(),document.body.style.overflow=j,I?.focus?.();}function q(r,a,s){if(!g||E||r==null)return;E=true,g.textContent="";let o=document.createElement("div");if(o.className="tr-amount",o.textContent=Y(r,a),g.appendChild(o),s){let u=document.createElement("div");u.className="tr-merchant",u.textContent=s,g.appendChild(u);}}function y(r){f||(f=true,K(),r.status==="approved"?t.onSuccess?.(r):r.status==="closed"&&t.onClose?.(),i(r),t.redirect&&r.status!=="closed"&&W(r));}function L(r){if(r.origin!==d.embedBase)return;let a=r.data;!a||a.source!=="taprail-checkout"||a.status&&P.has(a.status)&&y({status:a.status,order_id:a.order_id||e,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null});}function A(r){r.key==="Escape"&&k();}function k(){y({status:"closed",order_id:e,transaction_reference:null,return_url:null});}async function w(){if(!(f||b)){b=true;try{let r=await F(e);if(x=0,n==="app"&&q(r.amount_kobo,r.currency,r.merchant_name),r._ok&&P.has(r.status)){y({status:r.status,order_id:r.order_id,transaction_reference:r.transaction_reference,return_url:r.return_url});return}}catch(r){x+=1,x===4&&t.onError?.(r instanceof Error?r:new Error(String(r)));}finally{b=false;}f||(h=setTimeout(w,n==="app"?1200:2e3));}}function _(){f||(clearTimeout(h),w());}function S(){document.visibilityState==="visible"&&_();}m.addEventListener("click",k),c.addEventListener("click",r=>{r.target===c&&k();}),document.addEventListener("keydown",A),window.addEventListener("message",L),document.addEventListener("visibilitychange",S),window.addEventListener("focus",_),p.appendChild(v),p.appendChild(m),c.appendChild(p),document.body.appendChild(c),document.body.style.overflow="hidden",m.focus(),h=setTimeout(w,n==="app"?450:800);})}async function de(e){let{id:t}=D(e),n=await F(t);return {status:n.status,order_id:n.order_id,transaction_reference:n.transaction_reference,return_url:n.return_url}}exports.getStatus=de;exports.init=se;exports.open=ce;
56
+ `;function _t(){if(typeof document>"u"||document.getElementById(J))return;let r=document.createElement("style");r.id=J,r.textContent=Ct,document.head.appendChild(r);}var Tt='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function T(r=false){let e=document.createElement("div");return e.className="tr-logo",r&&(e.style.justifyContent="flex-start"),e.innerHTML=`${Tt}<span class="tr-word">Taprail</span>`,e}function L(r=false){let e=document.createElement("div");return e.className=r?"tr-ring tr-sm":"tr-ring",e}var Lt='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',Nt='<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5.25" y="5.25" width="8.5" height="8.5" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M10.75 5.25V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4.75a2 2 0 0 0 2 2h1.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',At='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12.5l4.2 4.2L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';function Pt(r,e={}){let{id:a}=tt(r);return ft()?(window.location.href=X(a),Q(a,e,"app")):Q(a,e,"email")}function Q(r,e,a){return new Promise(d=>{let p=false,N=false,y,j=2e3,w=false,A=0,E=a==="app"?"app":"taprail",f={},et=document.activeElement,rt=document.body.style.overflow;_t();let{palette:b,radius:nt,font:at}=wt(e.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let g=document.createElement("div");g.setAttribute("data-taprail","overlay"),g.setAttribute("role","dialog"),g.setAttribute("aria-modal","true"),g.setAttribute("aria-label","Pay with Taprail");let F={"--tr-surface":b.surface,"--tr-text":b.text,"--tr-text-rgb":Et(b.text),"--tr-muted":b.muted,"--tr-accent":b.accent,"--tr-accent-text":b.accentText,"--tr-backdrop":b.backdrop,"--tr-radius":`${nt}px`,"--tr-font":at};for(let t in F)g.style.setProperty(t,F[t]);let S=document.createElement("div");S.setAttribute("data-taprail","frame");let x=document.createElement("button");x.setAttribute("data-taprail","close"),x.setAttribute("aria-label","Close"),x.innerHTML=Lt;let P=document.createElement("div");function C(t){P.replaceChildren(t);}function ot(){clearTimeout(y),document.removeEventListener("keydown",I),document.removeEventListener("visibilitychange",U),window.removeEventListener("focus",O),g.remove(),document.body.style.overflow=rt,et?.focus?.();}function k(t){p||(p=true,ot(),d(t),e.redirect&&t.status!=="closed"&&xt(t));}function M(){p||(e.onClose?.(),k({status:"closed",order_id:r,transaction_reference:null,return_url:null}));}function I(t){t.key==="Escape"&&M();}function G(t){if(p)return;W();let o={status:t.status,order_id:t.order_id,transaction_reference:t.transaction_reference,return_url:t.return_url,rail:E};t.status==="approved"?(e.onSuccess?.(o),pt(o)):k(o);}function R(t){w=true,j=t,clearTimeout(y),y=setTimeout(z,400);}function W(){w=false,clearTimeout(y);}async function z(){if(!(p||N||!w)){N=true;try{let t=await H(r);if(A=0,t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}}catch(t){A+=1,A===4&&e.onError?.(t instanceof Error?t:new Error(String(t)));}finally{N=false;}!p&&w&&(y=setTimeout(z,j));}}function O(){p||!w||(clearTimeout(y),z());}function U(){document.visibilityState==="visible"&&O();}function $(){let t=document.createElement("div");if(t.className="tr-sum",f.amount_kobo!=null){let o=document.createElement("div");if(o.className="tr-amount",o.textContent=D(f.amount_kobo,f.currency),t.appendChild(o),f.merchant_name){let s=document.createElement("div");s.className="tr-merchant",s.textContent=f.merchant_name,t.appendChild(s);}}else {let o=document.createElement("div");o.className="tr-title",o.textContent="Complete your payment",t.appendChild(o);}return t}function it(){P.querySelectorAll(".tr-sum").forEach(t=>t.replaceWith($()));}function K(){let t=document.createElement("div");t.setAttribute("data-taprail","card"),t.classList.add("tr-left");let o=document.createElement("div");o.className="tr-sub",o.textContent="Enter your email to pay with Taprail, or by bank transfer.";let s=document.createElement("div");s.className="tr-field";let c=document.createElement("label");c.className="tr-label",c.textContent="Email",c.htmlFor="tr-email";let n=document.createElement("input");n.className="tr-input",n.id="tr-email",n.type="email",n.inputMode="email",n.autocomplete="email",n.placeholder="you@example.com",n.value=e.email??"";let l=document.createElement("div");l.className="tr-err",s.append(c,n,l);let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Continue",i.appendChild(u);function m(h){l.textContent=h,l.classList.add("tr-on"),n.classList.add("tr-bad");}function V(){l.classList.remove("tr-on"),n.classList.remove("tr-bad");}async function q(){let h=n.value.trim();if(!h||!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(h)){m("Enter a valid email address."),n.focus();return}V(),i.setAttribute("disabled","true"),u.textContent="Checking",i.prepend(L(true));try{let _=await bt(r,h);_.method==="taprail"?(E="taprail",st()):(E="transfer",ct(_.account));}catch(_){i.querySelector(".tr-ring")?.remove(),i.removeAttribute("disabled"),u.textContent="Continue",m(_ instanceof Error?_.message:"Something went wrong. Try again.");}}n.addEventListener("input",V),n.addEventListener("keydown",h=>{h.key==="Enter"&&q();}),i.addEventListener("click",q),t.append(T(true),$(),o,s,i),C(t),setTimeout(()=>n.focus(),30);}function st(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Confirm in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="We sent a confirmation to your Taprail app. Approve it there to finish.";let c=document.createElement("div");c.className="tr-wait";let n=document.createElement("span");n.textContent="Waiting for approval",c.append(L(true),n);let l=document.createElement("button");l.className="tr-ghost",l.type="button",l.textContent="Use a different email",l.addEventListener("click",()=>{W(),E="taprail",K();}),t.append(T(),o,s,c,l),C(t),R(1800);}function ct(t){let o=document.createElement("div");o.setAttribute("data-taprail","card"),o.classList.add("tr-left");let s=document.createElement("div");s.className="tr-title",s.textContent="Pay by bank transfer";let c=document.createElement("div");c.className="tr-sub";let n=t.amount_kobo!=null?D(t.amount_kobo,f.currency):"the exact amount";c.textContent=`Send ${n} to the account below. We'll confirm automatically.`;let l=document.createElement("div");l.className="tr-acct",l.append(B("Bank",t.bank||"\u2014"),lt("Account number",t.account_number||"\u2014"),B("Account name",t.account_name||"Taprail")),t.amount_kobo!=null&&l.append(B("Amount",D(t.amount_kobo,f.currency)));let i=document.createElement("div");i.className="tr-wait";let u=document.createElement("span");if(u.textContent="Waiting for your transfer",i.append(L(true),u),o.append(T(true),s,c,l),t.expires_at){let m=document.createElement("div");m.className="tr-expiry",o.appendChild(m),dt(m,t.expires_at);}o.appendChild(i),C(o),R(1500);}function B(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");return n.className="tr-rv",n.textContent=o,s.append(c,n),s}function lt(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");n.style.display="inline-flex",n.style.alignItems="center",n.style.gap="10px";let l=document.createElement("span");l.className="tr-rv tr-mono",l.textContent=o;let i=document.createElement("button");return i.className="tr-copy",i.type="button",i.innerHTML=`${Nt}<span>Copy</span>`,i.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(o.replace(/\s/g,""));let u=i.querySelector("span");u&&(u.textContent="Copied",setTimeout(()=>u.textContent="Copy",1400));}catch{}}),n.append(l,i),s.append(c,n),s}function dt(t,o){let s=new Date(o).getTime();if(Number.isNaN(s))return;let c=()=>{if(p)return;let n=Math.max(0,Math.floor((s-Date.now())/1e3)),l=Math.floor(n/60),i=n%60;t.textContent=n>0?`Account expires in ${l}:${i.toString().padStart(2,"0")}`:"This account has expired.",n>0&&!p&&setTimeout(c,1e3);};c();}function ut(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Continue in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="Approve this payment in the Taprail app, then come back here.";let c=document.createElement("a");c.className="tr-btn tr-mt",c.href=X(r);let n=document.createElement("span");n.textContent="Open Taprail",c.appendChild(n);let l=document.createElement("div");l.className="tr-wait";let i=document.createElement("span");i.textContent="Waiting for approval",l.append(L(true),i),t.append(T(),$(),s,c,l),C(t),R(1200);}function pt(t){let o=document.createElement("div");o.setAttribute("data-taprail","card");let s=document.createElement("div");s.className="tr-check",s.innerHTML=At;let c=document.createElement("div");c.className="tr-title",c.textContent="Payment complete";let n=document.createElement("div");n.className="tr-sub",o.append(s,c,n);let l=E==="transfer"&&e.appNudge!==false;if(l){n.textContent="Next time, pay with a single tap. Get the Taprail app.";let i=document.createElement("a");i.className="tr-btn tr-mt",i.href=mt,i.target="_blank",i.rel="noopener";let u=document.createElement("span");u.textContent="Get the Taprail app",i.appendChild(u);let m=document.createElement("button");m.className="tr-ghost",m.type="button",m.textContent="Done",m.addEventListener("click",()=>k(t)),o.append(i,m);}else {n.textContent=f.merchant_name?`Your payment to ${f.merchant_name} is confirmed.`:"Your payment is confirmed.";let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Done",i.appendChild(u),i.addEventListener("click",()=>k(t)),o.append(i);}x.onclick=()=>k(t),setTimeout(()=>k(t),l?12e3:6e3),C(o);}x.addEventListener("click",M),g.addEventListener("click",t=>{t.target===g&&M();}),document.addEventListener("keydown",I),document.addEventListener("visibilitychange",U),window.addEventListener("focus",O),S.append(P,x),g.appendChild(S),document.body.appendChild(g),document.body.style.overflow="hidden",H(r).then(t=>{if(!p){if(t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}it();}}).catch(()=>{}),a==="app"?ut():K(),x.focus();})}async function Mt(r){let{id:e}=tt(r),a=await H(e);return {status:a.status,order_id:a.order_id,transaction_reference:a.transaction_reference,return_url:a.return_url}}exports.getStatus=Mt;exports.init=St;exports.open=Pt;
package/dist/index.d.cts CHANGED
@@ -3,9 +3,13 @@
3
3
  *
4
4
  * The SDK never sees card details or your API key. Your server creates the
5
5
  * order with your secret key, then hands the SDK the resulting intent (or its
6
- * order id / deep link). On desktop it opens a QR modal; on mobile it opens
7
- * the Taprail app directly (no intermediate page) and shows a small waiting
8
- * overlay. Either way the promise resolves with the terminal result.
6
+ * order id / deep link).
7
+ *
8
+ * Desktop is email-first: the shopper types their email and we pick the rail.
9
+ * If they already have a Taprail account they approve a push in the app; if
10
+ * not, they get a one-time bank transfer (Paystack "Pay with Transfer") and we
11
+ * confirm it automatically. On a phone we open the Taprail app directly and
12
+ * wait. Either way the promise resolves with the terminal result.
9
13
  *
10
14
  * The modal chrome is themeable — set a default with `init({ theme })` or
11
15
  * per checkout with `open(intent, { theme })`.
@@ -14,7 +18,7 @@
14
18
  interface TaprailTheme {
15
19
  /** "auto" (default — follows the OS color scheme), "dark", or "light". */
16
20
  mode?: "dark" | "light" | "auto";
17
- /** Primary action color — the mobile "Open Taprail" button + focus rings. */
21
+ /** Primary action color — the buttons + focus rings. */
18
22
  accent?: string;
19
23
  /** Text color on the accent button. */
20
24
  accentText?: string;
@@ -34,7 +38,7 @@ interface TaprailTheme {
34
38
  interface TaprailConfig {
35
39
  /** API origin. Defaults to https://api.taprail.app */
36
40
  apiBase?: string;
37
- /** Where the embed page lives. Defaults to https://pay.taprail.app */
41
+ /** Where the embed/deep-link page lives. Defaults to https://pay.taprail.app */
38
42
  embedBase?: string;
39
43
  /** Default theme for every checkout; override per call in `open()`. */
40
44
  theme?: TaprailTheme;
@@ -46,6 +50,8 @@ interface CheckoutResult {
46
50
  transaction_reference: string | null;
47
51
  /** The merchant's dashboard-configured browser return URL, when set. */
48
52
  return_url: string | null;
53
+ /** Which rail settled it: "app" | "taprail" | "transfer" (absent if closed). */
54
+ rail?: "app" | "taprail" | "transfer";
49
55
  }
50
56
  interface OpenOptions {
51
57
  onSuccess?: (result: CheckoutResult) => void;
@@ -60,6 +66,14 @@ interface OpenOptions {
60
66
  redirect?: boolean;
61
67
  /** Theme for this checkout, merged over any theme set via `init()`. */
62
68
  theme?: TaprailTheme;
69
+ /** Pre-fill the desktop email field (e.g. a logged-in shopper's email). */
70
+ email?: string;
71
+ /**
72
+ * Show the "get the Taprail app" nudge after a shopper pays by transfer
73
+ * (they don't have the app yet). Defaults to true. No nudge for shoppers who
74
+ * already paid through the app.
75
+ */
76
+ appNudge?: boolean;
63
77
  }
64
78
  /**
65
79
  * What `Taprail.open` accepts:
@@ -77,10 +91,10 @@ declare function init(cfg: TaprailConfig): void;
77
91
  /**
78
92
  * Open the checkout and resolve with the terminal result.
79
93
  *
80
- * Desktop: QR modal (embed iframe). Mobile: opens the Taprail app directly —
81
- * no intermediate web page — and shows a small waiting overlay on the
82
- * merchant page; when the shopper approves in the app and switches back, the
83
- * promise has resolved and the merchant UI can route to its receipt.
94
+ * Mobile: opens the Taprail app directly (no intermediate page) and shows a
95
+ * waiting card. Desktop: an email-first modal — the shopper types their email,
96
+ * then either approves in the Taprail app (push) or pays by one-time bank
97
+ * transfer, and we confirm automatically.
84
98
  */
85
99
  declare function open(intent: Intent, opts?: OpenOptions): Promise<CheckoutResult>;
86
100
  /** Imperative poll helper, if you want to track status without the modal. */
package/dist/index.d.ts CHANGED
@@ -3,9 +3,13 @@
3
3
  *
4
4
  * The SDK never sees card details or your API key. Your server creates the
5
5
  * order with your secret key, then hands the SDK the resulting intent (or its
6
- * order id / deep link). On desktop it opens a QR modal; on mobile it opens
7
- * the Taprail app directly (no intermediate page) and shows a small waiting
8
- * overlay. Either way the promise resolves with the terminal result.
6
+ * order id / deep link).
7
+ *
8
+ * Desktop is email-first: the shopper types their email and we pick the rail.
9
+ * If they already have a Taprail account they approve a push in the app; if
10
+ * not, they get a one-time bank transfer (Paystack "Pay with Transfer") and we
11
+ * confirm it automatically. On a phone we open the Taprail app directly and
12
+ * wait. Either way the promise resolves with the terminal result.
9
13
  *
10
14
  * The modal chrome is themeable — set a default with `init({ theme })` or
11
15
  * per checkout with `open(intent, { theme })`.
@@ -14,7 +18,7 @@
14
18
  interface TaprailTheme {
15
19
  /** "auto" (default — follows the OS color scheme), "dark", or "light". */
16
20
  mode?: "dark" | "light" | "auto";
17
- /** Primary action color — the mobile "Open Taprail" button + focus rings. */
21
+ /** Primary action color — the buttons + focus rings. */
18
22
  accent?: string;
19
23
  /** Text color on the accent button. */
20
24
  accentText?: string;
@@ -34,7 +38,7 @@ interface TaprailTheme {
34
38
  interface TaprailConfig {
35
39
  /** API origin. Defaults to https://api.taprail.app */
36
40
  apiBase?: string;
37
- /** Where the embed page lives. Defaults to https://pay.taprail.app */
41
+ /** Where the embed/deep-link page lives. Defaults to https://pay.taprail.app */
38
42
  embedBase?: string;
39
43
  /** Default theme for every checkout; override per call in `open()`. */
40
44
  theme?: TaprailTheme;
@@ -46,6 +50,8 @@ interface CheckoutResult {
46
50
  transaction_reference: string | null;
47
51
  /** The merchant's dashboard-configured browser return URL, when set. */
48
52
  return_url: string | null;
53
+ /** Which rail settled it: "app" | "taprail" | "transfer" (absent if closed). */
54
+ rail?: "app" | "taprail" | "transfer";
49
55
  }
50
56
  interface OpenOptions {
51
57
  onSuccess?: (result: CheckoutResult) => void;
@@ -60,6 +66,14 @@ interface OpenOptions {
60
66
  redirect?: boolean;
61
67
  /** Theme for this checkout, merged over any theme set via `init()`. */
62
68
  theme?: TaprailTheme;
69
+ /** Pre-fill the desktop email field (e.g. a logged-in shopper's email). */
70
+ email?: string;
71
+ /**
72
+ * Show the "get the Taprail app" nudge after a shopper pays by transfer
73
+ * (they don't have the app yet). Defaults to true. No nudge for shoppers who
74
+ * already paid through the app.
75
+ */
76
+ appNudge?: boolean;
63
77
  }
64
78
  /**
65
79
  * What `Taprail.open` accepts:
@@ -77,10 +91,10 @@ declare function init(cfg: TaprailConfig): void;
77
91
  /**
78
92
  * Open the checkout and resolve with the terminal result.
79
93
  *
80
- * Desktop: QR modal (embed iframe). Mobile: opens the Taprail app directly —
81
- * no intermediate web page — and shows a small waiting overlay on the
82
- * merchant page; when the shopper approves in the app and switches back, the
83
- * promise has resolved and the merchant UI can route to its receipt.
94
+ * Mobile: opens the Taprail app directly (no intermediate page) and shows a
95
+ * waiting card. Desktop: an email-first modal — the shopper types their email,
96
+ * then either approves in the Taprail app (push) or pays by one-time bank
97
+ * transfer, and we confirm automatically.
84
98
  */
85
99
  declare function open(intent: Intent, opts?: OpenOptions): Promise<CheckoutResult>;
86
100
  /** Imperative poll helper, if you want to track status without the modal. */
package/dist/index.global.js CHANGED
@@ -1,25 +1,48 @@
1
- var Taprail=(function(exports){'use strict';var P=new Set(["approved","declined","expired","cancelled","refunded"]),d={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}};function se(e){e.apiBase&&(d.apiBase=e.apiBase.replace(/\/$/,"")),e.embedBase&&(d.embedBase=e.embedBase.replace(/\/$/,"")),e.theme&&(d.theme={...d.theme,...e.theme});}function V(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var Z="com.taprail.consumer";function N(e){let t=encodeURIComponent(e);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${t}#Intent;scheme=taprail;package=${Z};end`:`taprail://pay?o=${t}`}function R(e){try{return new URL(e).searchParams.get("o")}catch{return null}}function D(e){if(typeof e=="string"){if(/^https?:\/\//.test(e)){let i=R(e);if(!i)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:i,deepLink:e}}return {id:e,deepLink:`${d.embedBase}/pay?o=${e}`}}let t=e.id||e.order_id||R(e.deep_link||"")||"";if(!t)throw new Error("Taprail: could not determine the order id from the intent");let n=e.deep_link||e.qr_payload||`${d.embedBase}/pay?o=${t}`;return {id:t,deepLink:n}}async function F(e){let t=await fetch(`${d.apiBase}/v1/checkout/orders/${e}`,{cache:"no-store"});if(!t.ok)return {_ok:false,status:"unknown",order_id:e,transaction_reference:null,return_url:null};let n=await t.json();return {_ok:true,status:n.status,order_id:n.id??e,transaction_reference:n.transaction_reference??null,return_url:n.return_url??null,merchant_name:n.merchant_name??void 0,amount_kobo:typeof n.amount_kobo=="number"?n.amount_kobo:void 0,currency:n.currency??void 0}}function Y(e,t){let n=e/100;return !t||t==="NGN"?"\u20A6"+n.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${t} ${n.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function W(e){if(e.return_url)try{let t=new URL(e.return_url);t.searchParams.set("order",e.order_id),t.searchParams.set("status",e.status),window.location.href=t.toString();}catch{}}var J='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',Q={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},X={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function ee(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function te(e){let t={...d.theme,...e},n=t.mode==="light"?"light":t.mode==="dark"||ee()?"dark":"light",i=n==="light"?X:Q;return {palette:{surface:t.surface??i.surface,text:t.text??i.text,muted:t.muted??i.muted,accent:t.accent??i.accent,accentText:t.accentText??i.accentText,backdrop:t.backdrop??i.backdrop},mode:n,radius:typeof t.radius=="number"?t.radius:20,font:t.fontFamily??J}}function re(e){let t=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!t)return "127,127,127";let n=t[1];n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let i=parseInt(n,16);return `${i>>16&255},${i>>8&255},${i&255}`}var $="taprail-checkout-css",ne=`
1
+ var Taprail=(function(exports){'use strict';var Y=new Set(["approved","declined","expired","cancelled","refunded"]),v={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}},mt="https://taprail.app";function St(r){r.apiBase&&(v.apiBase=r.apiBase.replace(/\/$/,"")),r.embedBase&&(v.embedBase=r.embedBase.replace(/\/$/,"")),r.theme&&(v.theme={...v.theme,...r.theme});}function ft(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var gt="com.taprail.consumer";function X(r){let e=encodeURIComponent(r);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${e}#Intent;scheme=taprail;package=${gt};end`:`taprail://pay?o=${e}`}function Z(r){try{return new URL(r).searchParams.get("o")}catch{return null}}function tt(r){if(typeof r=="string"){if(/^https?:\/\//.test(r)){let a=Z(r);if(!a)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:a}}return {id:r}}let e=r.id||r.order_id||Z(r.deep_link||"")||"";if(!e)throw new Error("Taprail: could not determine the order id from the intent");return {id:e}}async function H(r){let e=await fetch(`${v.apiBase}/v1/checkout/orders/${r}`,{cache:"no-store"});if(!e.ok)return {_ok:false,status:"unknown",order_id:r,transaction_reference:null,return_url:null};let a=await e.json();return {_ok:true,status:a.status,order_id:a.id??r,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null,merchant_name:a.merchant_name??void 0,amount_kobo:typeof a.amount_kobo=="number"?a.amount_kobo:void 0,currency:a.currency??void 0}}async function bt(r,e){let a=await fetch(`${v.apiBase}/v1/checkout/orders/${r}/identify`,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({email:e}),cache:"no-store"}),d=null;try{d=await a.json();}catch{}if(!a.ok){let p=d&&(d.message||d.error)||"We couldn't continue. Please try again.";throw new Error(p)}return d}function D(r,e){let a=r/100;return !e||e==="NGN"?"\u20A6"+a.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${e} ${a.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function xt(r){if(r.return_url)try{let e=new URL(r.return_url);e.searchParams.set("order",r.order_id),e.searchParams.set("status",r.status),window.location.href=e.toString();}catch{}}var ht='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',vt={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},yt={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function kt(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function wt(r){let e={...v.theme,...r},a=e.mode==="light"?"light":e.mode==="dark"||kt()?"dark":"light",d=a==="light"?yt:vt;return {palette:{surface:e.surface??d.surface,text:e.text??d.text,muted:e.muted??d.muted,accent:e.accent??d.accent,accentText:e.accentText??d.accentText,backdrop:e.backdrop??d.backdrop},mode:a,radius:typeof e.radius=="number"?e.radius:20,font:e.fontFamily??ht}}function Et(r){let e=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(r.trim());if(!e)return "127,127,127";let a=e[1];a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]);let d=parseInt(a,16);return `${d>>16&255},${d>>8&255},${d&255}`}var J="taprail-checkout-css",Ct=`
2
2
  [data-taprail="overlay"]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:var(--tr-backdrop);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);font-family:var(--tr-font);animation:tr-fade .12s ease both;}
3
3
  [data-taprail="frame"]{position:relative;width:min(420px,92vw);background:var(--tr-surface);border-radius:var(--tr-radius);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.08),0 24px 70px -20px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.5);animation:tr-pop .19s cubic-bezier(.2,.9,.25,1) both;}
4
- [data-taprail="frame"].tr-iframe{height:min(620px,90vh);}
5
- [data-taprail="frame"] iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;background:transparent;}
6
- [data-taprail="loader"]{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--tr-text);}
4
+ [data-taprail="card"]{padding:34px 30px 30px;text-align:center;color:var(--tr-text);}
5
+ [data-taprail="card"].tr-left{text-align:left;}
6
+ [data-taprail="card"] .tr-logo{margin:0 auto 20px;}
7
+ [data-taprail="card"].tr-left .tr-logo{margin:0 0 20px;}
7
8
  .tr-logo{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tr-text);}
8
9
  .tr-logo svg{display:block;flex:none;}
9
10
  .tr-word{font-size:16px;font-weight:650;letter-spacing:-.02em;}
10
11
  .tr-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(var(--tr-text-rgb),.16);border-top-color:var(--tr-text);animation:tr-spin .7s linear infinite;}
11
12
  .tr-ring.tr-sm{width:15px;height:15px;border-width:2px;}
12
- [data-taprail="card"]{padding:38px 30px 30px;text-align:center;color:var(--tr-text);}
13
- [data-taprail="card"] .tr-logo{margin:0 auto 22px;}
14
13
  .tr-amount{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;}
15
14
  .tr-merchant{font-size:13px;color:var(--tr-muted);margin-top:3px;}
16
15
  .tr-title{font-size:17px;font-weight:650;letter-spacing:-.01em;}
17
- .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 22px;max-width:30ch;}
18
- .tr-btn{display:block;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
16
+ .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 0;max-width:32ch;}
17
+ [data-taprail="card"].tr-left .tr-sub{margin-left:0;margin-right:0;}
18
+ .tr-field{margin-top:22px;text-align:left;}
19
+ .tr-label{display:block;font-size:12.5px;font-weight:600;color:var(--tr-muted);margin:0 0 7px 2px;}
20
+ .tr-input{width:100%;box-sizing:border-box;background:rgba(var(--tr-text-rgb),.045);color:var(--tr-text);border:1px solid rgba(var(--tr-text-rgb),.16);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;outline:none;transition:border-color .12s ease,box-shadow .12s ease;}
21
+ .tr-input::placeholder{color:var(--tr-muted);opacity:.8;}
22
+ .tr-input:focus{border-color:var(--tr-accent);box-shadow:0 0 0 3px rgba(var(--tr-text-rgb),.10);}
23
+ .tr-input.tr-bad{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.16);}
24
+ .tr-err{display:none;font-size:12.5px;color:#e5675b;margin:8px 2px 0;text-align:left;}
25
+ .tr-err.tr-on{display:block;}
26
+ .tr-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
19
27
  .tr-btn:hover{filter:brightness(1.06);}
20
28
  .tr-btn:active{transform:scale(.975);}
21
- .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:20px;}
29
+ .tr-btn[disabled]{opacity:.6;cursor:default;pointer-events:none;}
30
+ .tr-btn.tr-mt{margin-top:18px;}
31
+ .tr-ghost{display:inline-block;width:100%;box-sizing:border-box;background:transparent;color:var(--tr-muted);border:0;border-radius:999px;padding:12px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:center;text-decoration:none;transition:color .12s ease;}
32
+ .tr-ghost:hover{color:var(--tr-text);}
33
+ .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:22px;}
22
34
  .tr-cap{font-size:12.5px;color:var(--tr-muted);}
35
+ .tr-acct{margin-top:22px;border:1px solid rgba(var(--tr-text-rgb),.14);border-radius:14px;overflow:hidden;}
36
+ .tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid rgba(var(--tr-text-rgb),.10);}
37
+ .tr-row:first-child{border-top:0;}
38
+ .tr-rk{font-size:12.5px;color:var(--tr-muted);}
39
+ .tr-rv{font-size:14.5px;font-weight:600;color:var(--tr-text);text-align:right;}
40
+ .tr-rv.tr-mono{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:16px;}
41
+ .tr-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(var(--tr-text-rgb),.07);color:var(--tr-text);border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s ease;}
42
+ .tr-copy:hover{background:rgba(var(--tr-text-rgb),.12);}
43
+ .tr-copy svg{display:block;}
44
+ .tr-expiry{font-size:12px;color:var(--tr-muted);margin-top:12px;text-align:center;}
45
+ .tr-check{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(46,160,90,.14);color:#2ea05a;}
23
46
  [data-taprail="close"]{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tr-surface);color:var(--tr-text);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.14),0 2px 10px -2px rgba(0,0,0,.4);transition:transform .12s ease,box-shadow .12s ease;}
24
47
  [data-taprail="close"] svg{display:block;opacity:.7;transition:opacity .12s ease;}
25
48
  [data-taprail="close"]:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.24),0 4px 14px -3px rgba(0,0,0,.5);}
@@ -30,4 +53,4 @@ var Taprail=(function(exports){'use strict';var P=new Set(["approved","declined"
30
53
  @keyframes tr-pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
31
54
  @keyframes tr-spin{to{transform:rotate(360deg)}}
32
55
  @media (prefers-reduced-motion:reduce){[data-taprail="overlay"],[data-taprail="frame"]{animation:none}.tr-ring{animation-duration:1.4s}.tr-btn,[data-taprail="close"]{transition:none}}
33
- `;function ae(){if(typeof document>"u"||document.getElementById($))return;let e=document.createElement("style");e.id=$,e.textContent=ne,document.head.appendChild(e);}var ie='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function M(){let e=document.createElement("div");return e.className="tr-logo",e.innerHTML=`${ie}<span class="tr-word">Taprail</span>`,e}function O(e=false){let t=document.createElement("div");return t.className=e?"tr-ring tr-sm":"tr-ring",t}var oe='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';function ce(e,t={}){let{id:n}=D(e);return V()?(window.location.href=N(n),z(n,t,"app")):z(n,t,"iframe")}function z(e,t,n){return new Promise(i=>{let f=false,b=false,h,x=0,g=null,E=false,I=document.activeElement,j=document.body.style.overflow;ae();let{palette:l,mode:H,radius:G,font:U}=te(t.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let c=document.createElement("div");c.setAttribute("data-taprail","overlay"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-label","Pay with Taprail");let T={"--tr-surface":l.surface,"--tr-text":l.text,"--tr-text-rgb":re(l.text),"--tr-muted":l.muted,"--tr-accent":l.accent,"--tr-accent-text":l.accentText,"--tr-backdrop":l.backdrop,"--tr-radius":`${G}px`,"--tr-font":U};for(let r in T)c.style.setProperty(r,T[r]);let p=document.createElement("div");p.setAttribute("data-taprail","frame");let v;if(n==="iframe"){p.classList.add("tr-iframe");let r=document.createElement("div");r.setAttribute("data-taprail","loader");let a=document.createElement("div");a.className="tr-cap",a.textContent="Loading secure checkout\u2026",r.append(M(),O(),a);let s=document.createElement("iframe"),o=new URL(`${d.embedBase}/pay`);o.searchParams.set("o",e),o.searchParams.set("theme",H),o.searchParams.set("accent",l.accent),s.src=o.toString(),s.allow="clipboard-write",s.addEventListener("load",()=>r.remove()),p.appendChild(r),v=s;}else {let r=document.createElement("div");r.setAttribute("data-taprail","card");let a=document.createElement("div"),s=document.createElement("div");s.className="tr-title",s.textContent="Continue in the Taprail app",a.appendChild(s),g=a;let o=document.createElement("div");o.className="tr-sub",o.textContent="Approve this payment in the Taprail app, then come back here.";let u=document.createElement("a");u.className="tr-btn",u.href=N(e),u.textContent="Open Taprail";let C=document.createElement("div");C.className="tr-wait";let B=document.createElement("span");B.textContent="Waiting for approval",C.append(O(true),B),r.append(M(),a,o,u,C),v=r;}let m=document.createElement("button");m.setAttribute("data-taprail","close"),m.setAttribute("aria-label","Close"),m.innerHTML=oe;function K(){clearTimeout(h),window.removeEventListener("message",L),document.removeEventListener("keydown",A),document.removeEventListener("visibilitychange",S),window.removeEventListener("focus",_),c.remove(),document.body.style.overflow=j,I?.focus?.();}function q(r,a,s){if(!g||E||r==null)return;E=true,g.textContent="";let o=document.createElement("div");if(o.className="tr-amount",o.textContent=Y(r,a),g.appendChild(o),s){let u=document.createElement("div");u.className="tr-merchant",u.textContent=s,g.appendChild(u);}}function y(r){f||(f=true,K(),r.status==="approved"?t.onSuccess?.(r):r.status==="closed"&&t.onClose?.(),i(r),t.redirect&&r.status!=="closed"&&W(r));}function L(r){if(r.origin!==d.embedBase)return;let a=r.data;!a||a.source!=="taprail-checkout"||a.status&&P.has(a.status)&&y({status:a.status,order_id:a.order_id||e,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null});}function A(r){r.key==="Escape"&&k();}function k(){y({status:"closed",order_id:e,transaction_reference:null,return_url:null});}async function w(){if(!(f||b)){b=true;try{let r=await F(e);if(x=0,n==="app"&&q(r.amount_kobo,r.currency,r.merchant_name),r._ok&&P.has(r.status)){y({status:r.status,order_id:r.order_id,transaction_reference:r.transaction_reference,return_url:r.return_url});return}}catch(r){x+=1,x===4&&t.onError?.(r instanceof Error?r:new Error(String(r)));}finally{b=false;}f||(h=setTimeout(w,n==="app"?1200:2e3));}}function _(){f||(clearTimeout(h),w());}function S(){document.visibilityState==="visible"&&_();}m.addEventListener("click",k),c.addEventListener("click",r=>{r.target===c&&k();}),document.addEventListener("keydown",A),window.addEventListener("message",L),document.addEventListener("visibilitychange",S),window.addEventListener("focus",_),p.appendChild(v),p.appendChild(m),c.appendChild(p),document.body.appendChild(c),document.body.style.overflow="hidden",m.focus(),h=setTimeout(w,n==="app"?450:800);})}async function de(e){let{id:t}=D(e),n=await F(t);return {status:n.status,order_id:n.order_id,transaction_reference:n.transaction_reference,return_url:n.return_url}}exports.getStatus=de;exports.init=se;exports.open=ce;return exports;})({});
56
+ `;function _t(){if(typeof document>"u"||document.getElementById(J))return;let r=document.createElement("style");r.id=J,r.textContent=Ct,document.head.appendChild(r);}var Tt='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function T(r=false){let e=document.createElement("div");return e.className="tr-logo",r&&(e.style.justifyContent="flex-start"),e.innerHTML=`${Tt}<span class="tr-word">Taprail</span>`,e}function L(r=false){let e=document.createElement("div");return e.className=r?"tr-ring tr-sm":"tr-ring",e}var Lt='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',Nt='<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5.25" y="5.25" width="8.5" height="8.5" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M10.75 5.25V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4.75a2 2 0 0 0 2 2h1.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',At='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12.5l4.2 4.2L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';function Pt(r,e={}){let{id:a}=tt(r);return ft()?(window.location.href=X(a),Q(a,e,"app")):Q(a,e,"email")}function Q(r,e,a){return new Promise(d=>{let p=false,N=false,y,j=2e3,w=false,A=0,E=a==="app"?"app":"taprail",f={},et=document.activeElement,rt=document.body.style.overflow;_t();let{palette:b,radius:nt,font:at}=wt(e.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let g=document.createElement("div");g.setAttribute("data-taprail","overlay"),g.setAttribute("role","dialog"),g.setAttribute("aria-modal","true"),g.setAttribute("aria-label","Pay with Taprail");let F={"--tr-surface":b.surface,"--tr-text":b.text,"--tr-text-rgb":Et(b.text),"--tr-muted":b.muted,"--tr-accent":b.accent,"--tr-accent-text":b.accentText,"--tr-backdrop":b.backdrop,"--tr-radius":`${nt}px`,"--tr-font":at};for(let t in F)g.style.setProperty(t,F[t]);let S=document.createElement("div");S.setAttribute("data-taprail","frame");let x=document.createElement("button");x.setAttribute("data-taprail","close"),x.setAttribute("aria-label","Close"),x.innerHTML=Lt;let P=document.createElement("div");function C(t){P.replaceChildren(t);}function ot(){clearTimeout(y),document.removeEventListener("keydown",I),document.removeEventListener("visibilitychange",U),window.removeEventListener("focus",O),g.remove(),document.body.style.overflow=rt,et?.focus?.();}function k(t){p||(p=true,ot(),d(t),e.redirect&&t.status!=="closed"&&xt(t));}function M(){p||(e.onClose?.(),k({status:"closed",order_id:r,transaction_reference:null,return_url:null}));}function I(t){t.key==="Escape"&&M();}function G(t){if(p)return;W();let o={status:t.status,order_id:t.order_id,transaction_reference:t.transaction_reference,return_url:t.return_url,rail:E};t.status==="approved"?(e.onSuccess?.(o),pt(o)):k(o);}function R(t){w=true,j=t,clearTimeout(y),y=setTimeout(z,400);}function W(){w=false,clearTimeout(y);}async function z(){if(!(p||N||!w)){N=true;try{let t=await H(r);if(A=0,t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}}catch(t){A+=1,A===4&&e.onError?.(t instanceof Error?t:new Error(String(t)));}finally{N=false;}!p&&w&&(y=setTimeout(z,j));}}function O(){p||!w||(clearTimeout(y),z());}function U(){document.visibilityState==="visible"&&O();}function $(){let t=document.createElement("div");if(t.className="tr-sum",f.amount_kobo!=null){let o=document.createElement("div");if(o.className="tr-amount",o.textContent=D(f.amount_kobo,f.currency),t.appendChild(o),f.merchant_name){let s=document.createElement("div");s.className="tr-merchant",s.textContent=f.merchant_name,t.appendChild(s);}}else {let o=document.createElement("div");o.className="tr-title",o.textContent="Complete your payment",t.appendChild(o);}return t}function it(){P.querySelectorAll(".tr-sum").forEach(t=>t.replaceWith($()));}function K(){let t=document.createElement("div");t.setAttribute("data-taprail","card"),t.classList.add("tr-left");let o=document.createElement("div");o.className="tr-sub",o.textContent="Enter your email to pay with Taprail, or by bank transfer.";let s=document.createElement("div");s.className="tr-field";let c=document.createElement("label");c.className="tr-label",c.textContent="Email",c.htmlFor="tr-email";let n=document.createElement("input");n.className="tr-input",n.id="tr-email",n.type="email",n.inputMode="email",n.autocomplete="email",n.placeholder="you@example.com",n.value=e.email??"";let l=document.createElement("div");l.className="tr-err",s.append(c,n,l);let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Continue",i.appendChild(u);function m(h){l.textContent=h,l.classList.add("tr-on"),n.classList.add("tr-bad");}function V(){l.classList.remove("tr-on"),n.classList.remove("tr-bad");}async function q(){let h=n.value.trim();if(!h||!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(h)){m("Enter a valid email address."),n.focus();return}V(),i.setAttribute("disabled","true"),u.textContent="Checking",i.prepend(L(true));try{let _=await bt(r,h);_.method==="taprail"?(E="taprail",st()):(E="transfer",ct(_.account));}catch(_){i.querySelector(".tr-ring")?.remove(),i.removeAttribute("disabled"),u.textContent="Continue",m(_ instanceof Error?_.message:"Something went wrong. Try again.");}}n.addEventListener("input",V),n.addEventListener("keydown",h=>{h.key==="Enter"&&q();}),i.addEventListener("click",q),t.append(T(true),$(),o,s,i),C(t),setTimeout(()=>n.focus(),30);}function st(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Confirm in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="We sent a confirmation to your Taprail app. Approve it there to finish.";let c=document.createElement("div");c.className="tr-wait";let n=document.createElement("span");n.textContent="Waiting for approval",c.append(L(true),n);let l=document.createElement("button");l.className="tr-ghost",l.type="button",l.textContent="Use a different email",l.addEventListener("click",()=>{W(),E="taprail",K();}),t.append(T(),o,s,c,l),C(t),R(1800);}function ct(t){let o=document.createElement("div");o.setAttribute("data-taprail","card"),o.classList.add("tr-left");let s=document.createElement("div");s.className="tr-title",s.textContent="Pay by bank transfer";let c=document.createElement("div");c.className="tr-sub";let n=t.amount_kobo!=null?D(t.amount_kobo,f.currency):"the exact amount";c.textContent=`Send ${n} to the account below. We'll confirm automatically.`;let l=document.createElement("div");l.className="tr-acct",l.append(B("Bank",t.bank||"\u2014"),lt("Account number",t.account_number||"\u2014"),B("Account name",t.account_name||"Taprail")),t.amount_kobo!=null&&l.append(B("Amount",D(t.amount_kobo,f.currency)));let i=document.createElement("div");i.className="tr-wait";let u=document.createElement("span");if(u.textContent="Waiting for your transfer",i.append(L(true),u),o.append(T(true),s,c,l),t.expires_at){let m=document.createElement("div");m.className="tr-expiry",o.appendChild(m),dt(m,t.expires_at);}o.appendChild(i),C(o),R(1500);}function B(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");return n.className="tr-rv",n.textContent=o,s.append(c,n),s}function lt(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let n=document.createElement("span");n.style.display="inline-flex",n.style.alignItems="center",n.style.gap="10px";let l=document.createElement("span");l.className="tr-rv tr-mono",l.textContent=o;let i=document.createElement("button");return i.className="tr-copy",i.type="button",i.innerHTML=`${Nt}<span>Copy</span>`,i.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(o.replace(/\s/g,""));let u=i.querySelector("span");u&&(u.textContent="Copied",setTimeout(()=>u.textContent="Copy",1400));}catch{}}),n.append(l,i),s.append(c,n),s}function dt(t,o){let s=new Date(o).getTime();if(Number.isNaN(s))return;let c=()=>{if(p)return;let n=Math.max(0,Math.floor((s-Date.now())/1e3)),l=Math.floor(n/60),i=n%60;t.textContent=n>0?`Account expires in ${l}:${i.toString().padStart(2,"0")}`:"This account has expired.",n>0&&!p&&setTimeout(c,1e3);};c();}function ut(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Continue in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="Approve this payment in the Taprail app, then come back here.";let c=document.createElement("a");c.className="tr-btn tr-mt",c.href=X(r);let n=document.createElement("span");n.textContent="Open Taprail",c.appendChild(n);let l=document.createElement("div");l.className="tr-wait";let i=document.createElement("span");i.textContent="Waiting for approval",l.append(L(true),i),t.append(T(),$(),s,c,l),C(t),R(1200);}function pt(t){let o=document.createElement("div");o.setAttribute("data-taprail","card");let s=document.createElement("div");s.className="tr-check",s.innerHTML=At;let c=document.createElement("div");c.className="tr-title",c.textContent="Payment complete";let n=document.createElement("div");n.className="tr-sub",o.append(s,c,n);let l=E==="transfer"&&e.appNudge!==false;if(l){n.textContent="Next time, pay with a single tap. Get the Taprail app.";let i=document.createElement("a");i.className="tr-btn tr-mt",i.href=mt,i.target="_blank",i.rel="noopener";let u=document.createElement("span");u.textContent="Get the Taprail app",i.appendChild(u);let m=document.createElement("button");m.className="tr-ghost",m.type="button",m.textContent="Done",m.addEventListener("click",()=>k(t)),o.append(i,m);}else {n.textContent=f.merchant_name?`Your payment to ${f.merchant_name} is confirmed.`:"Your payment is confirmed.";let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Done",i.appendChild(u),i.addEventListener("click",()=>k(t)),o.append(i);}x.onclick=()=>k(t),setTimeout(()=>k(t),l?12e3:6e3),C(o);}x.addEventListener("click",M),g.addEventListener("click",t=>{t.target===g&&M();}),document.addEventListener("keydown",I),document.addEventListener("visibilitychange",U),window.addEventListener("focus",O),S.append(P,x),g.appendChild(S),document.body.appendChild(g),document.body.style.overflow="hidden",H(r).then(t=>{if(!p){if(t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Y.has(t.status))){G(t);return}it();}}).catch(()=>{}),a==="app"?ut():K(),x.focus();})}async function Mt(r){let{id:e}=tt(r),a=await H(e);return {status:a.status,order_id:a.order_id,transaction_reference:a.transaction_reference,return_url:a.return_url}}exports.getStatus=Mt;exports.init=St;exports.open=Pt;return exports;})({});
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{c as getStatus,a as init,b as open}from'./chunk-UZGOWXDY.js';
1
+ export{c as getStatus,a as init,b as open}from'./chunk-CIVYKW6L.js';
package/dist/react.cjs CHANGED
@@ -1,25 +1,48 @@
1
- 'use strict';var y=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var y__namespace=/*#__PURE__*/_interopNamespace(y);var A=new Set(["approved","declined","expired","cancelled","refunded"]),h={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}};function W(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var J="com.taprail.consumer";function D(e){let t=encodeURIComponent(e);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${t}#Intent;scheme=taprail;package=${J};end`:`taprail://pay?o=${t}`}function M(e){try{return new URL(e).searchParams.get("o")}catch{return null}}function F(e){if(typeof e=="string"){if(/^https?:\/\//.test(e)){let a=M(e);if(!a)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:a,deepLink:e}}return {id:e,deepLink:`${h.embedBase}/pay?o=${e}`}}let t=e.id||e.order_id||M(e.deep_link||"")||"";if(!t)throw new Error("Taprail: could not determine the order id from the intent");let r=e.deep_link||e.qr_payload||`${h.embedBase}/pay?o=${t}`;return {id:t,deepLink:r}}async function I(e){let t=await fetch(`${h.apiBase}/v1/checkout/orders/${e}`,{cache:"no-store"});if(!t.ok)return {_ok:false,status:"unknown",order_id:e,transaction_reference:null,return_url:null};let r=await t.json();return {_ok:true,status:r.status,order_id:r.id??e,transaction_reference:r.transaction_reference??null,return_url:r.return_url??null,merchant_name:r.merchant_name??void 0,amount_kobo:typeof r.amount_kobo=="number"?r.amount_kobo:void 0,currency:r.currency??void 0}}function Q(e,t){let r=e/100;return !t||t==="NGN"?"\u20A6"+r.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${t} ${r.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function X(e){if(e.return_url)try{let t=new URL(e.return_url);t.searchParams.set("order",e.order_id),t.searchParams.set("status",e.status),window.location.href=t.toString();}catch{}}var ee='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',te={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},re={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function ne(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function ae(e){let t={...h.theme,...e},r=t.mode==="light"?"light":t.mode==="dark"||ne()?"dark":"light",a=r==="light"?re:te;return {palette:{surface:t.surface??a.surface,text:t.text??a.text,muted:t.muted??a.muted,accent:t.accent??a.accent,accentText:t.accentText??a.accentText,backdrop:t.backdrop??a.backdrop},mode:r,radius:typeof t.radius=="number"?t.radius:20,font:t.fontFamily??ee}}function oe(e){let t=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!t)return "127,127,127";let r=t[1];r.length===3&&(r=r[0]+r[0]+r[1]+r[1]+r[2]+r[2]);let a=parseInt(r,16);return `${a>>16&255},${a>>8&255},${a&255}`}var O="taprail-checkout-css",ie=`
1
+ 'use strict';var S=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var S__namespace=/*#__PURE__*/_interopNamespace(S);var Z=new Set(["approved","declined","expired","cancelled","refunded"]),F={apiBase:"https://api.taprail.app",theme:{}},bt="https://taprail.app";function ht(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var xt="com.taprail.consumer";function tt(r){let e=encodeURIComponent(r);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${e}#Intent;scheme=taprail;package=${xt};end`:`taprail://pay?o=${e}`}function J(r){try{return new URL(r).searchParams.get("o")}catch{return null}}function et(r){if(typeof r=="string"){if(/^https?:\/\//.test(r)){let n=J(r);if(!n)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:n}}return {id:r}}let e=r.id||r.order_id||J(r.deep_link||"")||"";if(!e)throw new Error("Taprail: could not determine the order id from the intent");return {id:e}}async function I(r){let e=await fetch(`${F.apiBase}/v1/checkout/orders/${r}`,{cache:"no-store"});if(!e.ok)return {_ok:false,status:"unknown",order_id:r,transaction_reference:null,return_url:null};let n=await e.json();return {_ok:true,status:n.status,order_id:n.id??r,transaction_reference:n.transaction_reference??null,return_url:n.return_url??null,merchant_name:n.merchant_name??void 0,amount_kobo:typeof n.amount_kobo=="number"?n.amount_kobo:void 0,currency:n.currency??void 0}}async function vt(r,e){let n=await fetch(`${F.apiBase}/v1/checkout/orders/${r}/identify`,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({email:e}),cache:"no-store"}),d=null;try{d=await n.json();}catch{}if(!n.ok){let p=d&&(d.message||d.error)||"We couldn't continue. Please try again.";throw new Error(p)}return d}function H(r,e){let n=r/100;return !e||e==="NGN"?"\u20A6"+n.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${e} ${n.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function yt(r){if(r.return_url)try{let e=new URL(r.return_url);e.searchParams.set("order",r.order_id),e.searchParams.set("status",r.status),window.location.href=e.toString();}catch{}}var kt='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',wt={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},Ct={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function Et(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function Tt(r){let e={...F.theme,...r},n=e.mode==="light"?"light":e.mode==="dark"||Et()?"dark":"light",d=n==="light"?Ct:wt;return {palette:{surface:e.surface??d.surface,text:e.text??d.text,muted:e.muted??d.muted,accent:e.accent??d.accent,accentText:e.accentText??d.accentText,backdrop:e.backdrop??d.backdrop},mode:n,radius:typeof e.radius=="number"?e.radius:20,font:e.fontFamily??kt}}function _t(r){let e=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(r.trim());if(!e)return "127,127,127";let n=e[1];n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let d=parseInt(n,16);return `${d>>16&255},${d>>8&255},${d&255}`}var Q="taprail-checkout-css",Lt=`
2
2
  [data-taprail="overlay"]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:var(--tr-backdrop);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);font-family:var(--tr-font);animation:tr-fade .12s ease both;}
3
3
  [data-taprail="frame"]{position:relative;width:min(420px,92vw);background:var(--tr-surface);border-radius:var(--tr-radius);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.08),0 24px 70px -20px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.5);animation:tr-pop .19s cubic-bezier(.2,.9,.25,1) both;}
4
- [data-taprail="frame"].tr-iframe{height:min(620px,90vh);}
5
- [data-taprail="frame"] iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;background:transparent;}
6
- [data-taprail="loader"]{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--tr-text);}
4
+ [data-taprail="card"]{padding:34px 30px 30px;text-align:center;color:var(--tr-text);}
5
+ [data-taprail="card"].tr-left{text-align:left;}
6
+ [data-taprail="card"] .tr-logo{margin:0 auto 20px;}
7
+ [data-taprail="card"].tr-left .tr-logo{margin:0 0 20px;}
7
8
  .tr-logo{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tr-text);}
8
9
  .tr-logo svg{display:block;flex:none;}
9
10
  .tr-word{font-size:16px;font-weight:650;letter-spacing:-.02em;}
10
11
  .tr-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(var(--tr-text-rgb),.16);border-top-color:var(--tr-text);animation:tr-spin .7s linear infinite;}
11
12
  .tr-ring.tr-sm{width:15px;height:15px;border-width:2px;}
12
- [data-taprail="card"]{padding:38px 30px 30px;text-align:center;color:var(--tr-text);}
13
- [data-taprail="card"] .tr-logo{margin:0 auto 22px;}
14
13
  .tr-amount{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;}
15
14
  .tr-merchant{font-size:13px;color:var(--tr-muted);margin-top:3px;}
16
15
  .tr-title{font-size:17px;font-weight:650;letter-spacing:-.01em;}
17
- .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 22px;max-width:30ch;}
18
- .tr-btn{display:block;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
16
+ .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 0;max-width:32ch;}
17
+ [data-taprail="card"].tr-left .tr-sub{margin-left:0;margin-right:0;}
18
+ .tr-field{margin-top:22px;text-align:left;}
19
+ .tr-label{display:block;font-size:12.5px;font-weight:600;color:var(--tr-muted);margin:0 0 7px 2px;}
20
+ .tr-input{width:100%;box-sizing:border-box;background:rgba(var(--tr-text-rgb),.045);color:var(--tr-text);border:1px solid rgba(var(--tr-text-rgb),.16);border-radius:12px;padding:13px 14px;font:inherit;font-size:15px;outline:none;transition:border-color .12s ease,box-shadow .12s ease;}
21
+ .tr-input::placeholder{color:var(--tr-muted);opacity:.8;}
22
+ .tr-input:focus{border-color:var(--tr-accent);box-shadow:0 0 0 3px rgba(var(--tr-text-rgb),.10);}
23
+ .tr-input.tr-bad{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.16);}
24
+ .tr-err{display:none;font-size:12.5px;color:#e5675b;margin:8px 2px 0;text-align:left;}
25
+ .tr-err.tr-on{display:block;}
26
+ .tr-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
19
27
  .tr-btn:hover{filter:brightness(1.06);}
20
28
  .tr-btn:active{transform:scale(.975);}
21
- .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:20px;}
29
+ .tr-btn[disabled]{opacity:.6;cursor:default;pointer-events:none;}
30
+ .tr-btn.tr-mt{margin-top:18px;}
31
+ .tr-ghost{display:inline-block;width:100%;box-sizing:border-box;background:transparent;color:var(--tr-muted);border:0;border-radius:999px;padding:12px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:center;text-decoration:none;transition:color .12s ease;}
32
+ .tr-ghost:hover{color:var(--tr-text);}
33
+ .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:22px;}
22
34
  .tr-cap{font-size:12.5px;color:var(--tr-muted);}
35
+ .tr-acct{margin-top:22px;border:1px solid rgba(var(--tr-text-rgb),.14);border-radius:14px;overflow:hidden;}
36
+ .tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid rgba(var(--tr-text-rgb),.10);}
37
+ .tr-row:first-child{border-top:0;}
38
+ .tr-rk{font-size:12.5px;color:var(--tr-muted);}
39
+ .tr-rv{font-size:14.5px;font-weight:600;color:var(--tr-text);text-align:right;}
40
+ .tr-rv.tr-mono{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:16px;}
41
+ .tr-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(var(--tr-text-rgb),.07);color:var(--tr-text);border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s ease;}
42
+ .tr-copy:hover{background:rgba(var(--tr-text-rgb),.12);}
43
+ .tr-copy svg{display:block;}
44
+ .tr-expiry{font-size:12px;color:var(--tr-muted);margin-top:12px;text-align:center;}
45
+ .tr-check{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:rgba(46,160,90,.14);color:#2ea05a;}
23
46
  [data-taprail="close"]{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tr-surface);color:var(--tr-text);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.14),0 2px 10px -2px rgba(0,0,0,.4);transition:transform .12s ease,box-shadow .12s ease;}
24
47
  [data-taprail="close"] svg{display:block;opacity:.7;transition:opacity .12s ease;}
25
48
  [data-taprail="close"]:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.24),0 4px 14px -3px rgba(0,0,0,.5);}
@@ -30,4 +53,4 @@
30
53
  @keyframes tr-pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
31
54
  @keyframes tr-spin{to{transform:rotate(360deg)}}
32
55
  @media (prefers-reduced-motion:reduce){[data-taprail="overlay"],[data-taprail="frame"]{animation:none}.tr-ring{animation-duration:1.4s}.tr-btn,[data-taprail="close"]{transition:none}}
33
- `;function se(){if(typeof document>"u"||document.getElementById(O))return;let e=document.createElement("style");e.id=O,e.textContent=ie,document.head.appendChild(e);}var ce='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function $(){let e=document.createElement("div");return e.className="tr-logo",e.innerHTML=`${ce}<span class="tr-word">Taprail</span>`,e}function N(e=false){let t=document.createElement("div");return t.className=e?"tr-ring tr-sm":"tr-ring",t}var le='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';function H(e,t={}){let{id:r}=F(e);return W()?(window.location.href=D(r),z(r,t,"app")):z(r,t,"iframe")}function z(e,t,r){return new Promise(a=>{let l=false,b=false,m,x=0,p=null,v=false,G=document.activeElement,U=document.body.style.overflow;se();let{palette:d,mode:K,radius:q,font:V}=ae(t.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let c=document.createElement("div");c.setAttribute("data-taprail","overlay"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-label","Pay with Taprail");let L={"--tr-surface":d.surface,"--tr-text":d.text,"--tr-text-rgb":oe(d.text),"--tr-muted":d.muted,"--tr-accent":d.accent,"--tr-accent-text":d.accentText,"--tr-backdrop":d.backdrop,"--tr-radius":`${q}px`,"--tr-font":V};for(let n in L)c.style.setProperty(n,L[n]);let f=document.createElement("div");f.setAttribute("data-taprail","frame");let k;if(r==="iframe"){f.classList.add("tr-iframe");let n=document.createElement("div");n.setAttribute("data-taprail","loader");let o=document.createElement("div");o.className="tr-cap",o.textContent="Loading secure checkout\u2026",n.append($(),N(),o);let s=document.createElement("iframe"),i=new URL(`${h.embedBase}/pay`);i.searchParams.set("o",e),i.searchParams.set("theme",K),i.searchParams.set("accent",d.accent),s.src=i.toString(),s.allow="clipboard-write",s.addEventListener("load",()=>n.remove()),f.appendChild(n),k=s;}else {let n=document.createElement("div");n.setAttribute("data-taprail","card");let o=document.createElement("div"),s=document.createElement("div");s.className="tr-title",s.textContent="Continue in the Taprail app",o.appendChild(s),p=o;let i=document.createElement("div");i.className="tr-sub",i.textContent="Approve this payment in the Taprail app, then come back here.";let u=document.createElement("a");u.className="tr-btn",u.href=D(e),u.textContent="Open Taprail";let E=document.createElement("div");E.className="tr-wait";let S=document.createElement("span");S.textContent="Waiting for approval",E.append(N(true),S),n.append($(),o,i,u,E),k=n;}let g=document.createElement("button");g.setAttribute("data-taprail","close"),g.setAttribute("aria-label","Close"),g.innerHTML=le;function Z(){clearTimeout(m),window.removeEventListener("message",R),document.removeEventListener("keydown",B),document.removeEventListener("visibilitychange",P),window.removeEventListener("focus",_),c.remove(),document.body.style.overflow=U,G?.focus?.();}function Y(n,o,s){if(!p||v||n==null)return;v=true,p.textContent="";let i=document.createElement("div");if(i.className="tr-amount",i.textContent=Q(n,o),p.appendChild(i),s){let u=document.createElement("div");u.className="tr-merchant",u.textContent=s,p.appendChild(u);}}function w(n){l||(l=true,Z(),n.status==="approved"?t.onSuccess?.(n):n.status==="closed"&&t.onClose?.(),a(n),t.redirect&&n.status!=="closed"&&X(n));}function R(n){if(n.origin!==h.embedBase)return;let o=n.data;!o||o.source!=="taprail-checkout"||o.status&&A.has(o.status)&&w({status:o.status,order_id:o.order_id||e,transaction_reference:o.transaction_reference??null,return_url:o.return_url??null});}function B(n){n.key==="Escape"&&C();}function C(){w({status:"closed",order_id:e,transaction_reference:null,return_url:null});}async function T(){if(!(l||b)){b=true;try{let n=await I(e);if(x=0,r==="app"&&Y(n.amount_kobo,n.currency,n.merchant_name),n._ok&&A.has(n.status)){w({status:n.status,order_id:n.order_id,transaction_reference:n.transaction_reference,return_url:n.return_url});return}}catch(n){x+=1,x===4&&t.onError?.(n instanceof Error?n:new Error(String(n)));}finally{b=false;}l||(m=setTimeout(T,r==="app"?1200:2e3));}}function _(){l||(clearTimeout(m),T());}function P(){document.visibilityState==="visible"&&_();}g.addEventListener("click",C),c.addEventListener("click",n=>{n.target===c&&C();}),document.addEventListener("keydown",B),window.addEventListener("message",R),document.addEventListener("visibilitychange",P),window.addEventListener("focus",_),f.appendChild(k),f.appendChild(g),c.appendChild(f),document.body.appendChild(c),document.body.style.overflow="hidden",g.focus(),m=setTimeout(T,r==="app"?450:800);})}async function j(e){let{id:t}=F(e),r=await I(t);return {status:r.status,order_id:r.order_id,transaction_reference:r.transaction_reference,return_url:r.return_url}}function de(){let[e,t]=y__namespace.useState(false);return {open:y__namespace.useCallback((a,l={})=>(t(true),H(a,l).finally(()=>t(false))),[]),getStatus:j,pending:e}}function fe({intent:e,onSuccess:t,onError:r,onClose:a,theme:l,children:b,disabled:m,...x}){let{open:p,pending:v}=de();return jsxRuntime.jsx("button",{type:"button",disabled:m||v,onClick:()=>p(e,{onSuccess:t,onError:r,onClose:a,theme:l}),...x,children:b??"Pay with Taprail"})}exports.TaprailButton=fe;exports.useTaprailCheckout=de;
56
+ `;function Nt(){if(typeof document>"u"||document.getElementById(Q))return;let r=document.createElement("style");r.id=Q,r.textContent=Lt,document.head.appendChild(r);}var At='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function N(r=false){let e=document.createElement("div");return e.className="tr-logo",r&&(e.style.justifyContent="flex-start"),e.innerHTML=`${At}<span class="tr-word">Taprail</span>`,e}function A(r=false){let e=document.createElement("div");return e.className=r?"tr-ring tr-sm":"tr-ring",e}var St='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',Rt='<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5.25" y="5.25" width="8.5" height="8.5" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="M10.75 5.25V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4.75a2 2 0 0 0 2 2h1.25" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',Pt='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12.5l4.2 4.2L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';function rt(r,e={}){let{id:n}=et(r);return ht()?(window.location.href=tt(n),X(n,e,"app")):X(n,e,"email")}function X(r,e,n){return new Promise(d=>{let p=false,w=false,b,L=2e3,h=false,C=0,E=n==="app"?"app":"taprail",f={},at=document.activeElement,ot=document.body.style.overflow;Nt();let{palette:x,radius:it,font:st}=Tt(e.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let g=document.createElement("div");g.setAttribute("data-taprail","overlay"),g.setAttribute("role","dialog"),g.setAttribute("aria-modal","true"),g.setAttribute("aria-label","Pay with Taprail");let j={"--tr-surface":x.surface,"--tr-text":x.text,"--tr-text-rgb":_t(x.text),"--tr-muted":x.muted,"--tr-accent":x.accent,"--tr-accent-text":x.accentText,"--tr-backdrop":x.backdrop,"--tr-radius":`${it}px`,"--tr-font":st};for(let t in j)g.style.setProperty(t,j[t]);let R=document.createElement("div");R.setAttribute("data-taprail","frame");let v=document.createElement("button");v.setAttribute("data-taprail","close"),v.setAttribute("aria-label","Close"),v.innerHTML=St;let P=document.createElement("div");function T(t){P.replaceChildren(t);}function ct(){clearTimeout(b),document.removeEventListener("keydown",G),document.removeEventListener("visibilitychange",K),window.removeEventListener("focus",z),g.remove(),document.body.style.overflow=ot,at?.focus?.();}function k(t){p||(p=true,ct(),d(t),e.redirect&&t.status!=="closed"&&yt(t));}function M(){p||(e.onClose?.(),k({status:"closed",order_id:r,transaction_reference:null,return_url:null}));}function G(t){t.key==="Escape"&&M();}function W(t){if(p)return;U();let o={status:t.status,order_id:t.order_id,transaction_reference:t.transaction_reference,return_url:t.return_url,rail:E};t.status==="approved"?(e.onSuccess?.(o),gt(o)):k(o);}function O(t){h=true,L=t,clearTimeout(b),b=setTimeout(B,400);}function U(){h=false,clearTimeout(b);}async function B(){if(!(p||w||!h)){w=true;try{let t=await I(r);if(C=0,t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Z.has(t.status))){W(t);return}}catch(t){C+=1,C===4&&e.onError?.(t instanceof Error?t:new Error(String(t)));}finally{w=false;}!p&&h&&(b=setTimeout(B,L));}}function z(){p||!h||(clearTimeout(b),B());}function K(){document.visibilityState==="visible"&&z();}function $(){let t=document.createElement("div");if(t.className="tr-sum",f.amount_kobo!=null){let o=document.createElement("div");if(o.className="tr-amount",o.textContent=H(f.amount_kobo,f.currency),t.appendChild(o),f.merchant_name){let s=document.createElement("div");s.className="tr-merchant",s.textContent=f.merchant_name,t.appendChild(s);}}else {let o=document.createElement("div");o.className="tr-title",o.textContent="Complete your payment",t.appendChild(o);}return t}function lt(){P.querySelectorAll(".tr-sum").forEach(t=>t.replaceWith($()));}function V(){let t=document.createElement("div");t.setAttribute("data-taprail","card"),t.classList.add("tr-left");let o=document.createElement("div");o.className="tr-sub",o.textContent="Enter your email to pay with Taprail, or by bank transfer.";let s=document.createElement("div");s.className="tr-field";let c=document.createElement("label");c.className="tr-label",c.textContent="Email",c.htmlFor="tr-email";let a=document.createElement("input");a.className="tr-input",a.id="tr-email",a.type="email",a.inputMode="email",a.autocomplete="email",a.placeholder="you@example.com",a.value=e.email??"";let l=document.createElement("div");l.className="tr-err",s.append(c,a,l);let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Continue",i.appendChild(u);function m(y){l.textContent=y,l.classList.add("tr-on"),a.classList.add("tr-bad");}function q(){l.classList.remove("tr-on"),a.classList.remove("tr-bad");}async function Y(){let y=a.value.trim();if(!y||!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(y)){m("Enter a valid email address."),a.focus();return}q(),i.setAttribute("disabled","true"),u.textContent="Checking",i.prepend(A(true));try{let _=await vt(r,y);_.method==="taprail"?(E="taprail",dt()):(E="transfer",ut(_.account));}catch(_){i.querySelector(".tr-ring")?.remove(),i.removeAttribute("disabled"),u.textContent="Continue",m(_ instanceof Error?_.message:"Something went wrong. Try again.");}}a.addEventListener("input",q),a.addEventListener("keydown",y=>{y.key==="Enter"&&Y();}),i.addEventListener("click",Y),t.append(N(true),$(),o,s,i),T(t),setTimeout(()=>a.focus(),30);}function dt(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Confirm in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="We sent a confirmation to your Taprail app. Approve it there to finish.";let c=document.createElement("div");c.className="tr-wait";let a=document.createElement("span");a.textContent="Waiting for approval",c.append(A(true),a);let l=document.createElement("button");l.className="tr-ghost",l.type="button",l.textContent="Use a different email",l.addEventListener("click",()=>{U(),E="taprail",V();}),t.append(N(),o,s,c,l),T(t),O(1800);}function ut(t){let o=document.createElement("div");o.setAttribute("data-taprail","card"),o.classList.add("tr-left");let s=document.createElement("div");s.className="tr-title",s.textContent="Pay by bank transfer";let c=document.createElement("div");c.className="tr-sub";let a=t.amount_kobo!=null?H(t.amount_kobo,f.currency):"the exact amount";c.textContent=`Send ${a} to the account below. We'll confirm automatically.`;let l=document.createElement("div");l.className="tr-acct",l.append(D("Bank",t.bank||"\u2014"),pt("Account number",t.account_number||"\u2014"),D("Account name",t.account_name||"Taprail")),t.amount_kobo!=null&&l.append(D("Amount",H(t.amount_kobo,f.currency)));let i=document.createElement("div");i.className="tr-wait";let u=document.createElement("span");if(u.textContent="Waiting for your transfer",i.append(A(true),u),o.append(N(true),s,c,l),t.expires_at){let m=document.createElement("div");m.className="tr-expiry",o.appendChild(m),mt(m,t.expires_at);}o.appendChild(i),T(o),O(1500);}function D(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let a=document.createElement("span");return a.className="tr-rv",a.textContent=o,s.append(c,a),s}function pt(t,o){let s=document.createElement("div");s.className="tr-row";let c=document.createElement("span");c.className="tr-rk",c.textContent=t;let a=document.createElement("span");a.style.display="inline-flex",a.style.alignItems="center",a.style.gap="10px";let l=document.createElement("span");l.className="tr-rv tr-mono",l.textContent=o;let i=document.createElement("button");return i.className="tr-copy",i.type="button",i.innerHTML=`${Rt}<span>Copy</span>`,i.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(o.replace(/\s/g,""));let u=i.querySelector("span");u&&(u.textContent="Copied",setTimeout(()=>u.textContent="Copy",1400));}catch{}}),a.append(l,i),s.append(c,a),s}function mt(t,o){let s=new Date(o).getTime();if(Number.isNaN(s))return;let c=()=>{if(p)return;let a=Math.max(0,Math.floor((s-Date.now())/1e3)),l=Math.floor(a/60),i=a%60;t.textContent=a>0?`Account expires in ${l}:${i.toString().padStart(2,"0")}`:"This account has expired.",a>0&&!p&&setTimeout(c,1e3);};c();}function ft(){let t=document.createElement("div");t.setAttribute("data-taprail","card");let o=document.createElement("div");o.className="tr-title",o.textContent="Continue in the Taprail app";let s=document.createElement("div");s.className="tr-sub",s.textContent="Approve this payment in the Taprail app, then come back here.";let c=document.createElement("a");c.className="tr-btn tr-mt",c.href=tt(r);let a=document.createElement("span");a.textContent="Open Taprail",c.appendChild(a);let l=document.createElement("div");l.className="tr-wait";let i=document.createElement("span");i.textContent="Waiting for approval",l.append(A(true),i),t.append(N(),$(),s,c,l),T(t),O(1200);}function gt(t){let o=document.createElement("div");o.setAttribute("data-taprail","card");let s=document.createElement("div");s.className="tr-check",s.innerHTML=Pt;let c=document.createElement("div");c.className="tr-title",c.textContent="Payment complete";let a=document.createElement("div");a.className="tr-sub",o.append(s,c,a);let l=E==="transfer"&&e.appNudge!==false;if(l){a.textContent="Next time, pay with a single tap. Get the Taprail app.";let i=document.createElement("a");i.className="tr-btn tr-mt",i.href=bt,i.target="_blank",i.rel="noopener";let u=document.createElement("span");u.textContent="Get the Taprail app",i.appendChild(u);let m=document.createElement("button");m.className="tr-ghost",m.type="button",m.textContent="Done",m.addEventListener("click",()=>k(t)),o.append(i,m);}else {a.textContent=f.merchant_name?`Your payment to ${f.merchant_name} is confirmed.`:"Your payment is confirmed.";let i=document.createElement("button");i.className="tr-btn tr-mt",i.type="button";let u=document.createElement("span");u.textContent="Done",i.appendChild(u),i.addEventListener("click",()=>k(t)),o.append(i);}v.onclick=()=>k(t),setTimeout(()=>k(t),l?12e3:6e3),T(o);}v.addEventListener("click",M),g.addEventListener("click",t=>{t.target===g&&M();}),document.addEventListener("keydown",G),document.addEventListener("visibilitychange",K),window.addEventListener("focus",z),R.append(P,v),g.appendChild(R),document.body.appendChild(g),document.body.style.overflow="hidden",I(r).then(t=>{if(!p){if(t._ok&&(f={amount_kobo:t.amount_kobo,currency:t.currency,merchant_name:t.merchant_name},Z.has(t.status))){W(t);return}lt();}}).catch(()=>{}),n==="app"?ft():V(),v.focus();})}async function nt(r){let{id:e}=et(r),n=await I(e);return {status:n.status,order_id:n.order_id,transaction_reference:n.transaction_reference,return_url:n.return_url}}function Mt(){let[r,e]=S__namespace.useState(false);return {open:S__namespace.useCallback((d,p={})=>(e(true),rt(d,p).finally(()=>e(false))),[]),getStatus:nt,pending:r}}function $t({intent:r,onSuccess:e,onError:n,onClose:d,theme:p,children:w,disabled:b,...L}){let{open:h,pending:C}=Mt();return jsxRuntime.jsx("button",{type:"button",disabled:b||C,onClick:()=>h(r,{onSuccess:e,onError:n,onClose:d,theme:p}),...L,children:w??"Pay with Taprail"})}exports.TaprailButton=$t;exports.useTaprailCheckout=Mt;
package/dist/react.js CHANGED
@@ -1 +1 @@
1
- import {c,b}from'./chunk-UZGOWXDY.js';import*as e from'react';import {jsx}from'react/jsx-runtime';function T(){let[n,t]=e.useState(false);return {open:e.useCallback((o,r={})=>(t(true),b(o,r).finally(()=>t(false))),[]),getStatus:c,pending:n}}function R({intent:n,onSuccess:t,onError:a,onClose:o,theme:r,children:s,disabled:u,...l}){let{open:c,pending:d}=T();return jsx("button",{type:"button",disabled:u||d,onClick:()=>c(n,{onSuccess:t,onError:a,onClose:o,theme:r}),...l,children:s??"Pay with Taprail"})}export{R as TaprailButton,T as useTaprailCheckout};
1
+ import {c,b}from'./chunk-CIVYKW6L.js';import*as e from'react';import {jsx}from'react/jsx-runtime';function T(){let[n,t]=e.useState(false);return {open:e.useCallback((o,r={})=>(t(true),b(o,r).finally(()=>t(false))),[]),getStatus:c,pending:n}}function R({intent:n,onSuccess:t,onError:a,onClose:o,theme:r,children:s,disabled:u,...l}){let{open:c,pending:d}=T();return jsx("button",{type:"button",disabled:u||d,onClick:()=>c(n,{onSuccess:t,onError:a,onClose:o,theme:r}),...l,children:s??"Pay with Taprail"})}export{R as TaprailButton,T as useTaprailCheckout};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taprail/checkout",
3
- "version": "0.3.1",
3
+ "version": "0.4.1",
4
4
  "description": "Drop-in Pay with Taprail checkout for the browser. Never sees card details or API keys.",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
package/dist/chunk-UZGOWXDY.js DELETED
@@ -1,33 +0,0 @@
1
- var P=new Set(["approved","declined","expired","cancelled","refunded"]),d={apiBase:"https://api.taprail.app",embedBase:"https://pay.taprail.app",theme:{}};function se(e){e.apiBase&&(d.apiBase=e.apiBase.replace(/\/$/,"")),e.embedBase&&(d.embedBase=e.embedBase.replace(/\/$/,"")),e.theme&&(d.theme={...d.theme,...e.theme});}function V(){return typeof navigator<"u"&&/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)}var Z="com.taprail.consumer";function N(e){let t=encodeURIComponent(e);return typeof navigator<"u"&&/Android/i.test(navigator.userAgent)?`intent://pay?o=${t}#Intent;scheme=taprail;package=${Z};end`:`taprail://pay?o=${t}`}function R(e){try{return new URL(e).searchParams.get("o")}catch{return null}}function D(e){if(typeof e=="string"){if(/^https?:\/\//.test(e)){let i=R(e);if(!i)throw new Error("Taprail: deep link is missing the ?o=<orderId> parameter");return {id:i,deepLink:e}}return {id:e,deepLink:`${d.embedBase}/pay?o=${e}`}}let t=e.id||e.order_id||R(e.deep_link||"")||"";if(!t)throw new Error("Taprail: could not determine the order id from the intent");let n=e.deep_link||e.qr_payload||`${d.embedBase}/pay?o=${t}`;return {id:t,deepLink:n}}async function F(e){let t=await fetch(`${d.apiBase}/v1/checkout/orders/${e}`,{cache:"no-store"});if(!t.ok)return {_ok:false,status:"unknown",order_id:e,transaction_reference:null,return_url:null};let n=await t.json();return {_ok:true,status:n.status,order_id:n.id??e,transaction_reference:n.transaction_reference??null,return_url:n.return_url??null,merchant_name:n.merchant_name??void 0,amount_kobo:typeof n.amount_kobo=="number"?n.amount_kobo:void 0,currency:n.currency??void 0}}function Y(e,t){let n=e/100;return !t||t==="NGN"?"\u20A6"+n.toLocaleString("en-NG",{minimumFractionDigits:2,maximumFractionDigits:2}):`${t} ${n.toLocaleString(void 0,{minimumFractionDigits:2,maximumFractionDigits:2})}`}function W(e){if(e.return_url)try{let t=new URL(e.return_url);t.searchParams.set("order",e.order_id),t.searchParams.set("status",e.status),window.location.href=t.toString();}catch{}}var J='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif',Q={surface:"#101013",text:"#f5f5f6",muted:"#8b8b93",accent:"#f5f5f6",accentText:"#0a0a0c",backdrop:"rgba(7,7,10,0.7)"},X={surface:"#ffffff",text:"#18181b",muted:"#6b7280",accent:"#18181b",accentText:"#ffffff",backdrop:"rgba(17,17,26,0.46)"};function ee(){return typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches}function te(e){let t={...d.theme,...e},n=t.mode==="light"?"light":t.mode==="dark"||ee()?"dark":"light",i=n==="light"?X:Q;return {palette:{surface:t.surface??i.surface,text:t.text??i.text,muted:t.muted??i.muted,accent:t.accent??i.accent,accentText:t.accentText??i.accentText,backdrop:t.backdrop??i.backdrop},mode:n,radius:typeof t.radius=="number"?t.radius:20,font:t.fontFamily??J}}function re(e){let t=/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());if(!t)return "127,127,127";let n=t[1];n.length===3&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);let i=parseInt(n,16);return `${i>>16&255},${i>>8&255},${i&255}`}var $="taprail-checkout-css",ne=`
2
- [data-taprail="overlay"]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:var(--tr-backdrop);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);font-family:var(--tr-font);animation:tr-fade .12s ease both;}
3
- [data-taprail="frame"]{position:relative;width:min(420px,92vw);background:var(--tr-surface);border-radius:var(--tr-radius);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.08),0 24px 70px -20px rgba(0,0,0,.55),0 8px 24px -16px rgba(0,0,0,.5);animation:tr-pop .19s cubic-bezier(.2,.9,.25,1) both;}
4
- [data-taprail="frame"].tr-iframe{height:min(620px,90vh);}
5
- [data-taprail="frame"] iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;background:transparent;}
6
- [data-taprail="loader"]{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--tr-text);}
7
- .tr-logo{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--tr-text);}
8
- .tr-logo svg{display:block;flex:none;}
9
- .tr-word{font-size:16px;font-weight:650;letter-spacing:-.02em;}
10
- .tr-ring{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(var(--tr-text-rgb),.16);border-top-color:var(--tr-text);animation:tr-spin .7s linear infinite;}
11
- .tr-ring.tr-sm{width:15px;height:15px;border-width:2px;}
12
- [data-taprail="card"]{padding:38px 30px 30px;text-align:center;color:var(--tr-text);}
13
- [data-taprail="card"] .tr-logo{margin:0 auto 22px;}
14
- .tr-amount{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.1;}
15
- .tr-merchant{font-size:13px;color:var(--tr-muted);margin-top:3px;}
16
- .tr-title{font-size:17px;font-weight:650;letter-spacing:-.01em;}
17
- .tr-sub{font-size:13.5px;line-height:1.5;color:var(--tr-muted);margin:10px auto 22px;max-width:30ch;}
18
- .tr-btn{display:block;width:100%;box-sizing:border-box;background:var(--tr-accent);color:var(--tr-accent-text);border:0;border-radius:999px;padding:14px 18px;font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .1s ease,filter .12s ease;}
19
- .tr-btn:hover{filter:brightness(1.06);}
20
- .tr-btn:active{transform:scale(.975);}
21
- .tr-wait{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--tr-muted);margin-top:20px;}
22
- .tr-cap{font-size:12.5px;color:var(--tr-muted);}
23
- [data-taprail="close"]{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tr-surface);color:var(--tr-text);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.14),0 2px 10px -2px rgba(0,0,0,.4);transition:transform .12s ease,box-shadow .12s ease;}
24
- [data-taprail="close"] svg{display:block;opacity:.7;transition:opacity .12s ease;}
25
- [data-taprail="close"]:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(var(--tr-text-rgb),.24),0 4px 14px -3px rgba(0,0,0,.5);}
26
- [data-taprail="close"]:hover svg{opacity:1;}
27
- [data-taprail="close"]:active{transform:scale(.93);}
28
- [data-taprail="close"]:focus-visible{outline:2px solid var(--tr-accent);outline-offset:2px;}
29
- @keyframes tr-fade{from{opacity:0}to{opacity:1}}
30
- @keyframes tr-pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
31
- @keyframes tr-spin{to{transform:rotate(360deg)}}
32
- @media (prefers-reduced-motion:reduce){[data-taprail="overlay"],[data-taprail="frame"]{animation:none}.tr-ring{animation-duration:1.4s}.tr-btn,[data-taprail="close"]{transition:none}}
33
- `;function ae(){if(typeof document>"u"||document.getElementById($))return;let e=document.createElement("style");e.id=$,e.textContent=ne,document.head.appendChild(e);}var ie='<svg viewBox="0 0 500 500" width="22" height="22" fill="none" aria-hidden="true" focusable="false"><path d="M147.789 394.059C214.872 439.472 307.74 425.816 359.214 362.946L371.749 347.654L437.045 393.713L423.39 410.225C385.37 456.004 331.287 486.708 271.399 496.516C211.059 506.557 151.221 494.72 102.868 463.262C50.9889 429.616 15.9579 377.523 4.20937 316.703C-1.75472 286.404 -1.3776 255.258 5.31847 225.103C12.0145 194.947 24.8939 166.394 43.1963 141.127L55.4452 124.132L120.503 170.19L109.04 186.311C61.1408 253.994 78.4657 347.194 147.789 394.059Z" fill="currentColor"/><path d="M500 310.578L428.222 321.724L386.423 70.7041L126.55 111.075L114.992 41.7101L377.391 0.879109C385.717 -0.444061 394.224 -0.272305 402.485 1.38576L405.059 1.91543C418.429 4.93491 430.565 11.7347 439.92 21.4473C449.274 31.16 455.423 43.3453 457.581 56.4489L500 310.578Z" fill="currentColor"/><path d="M257.046 329.232C306.454 329.232 346.506 290.526 346.506 242.779C346.506 195.033 306.454 156.327 257.046 156.327C207.639 156.327 167.586 195.033 167.586 242.779C167.586 290.526 207.639 329.232 257.046 329.232Z" fill="currentColor"/></svg>';function M(){let e=document.createElement("div");return e.className="tr-logo",e.innerHTML=`${ie}<span class="tr-word">Taprail</span>`,e}function O(e=false){let t=document.createElement("div");return t.className=e?"tr-ring tr-sm":"tr-ring",t}var oe='<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M3.5 3.5l8 8M11.5 3.5l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';function ce(e,t={}){let{id:n}=D(e);return V()?(window.location.href=N(n),z(n,t,"app")):z(n,t,"iframe")}function z(e,t,n){return new Promise(i=>{let f=false,b=false,h,x=0,g=null,E=false,I=document.activeElement,j=document.body.style.overflow;ae();let{palette:l,mode:H,radius:G,font:U}=te(t.theme??{});document.querySelector('[data-taprail="overlay"]')?.remove();let c=document.createElement("div");c.setAttribute("data-taprail","overlay"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-label","Pay with Taprail");let T={"--tr-surface":l.surface,"--tr-text":l.text,"--tr-text-rgb":re(l.text),"--tr-muted":l.muted,"--tr-accent":l.accent,"--tr-accent-text":l.accentText,"--tr-backdrop":l.backdrop,"--tr-radius":`${G}px`,"--tr-font":U};for(let r in T)c.style.setProperty(r,T[r]);let p=document.createElement("div");p.setAttribute("data-taprail","frame");let v;if(n==="iframe"){p.classList.add("tr-iframe");let r=document.createElement("div");r.setAttribute("data-taprail","loader");let a=document.createElement("div");a.className="tr-cap",a.textContent="Loading secure checkout\u2026",r.append(M(),O(),a);let s=document.createElement("iframe"),o=new URL(`${d.embedBase}/pay`);o.searchParams.set("o",e),o.searchParams.set("theme",H),o.searchParams.set("accent",l.accent),s.src=o.toString(),s.allow="clipboard-write",s.addEventListener("load",()=>r.remove()),p.appendChild(r),v=s;}else {let r=document.createElement("div");r.setAttribute("data-taprail","card");let a=document.createElement("div"),s=document.createElement("div");s.className="tr-title",s.textContent="Continue in the Taprail app",a.appendChild(s),g=a;let o=document.createElement("div");o.className="tr-sub",o.textContent="Approve this payment in the Taprail app, then come back here.";let u=document.createElement("a");u.className="tr-btn",u.href=N(e),u.textContent="Open Taprail";let C=document.createElement("div");C.className="tr-wait";let B=document.createElement("span");B.textContent="Waiting for approval",C.append(O(true),B),r.append(M(),a,o,u,C),v=r;}let m=document.createElement("button");m.setAttribute("data-taprail","close"),m.setAttribute("aria-label","Close"),m.innerHTML=oe;function K(){clearTimeout(h),window.removeEventListener("message",L),document.removeEventListener("keydown",A),document.removeEventListener("visibilitychange",S),window.removeEventListener("focus",_),c.remove(),document.body.style.overflow=j,I?.focus?.();}function q(r,a,s){if(!g||E||r==null)return;E=true,g.textContent="";let o=document.createElement("div");if(o.className="tr-amount",o.textContent=Y(r,a),g.appendChild(o),s){let u=document.createElement("div");u.className="tr-merchant",u.textContent=s,g.appendChild(u);}}function y(r){f||(f=true,K(),r.status==="approved"?t.onSuccess?.(r):r.status==="closed"&&t.onClose?.(),i(r),t.redirect&&r.status!=="closed"&&W(r));}function L(r){if(r.origin!==d.embedBase)return;let a=r.data;!a||a.source!=="taprail-checkout"||a.status&&P.has(a.status)&&y({status:a.status,order_id:a.order_id||e,transaction_reference:a.transaction_reference??null,return_url:a.return_url??null});}function A(r){r.key==="Escape"&&k();}function k(){y({status:"closed",order_id:e,transaction_reference:null,return_url:null});}async function w(){if(!(f||b)){b=true;try{let r=await F(e);if(x=0,n==="app"&&q(r.amount_kobo,r.currency,r.merchant_name),r._ok&&P.has(r.status)){y({status:r.status,order_id:r.order_id,transaction_reference:r.transaction_reference,return_url:r.return_url});return}}catch(r){x+=1,x===4&&t.onError?.(r instanceof Error?r:new Error(String(r)));}finally{b=false;}f||(h=setTimeout(w,n==="app"?1200:2e3));}}function _(){f||(clearTimeout(h),w());}function S(){document.visibilityState==="visible"&&_();}m.addEventListener("click",k),c.addEventListener("click",r=>{r.target===c&&k();}),document.addEventListener("keydown",A),window.addEventListener("message",L),document.addEventListener("visibilitychange",S),window.addEventListener("focus",_),p.appendChild(v),p.appendChild(m),c.appendChild(p),document.body.appendChild(c),document.body.style.overflow="hidden",m.focus(),h=setTimeout(w,n==="app"?450:800);})}async function de(e){let{id:t}=D(e),n=await F(t);return {status:n.status,order_id:n.order_id,transaction_reference:n.transaction_reference,return_url:n.return_url}}export{se as a,ce as b,de as c};