@radokpay/js 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -2
- package/dist/radok.cjs +1 -1
- package/dist/radok.js +1 -1
- package/dist/radok.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Take payments on your own site with [Radok Pay](https://radokpay.com). One scrip
|
|
|
4
4
|
Radok checkout in a modal over your page — your customer never leaves.
|
|
5
5
|
|
|
6
6
|
```html
|
|
7
|
-
<script src="https://cdn.jsdelivr.net/npm/@radokpay/js"></script>
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/@radokpay/js@0"></script>
|
|
8
8
|
<script>
|
|
9
9
|
const radok = Radok();
|
|
10
10
|
|
|
@@ -28,6 +28,22 @@ import { Radok } from "@radokpay/js";
|
|
|
28
28
|
|
|
29
29
|
Using React? [`@radokpay/react`](https://www.npmjs.com/package/@radokpay/react) wraps this.
|
|
30
30
|
|
|
31
|
+
## Which package
|
|
32
|
+
|
|
33
|
+
| | |
|
|
34
|
+
| --- | --- |
|
|
35
|
+
| **`@radokpay/js`** | The widget. A script tag, or an import if you use a bundler. No dependencies, ~5 KB. |
|
|
36
|
+
| **`@radokpay/react`** | A component and a hook over `@radokpay/js`, which it installs for you. Use this *instead of*, not as well as, the one above. |
|
|
37
|
+
|
|
38
|
+
## Requirements
|
|
39
|
+
|
|
40
|
+
- **Any modern browser** — ES2020, so Chrome/Safari/Firefox/Edge from 2020 onward and their mobile versions.
|
|
41
|
+
- **Node 20+**, only to install and build. Nothing here runs on your server at request time.
|
|
42
|
+
- **React 18+** for `@radokpay/react`. It is a peer dependency, so it uses the copy you already have.
|
|
43
|
+
- **https in production.** The checkout's copy buttons need a secure context; localhost counts, plain http on a real domain does not.
|
|
44
|
+
|
|
45
|
+
Both packages ship ESM and CommonJS and their own TypeScript types — there is no `@types/` package to add.
|
|
46
|
+
|
|
31
47
|
## How it fits together
|
|
32
48
|
|
|
33
49
|
The amount is set by your server, never by the browser — so a customer cannot change what they
|
|
@@ -66,7 +82,7 @@ curl -X POST https://api.radokpay.com/v1/payment-links \
|
|
|
66
82
|
|
|
67
83
|
## Before it will render
|
|
68
84
|
|
|
69
|
-
Add your site under **
|
|
85
|
+
Add your site under **Developers → Embedding** in the Radok dashboard. The checkout sends a
|
|
70
86
|
`frame-ancestors` header built from that list, so a site you have not registered cannot frame your
|
|
71
87
|
checkout — and neither can anyone else's. A merchant with no registered origins is not embeddable;
|
|
72
88
|
the modal opens and stays blank.
|
package/dist/radok.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},w=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of E(e))!v.call(t,s)&&s!==o&&p(t,s,{get:()=>e[s],enumerable:!(i=k(e,s))||i.enumerable});return t};var C=t=>w(p({},"__esModule",{value:!0}),t);var A={};x(A,{DEFAULT_PAY_ORIGIN:()=>h,Radok:()=>b,default:()=>O});module.exports=C(A);var S='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';function g(t){let e=document.activeElement,o=document.createElement("div");o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true"),o.setAttribute("aria-label",t.title),Object.assign(o.style,{position:"fixed",inset:"0",zIndex:String(2147483e3),display:"flex",alignItems:"flex-start",justifyContent:"center",padding:"24px 16px",overflowY:"auto",background:"rgba(15, 18, 24, 0.55)",opacity:"0",transition:"opacity 160ms ease"}),o.style.setProperty("-webkit-tap-highlight-color","transparent");let i=document.createElement("div");Object.assign(i.style,{position:"relative",width:"100%",maxWidth:"420px",margin:"auto",borderRadius:"14px",background:"#ffffff",boxShadow:"0 24px 60px rgba(0,0,0,0.28)",overflow:"hidden",height:"560px",transition:"height 180ms ease"});let s=document.createElement("button");s.type="button",s.setAttribute("aria-label","Close checkout"),s.innerHTML='<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>',Object.assign(s.style,{position:"absolute",top:"10px",right:"10px",zIndex:"2",display:"inline-flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",padding:"0",border:"none",borderRadius:"999px",background:"rgba(15,18,24,0.06)",color:"#4a4f57",cursor:"pointer",font:"inherit",lineHeight:"0"}),s.addEventListener("click",t.onRequestClose);let n=document.createElement("iframe");n.src=t.src,n.title=t.title,n.setAttribute("allow","clipboard-write"),n.setAttribute("referrerpolicy","origin"),Object.assign(n.style,{display:"block",width:"100%",height:"100%",border:"0",opacity:"0",transition:"opacity 120ms ease"}),i.append(s,n),o.append(i);let d=r=>{r.target===o&&t.onRequestClose()};o.addEventListener("click",d);let a=r=>{if(r.key==="Escape"){r.stopPropagation(),t.onRequestClose();return}if(r.key!=="Tab")return;let l=Array.from(o.querySelectorAll(S));if(l.length===0)return;let y=l[0],f=l[l.length-1];r.shiftKey&&document.activeElement===y?(r.preventDefault(),f.focus()):!r.shiftKey&&document.activeElement===f&&(r.preventDefault(),y.focus())};document.addEventListener("keydown",a,!0);let u=document.body.style.overflow;document.body.style.overflow="hidden",document.body.append(o);let c=()=>{o.style.opacity="1"};return requestAnimationFrame(c),setTimeout(c,50),s.focus(),{iframe:n,reveal:()=>{n.style.opacity="1"},setHeight:r=>{let l=Math.max(320,window.innerHeight-48);i.style.height=`${Math.min(Math.max(r,320),l)}px`},destroy:()=>{document.removeEventListener("keydown",a,!0),o.removeEventListener("click",d),document.body.style.overflow=u,o.remove(),e?.focus?.()}}}var R="radok-checkout";function m(t){if(typeof t!="object"||t===null)return!1;let e=t;if(e.source!==R||typeof e.type!="string")return!1;switch(e.type){case"ready":case"close":return!0;case"resize":return typeof e.height=="number"&&Number.isFinite(e.height);case"success":return typeof e.reference=="string";case"error":return typeof e.code=="string"&&typeof e.message=="string";case"redirect":return typeof e.url=="string";default:return!0}}var h="https://pay.radokpay.com";function M(t){return new URL(t).origin}function b(t={}){let e=M(t.payOrigin??h);function o(i){if(typeof window>"u"||typeof document>"u")throw new Error("Radok checkout can only be opened in a browser.");if(!i.slug)throw new Error("Radok checkout needs a payment link slug.");let s=`${e}/pl/${encodeURIComponent(i.slug)}?embed=1&origin=${encodeURIComponent(window.location.origin)}`,n=null,d=!1,a=()=>{d||(d=!0,window.removeEventListener("message",u),n?.destroy(),n=null,i.onClose?.())};function u(c){if(c.origin!==e||!n||c.source!==n.iframe.contentWindow||!m(c.data))return;let r=c.data;switch(r.type){case"ready":n.reveal();break;case"resize":n.setHeight(r.height);break;case"success":i.onSuccess?.({reference:r.reference}),a();break;case"error":i.onError?.({code:r.code,message:r.message});break;case"redirect":a(),window.location.assign(r.url);break;case"close":a();break}}return window.addEventListener("message",u),n=g({src:s,title:"Secure checkout",onRequestClose:a}),{close:a}}return{checkout:o}}var O=b;
|
package/dist/radok.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Radok=(()=>{var
|
|
1
|
+
"use strict";var Radok=(()=>{var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},w=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of E(e))!v.call(t,s)&&s!==o&&p(t,s,{get:()=>e[s],enumerable:!(i=k(e,s))||i.enumerable});return t};var C=t=>w(p({},"__esModule",{value:!0}),t);var A={};x(A,{DEFAULT_PAY_ORIGIN:()=>h,Radok:()=>b,default:()=>O});var S='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';function g(t){let e=document.activeElement,o=document.createElement("div");o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true"),o.setAttribute("aria-label",t.title),Object.assign(o.style,{position:"fixed",inset:"0",zIndex:String(2147483e3),display:"flex",alignItems:"flex-start",justifyContent:"center",padding:"24px 16px",overflowY:"auto",background:"rgba(15, 18, 24, 0.55)",opacity:"0",transition:"opacity 160ms ease"}),o.style.setProperty("-webkit-tap-highlight-color","transparent");let i=document.createElement("div");Object.assign(i.style,{position:"relative",width:"100%",maxWidth:"420px",margin:"auto",borderRadius:"14px",background:"#ffffff",boxShadow:"0 24px 60px rgba(0,0,0,0.28)",overflow:"hidden",height:"560px",transition:"height 180ms ease"});let s=document.createElement("button");s.type="button",s.setAttribute("aria-label","Close checkout"),s.innerHTML='<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>',Object.assign(s.style,{position:"absolute",top:"10px",right:"10px",zIndex:"2",display:"inline-flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",padding:"0",border:"none",borderRadius:"999px",background:"rgba(15,18,24,0.06)",color:"#4a4f57",cursor:"pointer",font:"inherit",lineHeight:"0"}),s.addEventListener("click",t.onRequestClose);let n=document.createElement("iframe");n.src=t.src,n.title=t.title,n.setAttribute("allow","clipboard-write"),n.setAttribute("referrerpolicy","origin"),Object.assign(n.style,{display:"block",width:"100%",height:"100%",border:"0",opacity:"0",transition:"opacity 120ms ease"}),i.append(s,n),o.append(i);let d=r=>{r.target===o&&t.onRequestClose()};o.addEventListener("click",d);let a=r=>{if(r.key==="Escape"){r.stopPropagation(),t.onRequestClose();return}if(r.key!=="Tab")return;let l=Array.from(o.querySelectorAll(S));if(l.length===0)return;let y=l[0],f=l[l.length-1];r.shiftKey&&document.activeElement===y?(r.preventDefault(),f.focus()):!r.shiftKey&&document.activeElement===f&&(r.preventDefault(),y.focus())};document.addEventListener("keydown",a,!0);let u=document.body.style.overflow;document.body.style.overflow="hidden",document.body.append(o);let c=()=>{o.style.opacity="1"};return requestAnimationFrame(c),setTimeout(c,50),s.focus(),{iframe:n,reveal:()=>{n.style.opacity="1"},setHeight:r=>{let l=Math.max(320,window.innerHeight-48);i.style.height=`${Math.min(Math.max(r,320),l)}px`},destroy:()=>{document.removeEventListener("keydown",a,!0),o.removeEventListener("click",d),document.body.style.overflow=u,o.remove(),e?.focus?.()}}}var R="radok-checkout";function m(t){if(typeof t!="object"||t===null)return!1;let e=t;if(e.source!==R||typeof e.type!="string")return!1;switch(e.type){case"ready":case"close":return!0;case"resize":return typeof e.height=="number"&&Number.isFinite(e.height);case"success":return typeof e.reference=="string";case"error":return typeof e.code=="string"&&typeof e.message=="string";case"redirect":return typeof e.url=="string";default:return!0}}var h="https://pay.radokpay.com";function M(t){return new URL(t).origin}function b(t={}){let e=M(t.payOrigin??h);function o(i){if(typeof window>"u"||typeof document>"u")throw new Error("Radok checkout can only be opened in a browser.");if(!i.slug)throw new Error("Radok checkout needs a payment link slug.");let s=`${e}/pl/${encodeURIComponent(i.slug)}?embed=1&origin=${encodeURIComponent(window.location.origin)}`,n=null,d=!1,a=()=>{d||(d=!0,window.removeEventListener("message",u),n?.destroy(),n=null,i.onClose?.())};function u(c){if(c.origin!==e||!n||c.source!==n.iframe.contentWindow||!m(c.data))return;let r=c.data;switch(r.type){case"ready":n.reveal();break;case"resize":n.setHeight(r.height);break;case"success":i.onSuccess?.({reference:r.reference}),a();break;case"error":i.onError?.({code:r.code,message:r.message});break;case"redirect":a(),window.location.assign(r.url);break;case"close":a();break}}return window.addEventListener("message",u),n=g({src:s,title:"Secure checkout",onRequestClose:a}),{close:a}}return{checkout:o}}var O=b;return C(A);})();
|
|
2
2
|
Radok=Object.assign(Radok.default,Radok);
|
package/dist/radok.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var m='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';function f(r){let n=document.activeElement,o=document.createElement("div");o.setAttribute("role","dialog"),o.setAttribute("aria-modal","true"),o.setAttribute("aria-label",r.title),Object.assign(o.style,{position:"fixed",inset:"0",zIndex:String(2147483e3),display:"flex",alignItems:"flex-start",justifyContent:"center",padding:"24px 16px",overflowY:"auto",background:"rgba(15, 18, 24, 0.55)",opacity:"0",transition:"opacity 160ms ease"}),o.style.setProperty("-webkit-tap-highlight-color","transparent");let s=document.createElement("div");Object.assign(s.style,{position:"relative",width:"100%",maxWidth:"420px",margin:"auto",borderRadius:"14px",background:"#ffffff",boxShadow:"0 24px 60px rgba(0,0,0,0.28)",overflow:"hidden",height:"560px",transition:"height 180ms ease"});let i=document.createElement("button");i.type="button",i.setAttribute("aria-label","Close checkout"),i.innerHTML='<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>',Object.assign(i.style,{position:"absolute",top:"10px",right:"10px",zIndex:"2",display:"inline-flex",alignItems:"center",justifyContent:"center",width:"28px",height:"28px",padding:"0",border:"none",borderRadius:"999px",background:"rgba(15,18,24,0.06)",color:"#4a4f57",cursor:"pointer",font:"inherit",lineHeight:"0"}),i.addEventListener("click",r.onRequestClose);let t=document.createElement("iframe");t.src=r.src,t.title=r.title,t.setAttribute("allow","clipboard-write"),t.setAttribute("referrerpolicy","origin"),Object.assign(t.style,{display:"block",width:"100%",height:"100%",border:"0",opacity:"0",transition:"opacity 120ms ease"}),s.append(i,t),o.append(s);let d=e=>{e.target===o&&r.onRequestClose()};o.addEventListener("click",d);let a=e=>{if(e.key==="Escape"){e.stopPropagation(),r.onRequestClose();return}if(e.key!=="Tab")return;let l=Array.from(o.querySelectorAll(m));if(l.length===0)return;let p=l[0],y=l[l.length-1];e.shiftKey&&document.activeElement===p?(e.preventDefault(),y.focus()):!e.shiftKey&&document.activeElement===y&&(e.preventDefault(),p.focus())};document.addEventListener("keydown",a,!0);let u=document.body.style.overflow;document.body.style.overflow="hidden",document.body.append(o);let c=()=>{o.style.opacity="1"};return requestAnimationFrame(c),setTimeout(c,50),i.focus(),{iframe:t,reveal:()=>{t.style.opacity="1"},setHeight:e=>{let l=Math.max(320,window.innerHeight-48);s.style.height=`${Math.min(Math.max(e,320),l)}px`},destroy:()=>{document.removeEventListener("keydown",a,!0),o.removeEventListener("click",d),document.body.style.overflow=u,o.remove(),n?.focus?.()}}}var h="radok-checkout";function g(r){if(typeof r!="object"||r===null)return!1;let n=r;if(n.source!==h||typeof n.type!="string")return!1;switch(n.type){case"ready":case"close":return!0;case"resize":return typeof n.height=="number"&&Number.isFinite(n.height);case"success":return typeof n.reference=="string";case"error":return typeof n.code=="string"&&typeof n.message=="string";case"redirect":return typeof n.url=="string";default:return!0}}var b="https://pay.radokpay.com";function k(r){return new URL(r).origin}function E(r={}){let n=k(r.payOrigin??b);function o(s){if(typeof window>"u"||typeof document>"u")throw new Error("Radok checkout can only be opened in a browser.");if(!s.slug)throw new Error("Radok checkout needs a payment link slug.");let i=`${n}/pl/${encodeURIComponent(s.slug)}?embed=1&origin=${encodeURIComponent(window.location.origin)}`,t=null,d=!1,a=()=>{d||(d=!0,window.removeEventListener("message",u),t?.destroy(),t=null,s.onClose?.())};function u(c){if(c.origin!==n||!t||c.source!==t.iframe.contentWindow||!g(c.data))return;let e=c.data;switch(e.type){case"ready":t.reveal();break;case"resize":t.setHeight(e.height);break;case"success":s.onSuccess?.({reference:e.reference}),a();break;case"error":s.onError?.({code:e.code,message:e.message});break;case"redirect":a(),window.location.assign(e.url);break;case"close":a();break}}return window.addEventListener("message",u),t=f({src:i,title:"Secure checkout",onRequestClose:a}),{close:a}}return{checkout:o}}var S=E;export{b as DEFAULT_PAY_ORIGIN,E as Radok,S as default};
|