@flittpayments/js-sdk 2.0.9 → 2.0.11-alpha.0

package/README.md

@@ -1,4 +1,5 @@
-![Flitt](https://flitt.com/wp-content/uploads/2024/09/Group.svg)
+![Flitt](https://flitt.com/wp-content/uploads/2025/08/light-logo.svg)
+
 # Flitt JavaScript SDK
 
 [![NPM Version](https://img.shields.io/npm/v/@flittpayments/js-sdk.svg)](https://www.npmjs.com/package/@flittpayments/js-sdk)
@@ -21,20 +22,21 @@ or add dependency manually:
 ```json
 {
   "dependency": {
-    "@flittpayments/js-sdk":"^2.0"
+    "@flittpayments/js-sdk": "^2.0"
   }
 }
 ```
+
 ### Manual installation
 
 If you do not use NPM, you can download the
 [latest release](https://github.com/flittpayments/flitt-js-sdk/releases).
 Or clone from GitHub the latest developer version
+
 ```cmd
 git clone git@github.com:flittpayments/js-sdk.git
 ```
 
-
 ## Quick start
 
 ```html
@@ -47,20 +49,22 @@ git clone git@github.com:flittpayments/js-sdk.git
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   </head>
   <body>
     <script src="https://cdn.jsdelivr.net/npm/@flittpayments/js-sdk"></script>
     <script>
-    $checkout('Api').scope(function(){
-        this.request('api.checkout.form','request', { Parameters } ).done(function(model){
-            model.sendResponse();
-            console.log(model.attr('order'));
-        }).fail(function(model){
-            console.log(model.attr('error'));
-        });
-    });
+      $checkout('Api').scope(function () {
+        this.request('api.checkout.form', 'request', { Parameters })
+          .done(function (model) {
+            model.sendResponse()
+            console.log(model.attr('order'))
+          })
+          .fail(function (model) {
+            console.log(model.attr('error'))
+          })
+      })
     </script>
   </body>
 </html>
@@ -72,26 +76,29 @@ git clone git@github.com:flittpayments/js-sdk.git
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   </head>
   <body>
     <script src="https://cdn.jsdelivr.net/npm/@flittpayments/js-sdk"></script>
     <div class="payment-button-container"></div>
     <script>
-    $checkout.get('PaymentButton', {
-      element: '.payment-button-container',
-      style: {
-        type: 'long', // short|long
-        color: 'black', // black|white
-        height: 38 // button height
-      },
-      data: { Parameters }
-    }).on('success', function(model) {
-      console.log('success', model);
-    }).on('error', function(model) {
-      console.log('error', model);
-    });
+      $checkout
+        .get('PaymentButton', {
+          element: '.payment-button-container',
+          style: {
+            type: 'long', // short|long
+            color: 'black', // black|white
+            height: 38, // button height
+          },
+          data: { Parameters },
+        })
+        .on('success', function (model) {
+          console.log('success', model)
+        })
+        .on('error', function (model) {
+          console.log('error', model)
+        })
     </script>
   </body>
 </html>
@@ -103,15 +110,15 @@ git clone git@github.com:flittpayments/js-sdk.git
 
 ```json
 {
-  "payment_system":"Supported payment systems: card, p24",
-  "token":"host-to-host generated token",
-  "card_number":"16/19-digits number",
-  "expiry_date":"Supported formats: MM/YY, MM/YYYY, MMYY, MMYYYY",
-  "cvv2":"3-digits number"
+  "payment_system": "Supported payment systems: card, p24",
+  "token": "host-to-host generated token",
+  "card_number": "16/19-digits number",
+  "expiry_date": "Supported formats: MM/YY, MM/YYYY, MMYY, MMYYYY",
+  "cvv2": "3-digits number"
 }
 ```
 
-Where token is value, returned in payment gateway response from API endpoint /api/checkout/token 
+Where token is value, returned in payment gateway response from API endpoint /api/checkout/token
 (more details in API documentation: https://docs.flitt.com/api/create-order/ )
 
 request example:
@@ -137,10 +144,10 @@ response example:
 
 ```json
 {
-    "response": {
-        "response_status": "success",
-        "token": "7ddb3fbb03d60787b3972ef8d6fad0f97f7d2f86"
-    }
+  "response": {
+    "response_status": "success",
+    "token": "7ddb3fbb03d60787b3972ef8d6fad0f97f7d2f86"
+  }
 }
 ```
 
@@ -148,13 +155,13 @@ response example:
 
 ```json
 {
-  "payment_system":"Supported payment systems: card, p24",
-  "merchant_id":"1396424",
-  "currency":"USD",
-  "amount":"100.20",
-  "card_number":"16/19-digits number",
-  "expiry_date":"Supported formats: MM/YY, MM/YYYY, MMYY, MMYYYY",
-  "cvv2":"3-digits number"
+  "payment_system": "Supported payment systems: card, p24",
+  "merchant_id": "1396424",
+  "currency": "USD",
+  "amount": "100.20",
+  "card_number": "16/19-digits number",
+  "expiry_date": "Supported formats: MM/YY, MM/YYYY, MMYY, MMYYYY",
+  "cvv2": "3-digits number"
 }
 ```
 
@@ -162,10 +169,11 @@ optional merchant parameters:
 
 ```json
 {
-  "email":"customer email address",
-  "phone":"customer phone number"
+  "email": "customer email address",
+  "phone": "customer phone number"
 }
 ```
+
 ## Usage example
 
 https://jsfiddle.net/flitt/on8ydsgq/

package/dist/cjs/checkout.js

@@ -361,8 +361,6 @@ const getAppleSessionConfig = config => {
   if (options.requestPayerName) requiredShippingContactFields.push('name');
   if (options.requestPayerEmail) requiredShippingContactFields.push('email');
   if (options.requestPayerPhone) requiredShippingContactFields.push('phone');
-  //method.data.recurringPaymentRequest = recurringPaymentRequest
-  //method.data.deferredPaymentRequest = deferredPaymentRequest
   return {
     version: method.data.version,
     countryCode: method.data.countryCode,
@@ -384,34 +382,16 @@ const getAppleSessionConfig = config => {
     requiredShippingContactFields
   };
 };
-
-// export const deferredPaymentRequest = {
-//   paymentDescription: 'Бронювання готельного номеру',
-//   deferredBilling: {
-//     label: 'Бронювання',
-//     amount: '50.00',
-//     type: 'final',
-//     paymentTiming: 'deferred',
-//     deferredPaymentDate: new Date('2026-01-05'),
-//   },
-//   managementURL: 'https://flitt.ksv.app/manage-booking.html',
-// }
-
-// export const recurringPaymentRequest = {
-//   paymentDescription: 'Місячна підписка',
-//   regularBilling: {
-//     label: 'Підписка на місяць',
-//     amount: '20.00',
-//     type: 'final',
-//     paymentTiming: 'recurring',
-//     recurringPaymentStartDate: new Date('2026-01-01T00:00:00'),
-//     recurringPaymentIntervalUnit: 'month',
-//     recurringPaymentIntervalCount: 6,
-//     recurringPaymentEndDate: new Date('2028-01-01T00:00:00'),
-//   },
-//   managementURL: 'https://flitt.ksv.app/manage-subscription.html',
-// }
-
+const buildUrl = (origin, path = '', params = {}) => {
+  const query = Object.keys(params).filter(function (key) {
+    return params[key] !== undefined && params[key] !== null;
+  }).map(function (key) {
+    return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
+  }).join('&');
+  const url = [origin, path].join('');
+  const separator = !!~url.indexOf('?') ? '&' : '?';
+  return query ? `${url}${separator}${query}` : url;
+};
 const getFunction = path => {
   const props = path.split('.');
   const value = props.reduce((acc, cur) => {
@@ -452,6 +432,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   PromiseWithResolvers: PromiseWithResolvers,
   addAttr: addAttr,
   addClass: addClass,
+  buildUrl: buildUrl,
   cleanObject: cleanObject,
   createElement: createElement,
   cssUnit: cssUnit,
@@ -1203,7 +1184,12 @@ const Modal = Module.extend({
     this.addEvent(this.find('.flitt-modal-close'), 'click', 'closeModal');
     this.addEvent(this.find('.flitt-modal-title a'), 'click', 'submitForm');
     this.initScrollbar();
-    this.body.appendChild(this.modal);
+    this.submitToIframe();
+  },
+  submitToIframe() {
+    if (this.modal) {
+      this.body.appendChild(this.modal);
+    }
     if (this.form) {
       this.form.submit();
     }
@@ -1503,6 +1489,7 @@ const Response = Model.extend({
 
 const Api = Module.extend({
   defaults: {
+    version: 'default',
     origin: ApiOrigin,
     endpoint: ApiEndpoint,
     container: 'body',
@@ -1515,7 +1502,10 @@ const Api = Module.extend({
     this.initParams(params);
   },
   url(type, url) {
-    return [this.params.origin, this.params.endpoint[type] || '/', url || ''].join('');
+    return buildUrl(this.params.origin, this.params.endpoint[type], {
+      version: this.params.version,
+      origin: location.origin
+    });
   },
   extendParams(params) {
     this.utils.extend(this.params, params);
@@ -2027,6 +2017,7 @@ const PaymentElement = Module.extend({
 
 const PaymentButton = Module.extend({
   defaults: {
+    version: 'default',
     origin: ApiOrigin,
     endpoint: ApiEndpoint,
     methods: ['apple', 'google'],
@@ -2052,6 +2043,7 @@ const PaymentButton = Module.extend({
     this.supported = false;
     this.params = {
       element: params.element,
+      version: params.version || this.defaults.version,
       methods: params.methods || this.defaults.methods,
       origin: params.origin || this.defaults.origin,
       endpoint: this.utils.extend({}, this.defaults.endpoint, params.endpoint),
@@ -2076,6 +2068,7 @@ const PaymentButton = Module.extend({
       this.api = api;
     } else {
       this.api = new Api({
+        version: this.params.version,
         origin: this.params.origin,
         endpoint: this.params.endpoint
       });
@@ -2279,7 +2272,7 @@ const PaymentContainer = Module.extend({
       css.image = this.getAppleSvg(style.color);
       css.label = this.getAppleLabel(lang, style.mode);
     }
-    {
+    if (css) {
       this.utils.forEach(css, function (value, name) {
         element.style.setProperty(['--', name].join(''), value);
       });

package/dist/esm/checkout.js

@@ -395,8 +395,6 @@ const getAppleSessionConfig = (config) => {
   if (options.requestPayerName) requiredShippingContactFields.push('name');
   if (options.requestPayerEmail) requiredShippingContactFields.push('email');
   if (options.requestPayerPhone) requiredShippingContactFields.push('phone');
-  //method.data.recurringPaymentRequest = recurringPaymentRequest
-  //method.data.deferredPaymentRequest = deferredPaymentRequest
   return {
     version: method.data.version,
     countryCode: method.data.countryCode,
@@ -419,32 +417,19 @@ const getAppleSessionConfig = (config) => {
   }
 };
 
-// export const deferredPaymentRequest = {
-//   paymentDescription: 'Бронювання готельного номеру',
-//   deferredBilling: {
-//     label: 'Бронювання',
-//     amount: '50.00',
-//     type: 'final',
-//     paymentTiming: 'deferred',
-//     deferredPaymentDate: new Date('2026-01-05'),
-//   },
-//   managementURL: 'https://flitt.ksv.app/manage-booking.html',
-// }
-
-// export const recurringPaymentRequest = {
-//   paymentDescription: 'Місячна підписка',
-//   regularBilling: {
-//     label: 'Підписка на місяць',
-//     amount: '20.00',
-//     type: 'final',
-//     paymentTiming: 'recurring',
-//     recurringPaymentStartDate: new Date('2026-01-01T00:00:00'),
-//     recurringPaymentIntervalUnit: 'month',
-//     recurringPaymentIntervalCount: 6,
-//     recurringPaymentEndDate: new Date('2028-01-01T00:00:00'),
-//   },
-//   managementURL: 'https://flitt.ksv.app/manage-subscription.html',
-// }
+const buildUrl = (origin, path = '', params = {}) => {
+  const query = Object.keys(params)
+    .filter(function (key) {
+      return params[key] !== undefined && params[key] !== null
+    })
+    .map(function (key) {
+      return `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+    })
+    .join('&');
+  const url = [origin, path].join('');
+  const separator = !!~url.indexOf('?') ? '&' : '?';
+  return query ? `${url}${separator}${query}` : url
+};
 
 const getFunction = (path) => {
   const props = path.split('.');
@@ -484,6 +469,7 @@ var Utils = /*#__PURE__*/Object.freeze({
   PromiseWithResolvers: PromiseWithResolvers,
   addAttr: addAttr,
   addClass: addClass,
+  buildUrl: buildUrl,
   cleanObject: cleanObject,
   createElement: createElement,
   cssUnit: cssUnit,
@@ -1320,7 +1306,12 @@ const Modal = Module.extend({
     this.addEvent(this.find('.flitt-modal-close'), 'click', 'closeModal');
     this.addEvent(this.find('.flitt-modal-title a'), 'click', 'submitForm');
     this.initScrollbar();
-    this.body.appendChild(this.modal);
+    this.submitToIframe();
+  },
+  submitToIframe() {
+    if (this.modal) {
+      this.body.appendChild(this.modal);
+    }
     if (this.form) {
       this.form.submit();
     }
@@ -1625,6 +1616,7 @@ const Response = Model.extend({
 
 const Api = Module.extend({
   defaults: {
+    version: 'default',
     origin: ApiOrigin,
     endpoint: ApiEndpoint,
     container: 'body',
@@ -1638,7 +1630,10 @@ const Api = Module.extend({
     this.initParams(params);
   },
   url(type, url) {
-    return [this.params.origin, this.params.endpoint[type] || '/', url || ''].join('')
+    return buildUrl(this.params.origin, this.params.endpoint[type], {
+      version: this.params.version,
+      origin: location.origin,
+    })
   },
   extendParams(params) {
     this.utils.extend(this.params, params);
@@ -2161,6 +2156,7 @@ const PaymentElement = Module.extend({
 
 const PaymentButton = Module.extend({
   defaults: {
+    version: 'default',
     origin: ApiOrigin,
     endpoint: ApiEndpoint,
     methods: ['apple', 'google'],
@@ -2186,6 +2182,7 @@ const PaymentButton = Module.extend({
     this.supported = false;
     this.params = {
       element: params.element,
+      version: params.version || this.defaults.version,
       methods: params.methods || this.defaults.methods,
       origin: params.origin || this.defaults.origin,
       endpoint: this.utils.extend({}, this.defaults.endpoint, params.endpoint),
@@ -2210,6 +2207,7 @@ const PaymentButton = Module.extend({
       this.api = api;
     } else {
       this.api = new Api({
+        version: this.params.version,
         origin: this.params.origin,
         endpoint: this.params.endpoint,
       });
@@ -2422,7 +2420,7 @@ const PaymentContainer = Module.extend({
       css.image = this.getAppleSvg(style.color);
       css.label = this.getAppleLabel(lang, style.mode);
     }
-    {
+    if (css) {
       this.utils.forEach(css, function (value, name) {
         element.style.setProperty(['--', name].join(''), value);
       });

package/dist/types/browser.d.ts

@@ -0,0 +1,2 @@
+export default $checkout;
+import $checkout from './module.js';

package/dist/types/common.d.ts

@@ -0,0 +1,2 @@
+export default $checkout;
+import $checkout from './module.js';

package/dist/types/core/component.d.ts

@@ -0,0 +1,5 @@
+export function Component(name: any, params: any): any;
+export namespace Component {
+    function get(name: any, params: any): {};
+    function add(name: any, module: any): typeof Component;
+}

package/dist/types/core/config.d.ts

@@ -0,0 +1,134 @@
+export const ApiOrigin: "https://pay.flitt.com";
+export namespace ApiEndpoint {
+    let gateway: string;
+    let element: string;
+}
+export const ProxyUrl: "http://secure-redirect.cloudipsp.com/submit/";
+export const GooglePayApi: "https://pay.google.com/gp/p/js/pay.js";
+export namespace GoogleBaseRequest {
+    let apiVersion: number;
+    let apiVersionMinor: number;
+    let allowedPaymentMethods: {
+        type: string;
+        parameters: {
+            allowedAuthMethods: string[];
+            allowedCardNetworks: string[];
+        };
+    }[];
+}
+export const PaymentMethodsConfig: {
+    url: string;
+    name: string;
+    path: string;
+    callback(PaymentsClient: any): any;
+}[];
+export const GooglePayLanguages: string[];
+export namespace PaymentRequestDetails {
+    namespace total {
+        let label: string;
+        namespace amount {
+            let currency: string;
+            let value: string;
+        }
+    }
+}
+export namespace ApiFrameCss {
+    let width: string;
+    let height: string;
+    let left: string;
+    let bottom: string;
+    let position: string;
+    let border: string;
+}
+export const ButtonFrameCss: {
+    border: string;
+    margin: string;
+    padding: string;
+    display: string;
+    width: string;
+    'min-width': string;
+    background: string;
+    position: string;
+    opacity: string;
+    overflow: string;
+    height: string;
+    outline: string;
+    'z-index': string;
+};
+export namespace ButtonFrameAttrs {
+    let tabindex: string;
+    let scrolling: string;
+    let frameborder: number;
+    let allowtransparency: boolean;
+    let allowpaymentrequest: boolean;
+}
+export const ButtonCoverCss: {
+    'z-index': string;
+    position: string;
+    border: string;
+    background: string;
+    left: string;
+    top: string;
+    cursor: string;
+    outline: string;
+    width: string;
+    height: string;
+};
+export const ButtonCoverAttrs: {
+    role: string;
+    'aria-pressed': string;
+};
+export const ButtonContainerCss: {
+    border: string;
+    margin: string;
+    padding: string;
+    display: string;
+    background: string;
+    'user-select': string;
+    overflow: string;
+    position: string;
+    opacity: string;
+    height: string;
+    width: string;
+    outline: string;
+};
+export const ButtonDefaultColor: "dark";
+export namespace ButtonColorMap {
+    let dark: string;
+    let light: string;
+    let black: string;
+    let white: string;
+}
+export namespace ButtonLabelMap {
+    let ar: string;
+    let bg: string;
+    let ca: string;
+    let zh: string;
+    let hr: string;
+    let cs: string;
+    let da: string;
+    let nl: string;
+    let en: string;
+    let et: string;
+    let es: string;
+    let el: string;
+    let fi: string;
+    let fr: string;
+    let de: string;
+    let id: string;
+    let it: string;
+    let ja: string;
+    let ko: string;
+    let ms: string;
+    let no: string;
+    let pl: string;
+    let pt: string;
+    let ru: string;
+    let sr: string;
+    let sk: string;
+    let sl: string;
+    let sv: string;
+    let th: string;
+    let tr: string;
+    let uk: string;
+}

package/dist/types/core/deferred.d.ts

@@ -0,0 +1,19 @@
+export function Deferred(): {
+    done(callback: any): /*elided*/ any;
+    fail(callback: any): /*elided*/ any;
+    progress(callback: any): /*elided*/ any;
+    always(callback: any): /*elided*/ any;
+    then(resolve: any, reject: any, progress: any): /*elided*/ any;
+    promise(object: any): any;
+    state: () => number;
+    isPending(): boolean;
+    isRejected(): boolean;
+    isResolved(): boolean;
+    isProgress(): boolean;
+    resolveWith(context: any, args: any): /*elided*/ any;
+    rejectWith(context: any, args: any): /*elided*/ any;
+    notifyWith(context: any, args: any): /*elided*/ any;
+    resolve(...args: any[]): /*elided*/ any;
+    reject(...args: any[]): /*elided*/ any;
+    notify(...args: any[]): /*elided*/ any;
+};

package/dist/types/core/utils.d.ts

@@ -0,0 +1,84 @@
+export function getType(o: any): any;
+export function isPlainObject(o: any): boolean;
+export function isFunction(o: any): boolean;
+export function isArray(o: any): boolean;
+export function isElement(o: any): boolean;
+export function toArray(o: any): any;
+export function hasProp(o: any, v: any): any;
+export function forEach(ob: any, cb: any, cx: any): void;
+export function cleanObject(ob: any): any;
+export function extend(obj: any, ...args: any[]): any;
+export function uuid(): string;
+export function isObject(o: any): boolean;
+export function isRegexp(o: any): boolean;
+export function isArguments(o: any): boolean;
+export function isError(o: any): boolean;
+export function isDate(o: any): boolean;
+export function isString(o: any): boolean;
+export function isNumber(o: any): boolean;
+export function map(ob: any, cb: any, cx: any): any[];
+export function querySelectorAll(o: any, p: any): any;
+export function querySelector(o: any, p: any): any;
+export function deparam(params: any): {};
+export function param(obj: any): string;
+export function removeElement(el: any): void;
+export function createElement(tag: any): any;
+export function addClass(...args: any[]): void;
+export function removeClass(...args: any[]): void;
+export function removeAttr(el: any, attrs: any): boolean;
+export function addAttr(el: any, attrs: any): boolean;
+export function getStyle(el: any, prop: any, getComputedStyle: any): any;
+export function getPath(path: any): Window;
+export function stringFormat(format: any, params: any, expr: any): any;
+export function cssUnit(value: any, unit: any): string;
+/**
+ * @function
+ * @type {function(*, *, *)}
+ */
+export const getPaymentRequest: (arg0: any, arg1: any, arg2: any) => any;
+export function jsonParse(value: any, defaults: any): any;
+export function PromiseWithResolvers(): {
+    promise: Promise<any>;
+    resolve: undefined;
+    reject: undefined;
+};
+export function getAppleSessionConfig(config: PaymentRequestConfig): {
+    version: any;
+    countryCode: any;
+    supportedNetworks: any;
+    merchantCapabilities: any;
+    merchantIdentifier: any;
+    lineItems: any;
+    additionalLineItems: any;
+    recurringPaymentRequest: any;
+    deferredPaymentRequest: any;
+    currencyCode: any;
+    total: {
+        label: any;
+        amount: any;
+    };
+    requiredBillingContactFields: string[];
+    requiredShippingContactFields: string[];
+};
+export function getFunction(path: any): any;
+export function loadExternalApi(url: any, path: any): Promise<any>;
+export type PaymentRequestMethod = {
+    data: {
+        [string]: any;
+    };
+};
+export type PaymentRequestOptions = {
+    requestPayerEmail?: boolean;
+    requestPayerPhone?: boolean;
+    requestPayerName?: boolean;
+    requestShipping?: boolean;
+};
+export type PaymentRequestConfig = {
+    /**
+     * methods
+     */
+    PaymentRequestMethod?: any;
+    options: {
+        [string]: any;
+    };
+};