@paypercut/checkout-js 1.0.14 → 1.0.15
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 +20 -20
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/paypercut-checkout.iife.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ pnpm add @paypercut/checkout-js
|
|
|
68
68
|
|
|
69
69
|
## Quick Start
|
|
70
70
|
|
|
71
|
-
This returns a checkout session ID like `
|
|
71
|
+
This returns a checkout session ID like `01KB23M9EC960C50G3AH14FTTT`.
|
|
72
72
|
|
|
73
73
|
### 1. Embed the Checkout
|
|
74
74
|
|
|
@@ -79,7 +79,7 @@ import { PaypercutCheckout } from '@paypercut/checkout-js';
|
|
|
79
79
|
|
|
80
80
|
// Initialize the checkout
|
|
81
81
|
const checkout = PaypercutCheckout({
|
|
82
|
-
id: '
|
|
82
|
+
id: '01KB23M9EC960C50G3AH14FTTT', // Your checkout session ID from step 1
|
|
83
83
|
containerId: '#checkout' // CSS selector or HTMLElement
|
|
84
84
|
});
|
|
85
85
|
|
|
@@ -122,7 +122,7 @@ Creates a new checkout instance.
|
|
|
122
122
|
|
|
123
123
|
| Option | Type | Required | Default | Description |
|
|
124
124
|
|------------------|------|----------|---------|----------------------------------------------------------------------------------------------------------------------------|
|
|
125
|
-
| `id` | `string` | Yes | — | Checkout session identifier (e.g., `
|
|
125
|
+
| `id` | `string` | Yes | — | Checkout session identifier (e.g., `01KB23M9EC960C50G3AH14FTTT`) |
|
|
126
126
|
| `containerId` | `string \| HTMLElement` | Yes | — | CSS selector or element where iframe mounts |
|
|
127
127
|
| `locale` | `string` | No | `'auto'` | Locale for checkout UI. Options: `'auto'`, `'en'`, `'en-GB'`, `'bg'`, `'bg-BG'` |
|
|
128
128
|
| `lang` | `string` | No | `'auto'` | Locale for checkout UI. Options: `'auto'`, `'en'`, `'en-GB'`, `'bg'`, `'bg-BG'` |
|
|
@@ -137,7 +137,7 @@ Creates a new checkout instance.
|
|
|
137
137
|
|
|
138
138
|
```typescript
|
|
139
139
|
const checkout = PaypercutCheckout({
|
|
140
|
-
id: '
|
|
140
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
141
141
|
containerId: '#checkout-container'
|
|
142
142
|
});
|
|
143
143
|
```
|
|
@@ -146,7 +146,7 @@ const checkout = PaypercutCheckout({
|
|
|
146
146
|
|
|
147
147
|
```typescript
|
|
148
148
|
const checkout = PaypercutCheckout({
|
|
149
|
-
id: '
|
|
149
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
150
150
|
containerId: '#checkout-container',
|
|
151
151
|
locale: 'en', // 'auto' | 'en' | 'en-GB' | 'bg' | 'bg-BG'
|
|
152
152
|
lang: 'en', // 'auto' | 'en' | 'en-GB' | 'bg' | 'bg-BG'
|
|
@@ -161,7 +161,7 @@ const checkout = PaypercutCheckout({
|
|
|
161
161
|
|
|
162
162
|
```typescript
|
|
163
163
|
const checkout = PaypercutCheckout({
|
|
164
|
-
id: '
|
|
164
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
165
165
|
containerId: '#checkout-container',
|
|
166
166
|
wallet_options: [] // No Apple Pay or Google Pay buttons
|
|
167
167
|
});
|
|
@@ -171,7 +171,7 @@ const checkout = PaypercutCheckout({
|
|
|
171
171
|
|
|
172
172
|
```typescript
|
|
173
173
|
const checkout = PaypercutCheckout({
|
|
174
|
-
id: '
|
|
174
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
175
175
|
containerId: '#checkout-container',
|
|
176
176
|
wallet_options: ['apple_pay'] // Only Apple Pay, no Google Pay
|
|
177
177
|
});
|
|
@@ -181,7 +181,7 @@ const checkout = PaypercutCheckout({
|
|
|
181
181
|
|
|
182
182
|
```typescript
|
|
183
183
|
const checkout = PaypercutCheckout({
|
|
184
|
-
id: '
|
|
184
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
185
185
|
containerId: '#checkout-container',
|
|
186
186
|
form_only: true // No Pay Now button inside checkout
|
|
187
187
|
});
|
|
@@ -277,7 +277,7 @@ Subscribe to events using the `on()` method. You can use string event names or t
|
|
|
277
277
|
**Using string event names:**
|
|
278
278
|
|
|
279
279
|
```ts
|
|
280
|
-
const checkout = PaypercutCheckout({ id: '
|
|
280
|
+
const checkout = PaypercutCheckout({ id: '01KB23M9EC960C50G3AH14FTTT', containerId: '#checkout' });
|
|
281
281
|
|
|
282
282
|
checkout.on('loaded', () => {
|
|
283
283
|
console.log('Checkout loaded');
|
|
@@ -305,7 +305,7 @@ checkout.on('expired', () => {
|
|
|
305
305
|
```ts
|
|
306
306
|
import { PaypercutCheckout, SdkEvent } from '@paypercut/checkout-js';
|
|
307
307
|
|
|
308
|
-
const checkout = PaypercutCheckout({ id: '
|
|
308
|
+
const checkout = PaypercutCheckout({ id: '01KB23M9EC960C50G3AH14FTTT', containerId: '#checkout' });
|
|
309
309
|
|
|
310
310
|
checkout.on(SdkEvent.Loaded, () => {
|
|
311
311
|
console.log('Checkout loaded');
|
|
@@ -452,7 +452,7 @@ checkout.failFormValidation('apple_pay', [
|
|
|
452
452
|
import { PaypercutCheckout, SdkEvent } from '@paypercut/checkout-js';
|
|
453
453
|
|
|
454
454
|
const checkout = PaypercutCheckout({
|
|
455
|
-
id: '
|
|
455
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
456
456
|
containerId: '#checkout',
|
|
457
457
|
wallet_options: ['apple_pay', 'google_pay']
|
|
458
458
|
});
|
|
@@ -633,7 +633,7 @@ type ApiErrorPayload =
|
|
|
633
633
|
|
|
634
634
|
```json
|
|
635
635
|
{
|
|
636
|
-
"checkoutId": "
|
|
636
|
+
"checkoutId": "01KB23M9EC960C50G3AH14FTTT",
|
|
637
637
|
"code": "card_validation_error",
|
|
638
638
|
"message": "Card details are incomplete or invalid",
|
|
639
639
|
"status_code": 400,
|
|
@@ -696,28 +696,28 @@ The SDK forwards whatever Hosted Checkout sends for 3DS events. Shapes may evolv
|
|
|
696
696
|
// threeds_started
|
|
697
697
|
{
|
|
698
698
|
type: 'THREEDS_START_FLOW',
|
|
699
|
-
checkoutId: '
|
|
699
|
+
checkoutId: '01KB23M9EC960C50G3AH14FTTT',
|
|
700
700
|
// additional context as provided by Hosted Checkout (e.g., method, acsUrl)
|
|
701
701
|
}
|
|
702
702
|
|
|
703
703
|
// threeds_complete
|
|
704
704
|
{
|
|
705
705
|
type: 'THREEDS_COMPLETE',
|
|
706
|
-
checkoutId: '
|
|
706
|
+
checkoutId: '01KB23M9EC960C50G3AH14FTTT',
|
|
707
707
|
// authentication result context (e.g., status: 'Y' | 'A' | 'C' | 'D')
|
|
708
708
|
}
|
|
709
709
|
|
|
710
710
|
// threeds_canceled
|
|
711
711
|
{
|
|
712
712
|
type: 'THREEDS_CANCELED',
|
|
713
|
-
checkoutId: '
|
|
713
|
+
checkoutId: '01KB23M9EC960C50G3AH14FTTT',
|
|
714
714
|
}
|
|
715
715
|
|
|
716
716
|
// threeds_error (non-terminal)
|
|
717
717
|
// Note: terminal failures will also be emitted on `error` with ApiErrorPayload
|
|
718
718
|
{
|
|
719
719
|
type: 'THREEDS_ERROR',
|
|
720
|
-
checkoutId: '
|
|
720
|
+
checkoutId: '01KB23M9EC960C50G3AH14FTTT',
|
|
721
721
|
error?: ApiErrorPayload,
|
|
722
722
|
}
|
|
723
723
|
```
|
|
@@ -741,7 +741,7 @@ Tip: Prefer subscribing with the SdkEvent enum for stronger typing.
|
|
|
741
741
|
<script src="https://cdn.jsdelivr.net/npm/@paypercut/checkout-js@1.0.14/dist/paypercut-checkout.iife.min.js"></script>
|
|
742
742
|
<script>
|
|
743
743
|
const checkout = PaypercutCheckout({
|
|
744
|
-
id: '
|
|
744
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
745
745
|
containerId: '#checkout',
|
|
746
746
|
locale: 'en',
|
|
747
747
|
ui_mode: 'embedded',
|
|
@@ -769,7 +769,7 @@ Tip: Prefer subscribing with the SdkEvent enum for stronger typing.
|
|
|
769
769
|
import { PaypercutCheckout } from '@paypercut/checkout-js';
|
|
770
770
|
|
|
771
771
|
const checkout = PaypercutCheckout({
|
|
772
|
-
id: '
|
|
772
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
773
773
|
containerId: '#checkout',
|
|
774
774
|
locale: 'auto',
|
|
775
775
|
ui_mode: 'embedded',
|
|
@@ -1001,7 +1001,7 @@ The SDK automatically resizes the iframe to match the checkout content height. T
|
|
|
1001
1001
|
|
|
1002
1002
|
```javascript
|
|
1003
1003
|
const checkout = PaypercutCheckout({
|
|
1004
|
-
id: '
|
|
1004
|
+
id: '01KB23M9EC960C50G3AH14FTTT',
|
|
1005
1005
|
containerId: '#checkout-mount'
|
|
1006
1006
|
});
|
|
1007
1007
|
checkout.render();
|
|
@@ -1084,7 +1084,7 @@ async function loadCheckout() {
|
|
|
1084
1084
|
// Load when user clicks pay button
|
|
1085
1085
|
payButton.addEventListener('click', async () => {
|
|
1086
1086
|
const PaypercutCheckout = await loadCheckout();
|
|
1087
|
-
const checkout = PaypercutCheckout({ id: '
|
|
1087
|
+
const checkout = PaypercutCheckout({ id: '01KB23M9EC960C50G3AH14FTTT' });
|
|
1088
1088
|
checkout.render();
|
|
1089
1089
|
});
|
|
1090
1090
|
```
|
package/dist/index.cjs
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var PaypercutCheckout=function(){"use strict";class e{constructor(){this.handlers=new Map}on(e,t){return this.handlers.has(e)||this.handlers.set(e,new Set),this.handlers.get(e).add(t),()=>this.off(e,t)}once(e,t){const s=(...o)=>{t(...o),this.off(e,s)};return this.on(e,s)}off(e,t){this.handlers.get(e)?.delete(t)}emit(e,...t){this.handlers.get(e)?.forEach(s=>{try{s(...t)}catch(t){console.error(`[Emitter] Error in ${e} handler:`,t)}})}clear(){this.handlers.clear()}}const t={version:"1.0.
|
|
1
|
+
var PaypercutCheckout=function(){"use strict";class e{constructor(){this.handlers=new Map}on(e,t){return this.handlers.has(e)||this.handlers.set(e,new Set),this.handlers.get(e).add(t),()=>this.off(e,t)}once(e,t){const s=(...o)=>{t(...o),this.off(e,s)};return this.on(e,s)}off(e,t){this.handlers.get(e)?.delete(t)}emit(e,...t){this.handlers.get(e)?.forEach(s=>{try{s(...t)}catch(t){console.error(`[Emitter] Error in ${e} handler:`,t)}})}clear(){this.handlers.clear()}}const t={version:"1.0.15",defaultCheckoutOrigin:"https://buy.paypercut.io",allowedOrigins:["https://buy.paypercut.io"]};function s(e){return t.defaultCheckoutOrigin}const o=new Set(["bg","bg-BG","en","en-GB","el","el-GR","ro","ro-RO","hr","hr-HR","pl","pl-PL","cs","cs-CZ","sl","sl-SI","sk","sk-SK"]);function i(e){return e&&"auto"!==e?o.has(e)?e:(console.warn(`[PaypercutCheckout] Locale "${e}" is not supported. Falling back to "en".`),"en"):"en"}var r,a,n,h;function c(e){return Object.values(a).includes(e)}function d(e){return Object.values(n).includes(e)}function l(e){var t;if(e)return t=e,Object.values(r).includes(t)?e:void console.warn(`[PaypercutCheckout] Invalid ui_mode: "${e}". Valid options: ${Object.values(r).join(", ")}`)}!function(e){e.EMBEDDED="embedded"}(r||(r={})),function(e){e.CARD="card"}(a||(a={})),function(e){e.APPLE_PAY="apple_pay",e.GOOGLE_PAY="google_pay"}(n||(n={})),function(e){e.Loaded="loaded",e.Success="success",e.Error="error",e.Expired="expired",e.Resize="resize",e.ThreeDSComplete="threeds_complete",e.ThreeDSError="threeds_error",e.ThreeDSCanceled="threeds_canceled",e.ThreeDSStarted="threeds_started",e.FormValidation="form_validation"}(h||(h={}));class m{constructor(t){this.options=t,this.emitter=new e,this.mounted=!1,this.destroyed=!1,this.iframe=null,this.threeDSModal=null,this.threeDSIframe=null,this.messageHandler=this.onMessage.bind(this),window.addEventListener("message",this.messageHandler)}buildSrc(){const e=s(this.options.hostedCheckoutUrl),t=new URL(`/c/${this.options.id}`,e);if(this.options.locale){const e=i(this.options.locale);t.searchParams.set("locale",e)}if(this.options.lang){const e=i(this.options.lang);t.searchParams.set("lang",e)}{const e=l(this.options.ui_mode??r.EMBEDDED);e&&t.searchParams.set("ui_mode",e)}if(this.options.payment_methods&&this.options.payment_methods.length>0){(function(e){const t=[];for(const s of e)c(s)?t.push(s):console.warn(`[PaypercutCheckout] Invalid payment method: "${s}". Skipping.`);return 0===t.length&&(console.warn('[PaypercutCheckout] No valid payment methods provided. Defaulting to "card".'),t.push(a.CARD)),t})(this.options.payment_methods).forEach(e=>{t.searchParams.append("payment_methods",e)})}if(void 0!==this.options.wallet_options)if(0===this.options.wallet_options.length)t.searchParams.set("wallet_options",null);else{(function(e){const t=[];for(const s of e)d(s)?t.push(s):console.warn(`[PaypercutCheckout] Invalid wallet option: "${s}". Skipping.`);return t})(this.options.wallet_options).forEach(e=>{t.searchParams.append("wallet_options",e)})}return this.options.appearance?.preset&&t.searchParams.set("preset",this.options.appearance.preset),void 0!==this.options.form_only&&t.searchParams.set("form_only",String(this.options.form_only)),void 0!==this.options.validate_form&&t.searchParams.set("validate_form",String(this.options.validate_form)),t.toString()}getContainer(){const e="string"==typeof this.options.containerId?document.querySelector(this.options.containerId):this.options.containerId;if(!e)throw new Error(`Container not found: ${this.options.containerId}`);return e}onMessage(e){if(s=e.origin,!t.allowedOrigins.includes(s))return;var s;const o=e.data;if(o&&"object"==typeof o&&"type"in o&&(!o.checkoutId||o.checkoutId===this.options.id))switch(o.type){case"CHECKOUT_LOADED":this.emitter.emit(h.Loaded);break;case"CHECKOUT_SUCCESS":const{payment_method:e={}}=o;this.emitter.emit(h.Success,{payment_method:e});break;case"CHECKOUT_ERROR":this.emitter.emit(h.Error,(o&&o.error)??o);break;case"CHECKOUT_EXPIRED":this.emitter.emit(h.Expired);break;case"CHECKOUT_RESIZE":this.emitter.emit(h.Resize,o.height),this.handleResize(o.height);break;case"THREEDS_START_FLOW":this.show3DSModal(o),this.emitter.emit(h.ThreeDSStarted);break;case"THREEDS_READY":this.handle3DSReady();break;case"THREEDS_COMPLETE":this.postToIframe(o),this.close3DSModal(),this.emitter.emit(h.ThreeDSComplete);break;case"THREEDS_CANCELED":this.postToIframe(o),this.close3DSModal(),this.emitter.emit(h.ThreeDSCanceled);break;case"THREEDS_ERROR":this.postToIframe(o),this.close3DSModal(),this.emitter.emit(h.ThreeDSError,o.error);break;case"FORM_VALIDATION":this.emitter.emit(h.FormValidation,{checkoutId:o.checkoutId,wallet:o.wallet})}}render(){if(!this.mounted)try{const e=this.getContainer();this.iframe=document.createElement("iframe"),this.iframe.id="paypercut-checkout-iframe",this.iframe.src=this.buildSrc(),this.iframe.allow="payment *; clipboard-write",this.iframe.setAttribute("frameborder","0"),this.iframe.setAttribute("allowpaymentrequest","true"),this.iframe.setAttribute("sandbox","allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"),Object.assign(this.iframe.style,{width:"100%",height:"100%",border:"none",display:"block"}),e.appendChild(this.iframe),this.mounted=!0}catch(e){throw console.error("[PaypercutCheckout] Failed to render:",e),e}}submit(){if(this.mounted)try{this.postToIframe({type:"START_PROCESSING",checkoutId:this.options.id})}catch(e){throw console.error("[PaypercutCheckout] Failed to submit payment:",e),e}}postToIframe(e){if(!this.iframe?.contentWindow)return void console.error("[PaypercutCheckout] Cannot post message: iframe not mounted");const t=s(this.options.hostedCheckoutUrl);this.iframe.contentWindow.postMessage(e,t)}handleResize(e){!this.iframe||"number"!=typeof e||e<=0||(this.iframe.style.height=`${e}px`)}show3DSModal(e){this.threeDSModal=document.createElement("div"),this.threeDSModal.id="paypercut-3ds-modal",Object.assign(this.threeDSModal.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",zIndex:"999999",background:"rgba(0, 0, 0, 0.4)"}),this.threeDSIframe=document.createElement("iframe");const t=s(this.options.hostedCheckoutUrl),o=new URL(`/c/${this.options.id}/threeds`,t);o.searchParams.set("sessionId",e.sessionId),o.searchParams.set("step",e.step),e.challengeUrl&&o.searchParams.set("challengeUrl",e.challengeUrl),e.acsTransactionId&&o.searchParams.set("acsTransactionId",e.acsTransactionId),e.threeDSVersion&&o.searchParams.set("threeDSVersion",e.threeDSVersion),o.searchParams.set("liveMode",String(e.liveMode??!1)),this.threeDSIframe.src=o.toString(),this.threeDSIframe.allow="payment *",this.threeDSIframe.setAttribute("frameborder","0"),Object.assign(this.threeDSIframe.style,{minWidth:"400px",minHeight:"400px",border:"none",borderRadius:"8px",display:"block",background:"transparent"}),this.threeDSModal.appendChild(this.threeDSIframe),document.body.appendChild(this.threeDSModal),this.pending3DSData=e}handle3DSReady(){if(!this.pending3DSData||!this.threeDSIframe?.contentWindow)return void console.error("[PaypercutCheckout] No pending 3DS data or iframe not ready");const e=s(this.options.hostedCheckoutUrl);this.threeDSIframe.contentWindow.postMessage({type:"THREEDS_INIT",checkoutId:this.options.id},e)}close3DSModal(){this.threeDSModal&&(this.threeDSModal.remove(),this.threeDSModal=null),this.threeDSIframe=null,delete this.pending3DSData}destroy(){if(!this.destroyed){if(this.iframe)try{this.iframe.remove(),this.iframe=null}catch(e){console.error("[PaypercutCheckout] Error removing iframe:",e)}this.close3DSModal(),this.mounted=!1,this.destroyed=!0,window.removeEventListener("message",this.messageHandler),this.emitter.clear()}}on(e,t){return this.emitter.on(e,t)}once(e,t){return this.emitter.once(e,t)}off(e,t){this.emitter.off(e,t)}isMounted(){return this.mounted}completeFormValidation(e){this.mounted?this.postToIframe({type:"FORM_VALIDATION_COMPLETED",checkoutId:this.options.id,wallet:e,status:"success"}):console.warn("[PaypercutCheckout] Cannot complete form validation: not mounted")}failFormValidation(e,t){this.mounted?this.postToIframe({type:"FORM_VALIDATION_COMPLETED",checkoutId:this.options.id,wallet:e,status:"failed",errors:t}):console.warn("[PaypercutCheckout] Cannot fail form validation: not mounted")}}const p=function(e){return new m(e)};return p.version=t.version,p}();
|
|
2
2
|
//# sourceMappingURL=paypercut-checkout.iife.min.js.map
|