@strabl-engineering/strabl-pay 1.0.0

package/README.md

@@ -0,0 +1,339 @@
+# Strabl PAY SDK
+
+STRABL Pay SDK is the fastest way to embed secure, lightweight & PCI-DSS compliant card payments inside any website — providing a unified interface across modern web frameworks while keeping the payment experience smooth and seamless
+
+For developers — Lightweight, framework-agnostic, and PCI-DSS compliant out of the box. Integrate in minutes, not days
+For UI/UX designers — Every element is fully customizable. Match your checkout to your brand without any friction
+For merchants & businesses — A unified, reliable payment experience that builds customer trust from the first transaction
+
+## **Supported Frameworks:**
+
+The STRABL Pay SDK is framework-agnostic and designed to integrate easily with a wide range of modern front-end technologies. It supports both module-based and script-based usage.
+
+-   **React**
+-   **Next.js**
+-   **Vue.js**
+-   **Angular**
+-   **Astro**
+-   **Laravel**
+-   **Plain JavaScript (ES6+)**
+
+## **Installation:**
+The STRABL STRABL Pay SDK can be installed and integrated using multiple methods depending on the project setup and preferred package manager.
+
+**Using NPM:**
+
+```bash
+  npm install @strabl-engineering/strabl-pay
+```
+
+
+**Using Yarn:**
+
+```bash
+  yarn add @strabl-engineering/strabl-pay
+```
+
+**Using CDN Script:**
+
+Using jsDelivr CDN:
+```html
+  <script src="https://cdn.jsdelivr.net/npm/@strabl-engineering/strabl-pay@latest/dist/index.js"></script>
+```
+
+Using unpkg CDN:
+```html
+  <script src="https://unpkg.com/@strabl-engineering/strabl-pay@latest/dist/index.js"></script>
+```
+
+## Supported Parameters
+
+| Parameter | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| `platformUuid` | `string` | **Yes** | Your unique platform identifier. |
+| `apiKey` | `string` | **Yes** | Your public API key for authentication. You can create it from STRABL merchant dashboard |
+| `currencyCode` | `string` | **Yes** | 3-letter ISO currency code (e.g., `"AED"`, `"SAR"`, `"USD"`). |
+| `amount` | `number` | **Yes** | The total transaction amount to be charged. (e.g., `100`). |
+| `language` | `"en" | "ar"` | Yes | Sets the display language. |
+| `paymentMethods` | `PaymentMethod[]` | No | Array of allowed payment methods which will be shown to the cusotmer (e.g., ["card", "applepay"]). |
+| `fieldInputStyle` | `"floating-label" | "outlined"` | No | Defines the visual style of the form input fields. |
+| `customstyles` | `object` | No | Object containing the different properties to customize the UI. Full custom styles object is attached below |
+| `customer` | `object` | No | Optional object containing customer name and email. |
+| `onPaymentSubmission` | `() => Promise<boolean>` | No | Callback triggered before submission; return true to proceed. You can add your required validations here. If retruned false, it will not proceed to the payment submission.|
+| `onPaymentSuccess` | `(orderShortCode: string) => void` | No | Callback triggered after a successful transaction. It will return STRABL order short code which you can store. |
+| `onPaymentFailed` | `(failureReason: string) => void` | No | Callback triggered when a payment fails or is declined. It will return failure reason.|
+
+
+### Customization Styles (customstyles)
+You can pass the following properties within the customstyles object to match your brand's identity:
+
+| Parameter | Type | Description |
+| :--- | :--- |  :--- |
+| `textColor` | `string` | Sets the color for labels and standard text. |
+| `errorColor` | `string` | Sets the color for validation and transaction error messages. |
+| `accentColor` | `string` | Sets the primary color for buttons and active states. |
+| `backgroundColor` | `string` | Sets the background color of the form container. |
+| `btnRadius` | `string` | Sets the border-radius for the submit button (e.g., "4px"). |
+| `btnPadding` | `string` | Sets the internal padding for the submit button. |
+| `inputRadius` | `string` | Sets the border-radius for the input fields. |
+| `inputBorderColor` | `string` | Sets the color of the input field borders. |
+| `inputBorderWidth` | `string` | Sets the thickness of the input borders (e.g., "1px"). |
+| `continerMaxWidth` | `string` | Limits the maximum width of the form container. |
+| `fontFamily` | `string` | Sets the font stack for the entire component. |
+
+In order to submit the payment, publish a custom `strabl-submit-card-form` event from your JavaScript code. The SDK will listen for this event and trigger the payment process.
+
+```js
+window.dispatchEvent(new CustomEvent("strabl-submit-card-form"));
+```
+
+### Events and Callbacks
+The component provides two ways to handle transaction outcomes: Callbacks (props/properties) and Standard DOM Events. While both serve the same purpose, DOM events are particularly useful in Vanilla JS and Angular for decoupling logic.
+
+#### 1. Payment Success
+Triggered when the transaction is successfully authorized and completed.
+
+- **Callback** (`onPaymentSuccess`): A function property that receives the orderShortCode as a string.
+- **DOM Event** (`strablPaymentSuccess`): A standard event dispatched by the component. The orderShortCode is accessible via event.detail.
+
+```js
+// Example using Event Listener
+paymentForm.addEventListener("strablPaymentSuccess", (event) => {
+  console.log("Order Code:", event.detail);
+});
+```
+
+#### 2. Payment Failed
+Triggered when the payment is declined, cancelled, or encounters a processing error.
+
+- **Callback** (`onPaymentFailed`): A function property that receives a failureReason string (e.g., "Insufficient funds" or "Invalid CVV").
+- **DOM Event** (`strablPaymentFailed`): A standard event dispatched by the component. The failure reason is accessible via event.detail.
+
+```js
+// Example using Event Listener
+paymentForm.addEventListener("strablPaymentFailed", (event) => {
+  console.error("Failure Reason:", event.detail);
+});
+```
+
+## Usage
+
+### 1. React
+
+```tsx
+import { StrablCardPaymentForm } from "@strabl-engineering/strabl-pay/react";
+
+export function Checkout() {
+  return (
+    <StrablCardPaymentForm
+      platformUuid="YOUR_PLATFORM_UUID"
+      apiKey="YOUR_PUBLIC_API_KEY"
+      amount={100}
+      language="en" // "en" or "ar"
+      currencyCode='AED'
+      paymentMethods={["card", "applepay"]}
+      onPaymentSubmission={async () => {
+        console.log("Submit Payment clicked");
+        // Perform any necessary validation or actions before submitting the payment form.
+        // Return true to proceed with the payment submission, or false to prevent it.
+        return true;
+      }}
+      fieldInputStyle='floating-label' // outlined or floating-label
+      onPaymentSuccess={(strablOrderShortCode) => {
+        // Handle post-payment success actions, such as displaying a confirmation message or redirecting the user.
+        console.log("Payment successful! Strabl Order short code:", strablOrderShortCode);
+      }}
+      onPaymentFailed={(failureReason) => {
+        // Handle post-payment failure actions, such as displaying a error message.
+        console.log("Payment Failed! reason:", failureReason);
+      }}
+      customer={{
+        email: "",
+        name: ""
+      }}
+      customstyles={{
+        textColor: "#3a3a3a",
+        accentColor: "#000000cc",
+        backgroundColor: "#ffffff",
+        btnPadding: "10px 16px",
+        btnRadius: "4px",
+        continerMaxWidth: "500px",
+        fontFamily: "'GT-America', sans-serif",
+        errorColor: "#ff485c",
+        inputBorderColor: "#0000003b",
+        inputBorderWidth: "1px",
+        inputRadius: "4px",
+      }}
+    />
+  );
+}
+```
+
+If you are using TypeScript, you can import the types for better type safety in your vite-env.d.ts or any declaration file:
+
+```tsx
+/// <reference types="vite/client" />
+import { StrablCardFormProps } from "@strabl-engineering/strabl-pay/react";
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      StrablCardPaymentForm: StrablCardFormProps;
+    }
+  }
+}
+```
+
+
+### 2. Angular
+
+In your `AppModule` (for NgModule-based apps) or in your `Component` (for Standalone apps), add the `CUSTOM_ELEMENTS_SCHEMA`.
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import '@strabl-engineering/strabl-pay'; // Import the web component loader
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Allows using 'strabl-card-payment-form'
+})
+export class AppModule { }
+```
+
+#### Step 2: Component Logic
+Define your configuration and handlers in your TypeScript file.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-checkout',
+  templateUrl: './checkout.component.html'
+})
+export class CheckoutComponent {
+  config = {
+    platformUuid: "YOUR_PLATFORM_UUID",
+    apiKey: "YOUR_PUBLIC_API_KEY",
+    amount: 100,
+    currencyCode: 'AED',
+    language: 'en',
+    paymentMethods: ["card", "applepay"],
+    fieldInputStyle: 'floating-label',
+    customer: { email: "", name: "" },
+    styles: {
+      textColor: "#3a3a3a",
+      accentColor: "#000000cc",
+      backgroundColor: "#ffffff",
+      btnPadding: "10px 16px",
+      btnRadius: "4px",
+      continerMaxWidth: "500px",
+      fontFamily: "'GT-America', sans-serif",
+      errorColor: "#ff485c",
+      inputBorderColor: "#0000003b",
+      inputBorderWidth: "1px",
+      inputRadius: "4px",
+    }
+  };
+
+  async handleSubmission() {
+    console.log("Submit Payment clicked");
+    return true; // Return true to proceed
+  }
+
+  onSuccess(event: any) {
+    // Web components dispatch custom events, details are in event.detail
+    console.log("Payment successful!", event.detail);
+  }
+
+  onFailed(event: any) {
+    console.log("Payment Failed!", event.detail);
+  }
+}
+
+```
+
+#### Step 3: Template Usage
+Use property binding [] for inputs and event binding () for outputs. Note that Web Components often use standard kebab-case or the specific event names defined in the library.
+
+```html
+<strabl-card-payment-form
+  [platformUuid]="config.platformUuid"
+  [apiKey]="config.apiKey"
+  [amount]="config.amount"
+  [currencyCode]="config.currencyCode"
+  [language]="config.language"
+  [paymentMethods]="config.paymentMethods"
+  [fieldInputStyle]="config.fieldInputStyle"
+  [customer]="config.customer"
+  [customstyles]="config.styles"
+  (strablPaymentSuccess)="onSuccess($event)"
+  (strablPaymentFailed)="onFailed($event)">
+</strabl-card-payment-form>
+```
+
+### 3. Plain HTML / JavaScript
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Strabl Checkout</title>
+  <!-- Load the SDK -->
+  <script type="module" src="https://unpkg.com/@strabl-engineering/strabl-pay@latest/dist/index.js"></script>
+</head>
+<body>
+
+  <!-- Use the custom tag directly -->
+  <strabl-card-payment-form id="strabl-form"></strabl-card-payment-form>
+
+  <script type="module">
+    const form = document.getElementById('strabl-form');
+
+    // Set properties
+    form.platformUuid = "YOUR_PLATFORM_UUID";
+    form.apiKey = "YOUR_PUBLIC_API_KEY";
+    form.amount = 100;
+    form.currencyCode = "AED";
+    form.language = "en";
+    form.paymentMethods = ["card", "applepay"];
+    form.fieldInputStyle = "floating-label";
+    
+    form.customstyles = {
+      textColor: "#3a3a3a",
+      accentColor: "#000000cc",
+      backgroundColor: "#ffffff",
+      btnPadding: "10px 16px",
+      btnRadius: "4px",
+      continerMaxWidth: "500px",
+      fontFamily: "'GT-America', sans-serif",
+      errorColor: "#ff485c",
+      inputBorderColor: "#0000003b",
+      inputBorderWidth: "1px",
+      inputRadius: "4px",
+    };
+
+    // Listen for events
+    form.addEventListener('strablPaymentSuccess', (event) => {
+      console.log("Success! Order Code:", event.detail);
+    });
+
+    form.addEventListener('strablPaymentFailed', (event) => {
+      console.error("Failed! Reason:", event.detail);
+    });
+  </script>
+</body>
+</html>
+```
+
+In order to submit the payment, publish a custom `strabl-submit-card-form` event from your JavaScript code. The SDK will listen for this event and trigger the payment process.
+
+```js
+window.dispatchEvent(new CustomEvent("strabl-submit-card-form"));
+```
+

package/dist/components/strabl-card-form.element.d.ts

@@ -0,0 +1,89 @@
+import { LitElement, PropertyValues } from "lit";
+import { ThreeDsAuth } from "../lib/ThreeDsAuth";
+export type PaymentMethod = "card" | "applepay";
+export interface StrablCardFormProps {
+    paymentMethods?: PaymentMethod[];
+    fieldInputStyle?: "floating-label" | "outlined";
+    platformUuid: string;
+    apiKey: string;
+    currencyCode: string;
+    amount: number;
+    language: "en" | "ar";
+    customstyles?: {
+        textColor?: string;
+        errorColor?: string;
+        btnRadius?: string;
+        btnPadding?: string;
+        backgroundColor?: string;
+        accentColor?: string;
+        continerMaxWidth?: string;
+        inputRadius?: string;
+        inputBorderColor?: string;
+        inputBorderWidth?: string;
+        fontFamily?: string;
+    };
+    customer?: {
+        name?: string;
+        email?: string;
+    };
+    onPaymentSubmission?: () => Promise<boolean>;
+    onPaymentSuccess?: (orderShortCode: string) => void;
+    onPaymentFailed?: (failureReason: string) => void;
+}
+export declare class StrablCardForm extends LitElement {
+    static styles: import("lit").CSSResult;
+    paymentMethods: Array<"card" | "applepay">;
+    platformUuid: string;
+    apiKey: string;
+    currencyCode: string;
+    amount: number;
+    language: "en" | "ar";
+    fieldInputStyle: "floating-label" | "outlined";
+    customstyles: any;
+    customer: any;
+    onPaymentSubmission?: () => Promise<boolean>;
+    onPaymentSuccess?: (orderShortCode: string) => void;
+    onPaymentFailed?: (failureReason: string) => void;
+    private cardNumber;
+    private cardHolderName;
+    private expiry;
+    private cvc;
+    private cardType;
+    private translations;
+    private isSubmitting;
+    private errors;
+    private errorMessage;
+    private _isReady;
+    private _resolveReady;
+    private httpClient?;
+    private paymentServiceClient?;
+    private applePayInstance;
+    private reportSdkUsageClient?;
+    threeDsAuth: ThreeDsAuth;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateServices;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private get paymentService();
+    private updateCardType;
+    private handleExternalSubmit;
+    validateCardNumber(): boolean;
+    validateCardExpiry(): boolean;
+    validateCVC(): boolean;
+    validateCardHolderName(): boolean;
+    handleSubmit(e?: Event): Promise<void>;
+    private handleThreeDsAuthCompletion;
+    private removeUrlParam;
+    private checkForThreeDsAuthRedirect;
+    private notifySuccess;
+    private notifyFailure;
+    private isApplePaySupported;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "strabl-card-form": StrablCardForm;
+    }
+}

package/dist/components/strabl-input.element.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+export declare class StrablInput extends LitElement {
+    name: string;
+    label: string;
+    value: string;
+    type: "cardNumber" | "name" | "expiry" | "cvv" | "missingCardNumber";
+    error?: string;
+    maxLength: number;
+    gaps: number[];
+    lengths: number[];
+    firstSixPresent: boolean;
+    firstSixDigits: string;
+    lastFourDigits: string;
+    placeholder: string;
+    fieldInputStyle: "floating-label" | "outlined";
+    private isDeleting;
+    protected createRenderRoot(): this;
+    private handleKeyDown;
+    private handleInputChange;
+    private formatCardNumber;
+    private formatExpiryDate;
+    private handlePaste;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "strabl-input": StrablInput;
+    }
+}

package/dist/constants/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const BASE_API_URL: {
+    sandbox: string;
+    prod: string;
+};
+export declare const GENERATE_CARD_TOKEN_API = "/v1/api/direct/tokenize";
+export declare const INTENTION_TO_PAY_API = "/v1/api/direct/intent-to-pay";
+export declare const CONFIRM_PAYMENT_API = "/v1/api/direct/pay";
+export declare const CREATE_APPLE_PAY_SESSION_API = "/v1/api/direct/session";
+export declare const REPORT_USAGE_API = "/v2/public/api/t";
+export declare const PLATFORM_UUID_HEADER_KEY = "X-PLATFORM-KEY";
+export declare const CARD_ENCRYPTION_KEY_SANDBOX = "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvhwrT7LnpNhR8GRgnew5MTHVVvSrp4Ts12VV5Ahgj8y1B9i28e4HLKC/bzZxbsaZe+J7m3Wn4fUPs2zuN1SiYhI4nV+Vs+bfGtmnbkdlNYZCEAq7sMbxP1PeZsI/vROW4la7SJ49K/lOXKj5QTOjvkpu8CleHToYXO0VpAFlbRwkY5+rGa7YBnlyRnISNp+vxfHQjJk4C/PeThaOx4IFIf/HeooZw01h1demPNpxBzjvK5NSBN0ap8Aa0YfAoORdNj7DN3WePIPP+f9HUDlQzV0DlApipF8uGDo3H0TBkr5OPcVlDO5VKCmcJktAXqsAA18qRTDL0qOFI2Jq57JxfQIDAQAB\n-----END PUBLIC KEY-----";
+export declare const CARD_ENCRYPTION_KEY_PROD = "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAk5GvG6PDVnTpboz2t/1SRR9fKWdccsQV1CNl5g0tW/SfbqvIAmgH2WK+e8Wj3JFMP3q6UbkB9hTrrbdnI1IlJ8kwMm1kvSlTbFQZr1NIFbIUm5Q6N6xVASEfFSRjNVa8fhhpcCz4SVKYLsXKC0HViF16oFmVoCl8m5XC2Wir7UpWHpWJRQ2Vho2u1Nl7Q8O1HZHfmfwEfz3c9+cuwVY4g7TPptDz5BXC8j5bPcc0MeRRplqGwpGXP/D+xr3ir8BXCV7U3IqdY2Ajqt/avXHC weWvRkEhPTIcPxgsvtGE29soWS4pw9pqpIMXoFVnxgpHVRVPyOsD2haPd8jTj9BR4QIDAQAB\n-----END PUBLIC KEY-----";

package/dist/font-assets.d.ts

@@ -0,0 +1,7 @@
+import gtAmericaRegularUrl from "./fonts/gtAmericaRegular.woff?inline";
+import gtAmericaMediumUrl from "./fonts/GT-America-Medium.otf?inline";
+import gtAmericaLightUrl from "./fonts/GT-America-Light.otf?inline";
+import gtAmericaThinUrl from "./fonts/GT-America-Thin.otf?inline";
+import gtAmericaBoldUrl from "./fonts/gtAmericaBold.woff?inline";
+import gtAmericaBoldItalicUrl from "./fonts/gtAmericaBoldItalic.woff?inline";
+export { gtAmericaRegularUrl, gtAmericaMediumUrl, gtAmericaBoldItalicUrl, gtAmericaBoldUrl, gtAmericaLightUrl, gtAmericaThinUrl, };

package/dist/fonts.d.ts

@@ -0,0 +1,16 @@
+export interface FontConfig {
+    /**
+     * Optional base URL where the gtAmerica font files are hosted.
+     * If provided, the @font-face rules will include `url(...)` sources
+     * resolving to `${baseUrl}/<file>`.
+     */
+    baseUrl?: string;
+    /**
+     * If true (default), also injects a Google Fonts <link> for Inter as
+     * a free fallback so the component renders with a proper humanist
+     * sans-serif when the gtAmerica family is not available.
+     */
+    injectFallback?: boolean;
+}
+export declare function configureFonts(config: FontConfig): void;
+export declare function injectGlobalFonts(): void;

package/dist/i18n.d.ts

@@ -0,0 +1 @@
+export type Language = "en" | "ar";

package/dist/icons.d.ts

@@ -0,0 +1,16 @@
+export declare const visaIcon: import("lit-html").TemplateResult<2>;
+export declare const mastercardIcon: import("lit-html").TemplateResult<2>;
+export declare const amexIcon: import("lit-html").TemplateResult<2>;
+export declare const unionpayIcon: import("lit-html").TemplateResult<2>;
+export declare const jcbIcon: import("lit-html").TemplateResult<2>;
+export declare const discoverIcon: import("lit-html").TemplateResult<2>;
+export declare const dinersIcon: import("lit-html").TemplateResult<2>;
+export declare const genericCardIcon: import("lit-html").TemplateResult<2>;
+export declare function cardIconFor(typeKey: string | undefined): import("lit-html").TemplateResult<2> | undefined;
+export declare const applePayIcon: import("lit-html").TemplateResult<2>;
+export declare const pciDssIcon: import("lit-html").TemplateResult<2>;
+export declare const sslIcon: import("lit-html").TemplateResult<2>;
+export declare const strablLogo: import("lit-html").TemplateResult<2>;
+export declare const iconWrappers: {
+    html: (strings: TemplateStringsArray, ...values: unknown[]) => import("lit-html").TemplateResult<1>;
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { StrablCardForm } from "./components/strabl-card-form.element";
+import { StrablInput } from "./components/strabl-input.element";
+export { StrablCardForm, StrablInput };
+export { configureFonts, injectGlobalFonts } from "./fonts.js";
+export { mountCardForm } from "./mount.js";
+export type { MountOptions, MountedCardForm } from "./mount.js";

package/dist/index.js

@@ -0,0 +1,33 @@
+import { S as a, a as o } from "./strabl-input.element-DeXtiSuj.js";
+import { c as l, i as s } from "./strabl-input.element-DeXtiSuj.js";
+function c(t) {
+  if (typeof document > "u")
+    throw new Error(
+      "mountCardForm can only be called in a browser environment"
+    );
+  customElements.get("strabl-card-form") || customElements.define("strabl-card-form", a);
+  const r = document.querySelector(t.selector);
+  if (!r)
+    throw new Error(
+      `mountCardForm: no element matched selector "${t.selector}"`
+    );
+  const n = document.createElement("strabl-card-form"), m = (e) => {
+    e.platformUuid !== void 0 && (n.platformUuid = e.platformUuid), e.apiKey !== void 0 && (n.apiKey = e.apiKey), e.currencyCode !== void 0 && (n.currencyCode = e.currencyCode), e.amount !== void 0 && (n.amount = e.amount), e.language !== void 0 && (n.language = e.language), e.paymentMethods !== void 0 && (n.paymentMethods = e.paymentMethods), e.customstyles !== void 0 && (n.customstyles = e.customstyles), e.customer !== void 0 && (n.customer = e.customer), e.onPaymentSubmission !== void 0 && (n.onPaymentSubmission = e.onPaymentSubmission), e.onPaymentSuccess !== void 0 && (n.onPaymentSuccess = e.onPaymentSuccess), e.onPaymentFailed !== void 0 && (n.onPaymentFailed = e.onPaymentFailed);
+  };
+  return m(t), t.replace ? r.replaceChildren(n) : r.appendChild(n), {
+    element: n,
+    update: (e) => m(e),
+    submit: () => {
+      window.dispatchEvent(new CustomEvent("strabl-submit-card-form"));
+    },
+    destroy: () => n.remove()
+  };
+}
+typeof customElements < "u" && (customElements.get("strabl-card-form") || customElements.define("strabl-card-form", a), customElements.get("strabl-input") || customElements.define("strabl-input", o));
+export {
+  a as StrablCardForm,
+  o as StrablInput,
+  l as configureFonts,
+  s as injectGlobalFonts,
+  c as mountCardForm
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./strabl-input.element-CbrtvlUF.cjs");function m(r){if(typeof document>"u")throw new Error("mountCardForm can only be called in a browser environment");customElements.get("strabl-card-form")||customElements.define("strabl-card-form",n.StrablCardForm);const o=document.querySelector(r.selector);if(!o)throw new Error(`mountCardForm: no element matched selector "${r.selector}"`);const t=document.createElement("strabl-card-form"),a=e=>{e.platformUuid!==void 0&&(t.platformUuid=e.platformUuid),e.apiKey!==void 0&&(t.apiKey=e.apiKey),e.currencyCode!==void 0&&(t.currencyCode=e.currencyCode),e.amount!==void 0&&(t.amount=e.amount),e.language!==void 0&&(t.language=e.language),e.paymentMethods!==void 0&&(t.paymentMethods=e.paymentMethods),e.customstyles!==void 0&&(t.customstyles=e.customstyles),e.customer!==void 0&&(t.customer=e.customer),e.onPaymentSubmission!==void 0&&(t.onPaymentSubmission=e.onPaymentSubmission),e.onPaymentSuccess!==void 0&&(t.onPaymentSuccess=e.onPaymentSuccess),e.onPaymentFailed!==void 0&&(t.onPaymentFailed=e.onPaymentFailed)};return a(r),r.replace?o.replaceChildren(t):o.appendChild(t),{element:t,update:e=>a(e),submit:()=>{window.dispatchEvent(new CustomEvent("strabl-submit-card-form"))},destroy:()=>t.remove()}}typeof customElements<"u"&&(customElements.get("strabl-card-form")||customElements.define("strabl-card-form",n.StrablCardForm),customElements.get("strabl-input")||customElements.define("strabl-input",n.StrablInput));Object.defineProperty(exports,"StrablCardForm",{enumerable:!0,get:()=>n.StrablCardForm});Object.defineProperty(exports,"StrablInput",{enumerable:!0,get:()=>n.StrablInput});exports.configureFonts=n.configureFonts;exports.injectGlobalFonts=n.injectGlobalFonts;exports.mountCardForm=m;

package/dist/lib/ApplePayIntegration.d.ts

@@ -0,0 +1,23 @@
+import { PaymentService } from "../network/PaymentService";
+export declare class ApplePayIntegration {
+    private slotElement;
+    private paymentService?;
+    private amount;
+    private currency;
+    private onSuccess;
+    private onFailure;
+    private scriptUrl;
+    constructor(slotElement: HTMLElement, callbacks: {
+        onSuccess: (m: string) => void;
+        onFailure: (e: string) => void;
+    });
+    updateDetails(amount: number, currency: string, paymentService?: PaymentService): void;
+    init({ paymentServiceClient, amount, currency, }: {
+        paymentServiceClient?: PaymentService;
+        currency: string;
+        amount: number;
+    }): Promise<void>;
+    private loadApplePayScript;
+    private renderButton;
+    private handlePaymentRequest;
+}

package/dist/lib/EncryptCardData.d.ts

@@ -0,0 +1,8 @@
+export interface EncryptedData {
+    key: string;
+    iv: string;
+    payload: string;
+}
+export declare const encryptDataUsingRSAJsEncrypt: (data: any, publicKeyPem: string) => Promise<string | false>;
+export declare function encryptDataUsingAESHybridEncrypt(data: any, apiKey: string): Promise<EncryptedData>;
+export declare function encryptDataWithHybridRSA(serverPublicPem: string, plaintext: Uint8Array): Promise<EncryptedData>;

package/dist/lib/GetCardType.d.ts

@@ -0,0 +1,26 @@
+type CreditCardTypeCardBrandId = "american-express" | "diners-club" | "discover" | "elo" | "hiper" | "hipercard" | "jcb" | "maestro" | "mastercard" | "mir" | "unionpay" | "visa";
+type CreditCardTypeCardBrandNiceType = "American Express" | "Diners Club" | "Discover" | "Elo" | "Hiper" | "Hipercard" | "JCB" | "Maestro" | "Mastercard" | "Mir" | "UnionPay" | "Visa";
+type CreditCardTypeSecurityCodeLabel = "CVV" | "CVC" | "CID" | "CVN" | "CVE" | "CVP2";
+export type CreditCardType = {
+    niceType: string;
+    type: string;
+    patterns: number[] | [number[]];
+    gaps: number[];
+    lengths: number[];
+    code: {
+        size: number;
+        name: string;
+    };
+    matchStrength?: number;
+};
+interface BuiltInCreditCardType extends CreditCardType {
+    niceType: CreditCardTypeCardBrandNiceType;
+    type: CreditCardTypeCardBrandId;
+    code: {
+        size: 3 | 4;
+        name: CreditCardTypeSecurityCodeLabel;
+    };
+}
+export declare function creditCardType(cardNumber: string): Array<CreditCardType>;
+export declare function getCardInfoByType(cardType: CreditCardTypeCardBrandId): BuiltInCreditCardType | null;
+export {};