npm install @paymentlabs/paymentlabs-js
# or
yarn add @paymentlabs/paymentlabs-js
# or
pnpm add @paymentlabs/paymentlabs-js

<script src="https://sdk.paymentlabs.io/payin/latest/paymentlabs.js"></script>

import { PaymentLabs } from "@paymentlabs/paymentlabs-js";

// 1. Create the SDK once, with your environment and merchant ID.
const sdk = PaymentLabs.create({
  environment: "sandbox", // switch to "production" when you go live
  merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
});

// 2. Mount the widget into an element on your page.
const widget = await sdk.createWidget("checkout", checkoutId, {
  containerId: "checkout-container", // <div id="checkout-container"></div>
});

<div id="checkout-container"></div>
<button id="pay-button" disabled>Pay</button>

const payButton = document.getElementById("pay-button");

// The form is rendered and interactive.
widget.on("checkout-loaded", () => {
  payButton.disabled = false;
});

// Reflect progress so the buyer knows something's happening.
widget.on("payment-processing", (isProcessing) => {
  payButton.disabled = isProcessing;
  payButton.textContent = isProcessing ? "Processing…" : "Pay";
});

// The happy path 🎉
widget.on("checkout-completed", () => {
  showSuccessScreen();
});

// Something went wrong — tell the buyer what to do next.
widget.on("checkout-failed", ({ errorReason }) => {
  showError(errorReason);
});

// Hand control to the SDK when the buyer clicks Pay.
payButton.addEventListener("click", () => widget.submitPayment());

// Backend created this checkout with an amount of 0.
const widget = await sdk.createWidget("checkout", savecardCheckoutId, {
  containerId: "checkout-container",
});

const saveButton = document.getElementById("save-card-button");

widget.on("checkout-loaded", () => {
  saveButton.disabled = false;
});

// Fired the same way — the card is now saved and reusable.
widget.on("checkout-completed", () => {
  showCardSavedScreen();
});

saveButton.addEventListener("click", () => widget.submitPayment());

<div id="checkout-container"></div>
<!-- Label the action for what it really is -->
<button id="save-card-button" disabled>Save card</button>

const widget = await sdk.createWidget("subscription", planOfferId, {
  containerId: "subscription-container",
});

widget.on("subscription-loaded", () => {
  const offer = widget.getSubscriptionOfferData();
  console.log("Plans available:", offer?.subscriptionPlans);
});

// The buyer picked a different plan from the offer.
widget.on("subscription-plan-changed", (plan) => {
  updatePlanSummary(plan); // plan.name, plan.amount.formattedValue, plan.schedule…
});

widget.on("subscription-completed", () => {
  showSubscriptionActiveScreen();
});

widget.on("subscription-failed", ({ errorReason }) => {
  showError(errorReason);
});

submitButton.addEventListener("click", () => widget.submitPayment());

const widget = await sdk.createWidget("checkout", checkoutId, {
  containerId: "checkout-container",
});

await widget.submitPayment(); // address comes from the SDK-rendered fields

const widget = await sdk.createWidget("checkout", checkoutId, {
  containerId: "checkout-container",
  billingDetails: {
    fields: { address: false }, // SDK won't render address fields
  },
});

await widget.submitPayment({
  billingDetails: {
    address: {
      address1: "123 Main Street",
      address2: "Apt 4B", // optional
      city: "New York",
      state: "NY",
      postalCode: "10001",
      country: "US", // ISO 3166-1 alpha-2
    },
  },
});

const widget = await sdk.createWidget("checkout", checkoutId, {
  containerId: "checkout-container",
  theme: {
    mode: "light", // "light" (default) or "dark"
    colors: {
      seed: {
        brand: "#5b3df5",    // your primary color — buttons, accents
        neutral: "#1f2937",  // text and neutral UI
        info: "#2563eb",
        positive: "#16a34a", // success
        negative: "#dc2626", // errors
        warning: "#d97706",
      },
      // Optional fine-grained overrides
      overrides: {
        "bg-main": "#ffffff",
      },
    },
  },
});

await sdk.updateTheme("dark");

// Register many at once
["checkout-loaded", "checkout-completed", "checkout-failed"].forEach((event) =>
  widget.on(event, (data) => analytics.track(event, data)),
);

widget.on("checkout-failed", ({ errorReason, extendedErrorReason }) => {
  switch (errorReason) {
    case "MISSING_INSTRUMENT":
      show("Please choose a payment method to continue.");
      break;
    case "INVALID_INSTRUMENT":
      show("Those payment details look off. Please double-check them.");
      break;
    case "CHARGE_INSTRUMENT_ERROR":
      show("Your card was declined. Try another card or contact your bank.");
      break;
    case "APPLICATION_ERROR":
      show("Something went wrong on our side. Please try again shortly.");
      break;
    default:
      show("Payment couldn't be completed. Please try again.");
  }

  if (extendedErrorReason) console.debug("Decline detail:", extendedErrorReason);
});

import { useEffect, useRef, useState } from "react";
import { PaymentLabs, PaymentWidget } from "@paymentlabs/paymentlabs-js";

export function Checkout({
  checkoutId,
  onSuccess,
  onFailure,
}: {
  checkoutId: string;
  onSuccess: () => void;
  onFailure: (reason: string) => void;
}) {
  const widgetRef = useRef<PaymentWidget | null>(null);
  const [ready, setReady] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let widget: PaymentWidget | undefined;

    (async () => {
      const sdk = PaymentLabs.create({
        environment: "sandbox",
        merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
      });

      widget = await sdk.createWidget("checkout", checkoutId, {
        containerId: "checkout-container",
      });
      widgetRef.current = widget;

      widget.on("checkout-loaded", () => setReady(true));
      widget.on("payment-processing", setLoading);
      widget.on("checkout-completed", onSuccess);
      widget.on("checkout-failed", ({ errorReason }) => onFailure(errorReason));
    })();

    return () => widget?.destroy();
  }, [checkoutId, onSuccess, onFailure]);

  return (
    <div>
      <div id="checkout-container" />
      {ready && (
        <button onClick={() => widgetRef.current?.submitPayment()} disabled={loading}>
          {loading ? "Processing…" : "Pay"}
        </button>
      )}
    </div>
  );
}

<template>
  <div>
    <div id="checkout-container"></div>
    <button v-if="ready" @click="submit" :disabled="loading">
      {{ loading ? "Processing…" : "Pay" }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { PaymentLabs, PaymentWidget } from "@paymentlabs/paymentlabs-js";

const props = defineProps<{ checkoutId: string }>();
const emit = defineEmits<{ success: []; failure: [reason: string] }>();

const widget = ref<PaymentWidget | null>(null);
const ready = ref(false);
const loading = ref(false);

onMounted(async () => {
  const sdk = PaymentLabs.create({
    environment: "sandbox",
    merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
  });

  widget.value = await sdk.createWidget("checkout", props.checkoutId, {
    containerId: "checkout-container",
  });

  widget.value.on("checkout-loaded", () => (ready.value = true));
  widget.value.on("payment-processing", (p) => (loading.value = p));
  widget.value.on("checkout-completed", () => emit("success"));
  widget.value.on("checkout-failed", ({ errorReason }) => emit("failure", errorReason));
});

onUnmounted(() => widget.value?.destroy());

const submit = () => widget.value?.submitPayment();
</script>

<div id="checkout-container"></div>
<button id="pay-button" disabled>Pay</button>

<script type="module">
  import { PaymentLabs } from "@paymentlabs/paymentlabs-js";

  const sdk = PaymentLabs.create({
    environment: "sandbox",
    merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
  });

  const widget = await sdk.createWidget("checkout", "your-checkout-id", {
    containerId: "checkout-container",
  });

  const payButton = document.getElementById("pay-button");
  widget.on("checkout-loaded", () => (payButton.disabled = false));
  widget.on("checkout-completed", () => alert("Payment complete 🎉"));
  widget.on("checkout-failed", ({ errorReason }) => alert(`Failed: ${errorReason}`));
  payButton.addEventListener("click", () => widget.submitPayment());
</script>

<!DOCTYPE html>
<html>
  <body>
    <div id="checkout-container"></div>
    <button id="pay-button" disabled>Pay</button>

    <script src="https://sdk.paymentlabs.io/payin/latest/paymentlabs.js"></script>
    <script>
      (async () => {
        // PaymentLabs is available globally from the CDN.
        const sdk = PaymentLabs.create({
          environment: "production",
          merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
        });

        const widget = await sdk.createWidget("checkout", "your-checkout-id", {
          containerId: "checkout-container",
        });

        const payButton = document.getElementById("pay-button");
        widget.on("checkout-loaded", () => (payButton.disabled = false));
        widget.on("payment-processing", (busy) => {
          payButton.disabled = busy;
          payButton.textContent = busy ? "Processing…" : "Pay";
        });
        widget.on("checkout-completed", () => alert("Payment complete 🎉"));
        widget.on("checkout-failed", (e) => alert(`Failed: ${e.errorReason}`));

        payButton.addEventListener("click", () => widget.submitPayment());
      })();
    </script>
  </body>
</html>

const sdk = PaymentLabs.create({
  environment: "sandbox", // "sandbox" | "production"
  merchantId: "C-220c070ec91944b8ad39814ec43d9c05",
});

interface WidgetOptions {
  containerId: string;            // ID of the DOM element to render into (required)
  theme?: ThemeConfig;            // Brand colors and light/dark mode
  billingDetails?: BillingDetailsConfig; // Address collection behavior
}

const result = await widget.submitPayment();
// { success: boolean; instrumentId?: string; transactionId?: string; error?: string }

import {
  PaymentLabs,
  PaymentWidget,
  Checkout,
  SubscriptionOffer,
  SubscriptionPlan,
  CheckoutErrorReason,
  ThemeConfig,
} from "@paymentlabs/paymentlabs-js";

interface Checkout {
  id: string;
  buyerEmail: string;
  buyerId: string;
  merchantId: string;
  merchantName: string;
  alias: string;                 // your reference / description
  amount: { value: number; currency: string }; // value: 0 ⇒ save-card checkout
  status: CheckoutStatus;
  currentTransactionStatus?: CheckoutTransactionStatus;
  errorTransaction?: {
    transactionId: string;
    errorReason: CheckoutErrorReason;
    extendedErrorReason?: CheckoutExtendedErrorReason;
    checkoutInstrumentId: string;
    instrumentType: InstrumentType;
  };
  enabledCheckoutInstruments: InstrumentType[];
  requiresFraudSession: boolean;
  expiresAt: string;             // ISO 8601
  links: { embeddable: string; checkout: string };
  redirectLinks?: {
    successRedirectUrl?: string;
    failureRedirectUrl?: string;
    expiredRedirectUrl?: string;
  };
  termsOfServiceUrl: string;
  privacyPolicyUrl: string;
}

type CheckoutStatus =
  | "PENDING"     // awaiting payment
  | "PROCESSING"  // payment in progress
  | "PAID"        // succeeded
  | "FAILED"      // failed
  | "EXPIRED"     // time window passed
  | "CREATING" | "ACTIVE" | "TRIAL" | "UNKNOWN";

interface SubscriptionOffer {
  id: string;
  merchantId: string;
  userId: string;
  subscriptionPlanIds: string[];
  subscriptionPlans: SubscriptionPlan[];
  expiresAt: string;
  links: { embeddable: string; self: string };
}

interface SubscriptionPlan {
  id: string;
  merchantId: string;
  merchantDisplayName: string;
  sort: string;                  // ordering/grouping hint, e.g. "RegularPlan#100"
  name: string;
  description?: string;
  enabledCheckoutInstruments: InstrumentType[];
  schedule: Schedule;
  amount: Money;
  trialPeriod?: Schedule;
  status: "ACTIVE" | "CANCELED";
  termsOfServiceUrl?: string;
  privacyPolicyUrl?: string;
}

interface Schedule {
  interval: "daily" | "weekly" | "monthly" | "yearly";
  intervalCount: number;         // e.g. interval "monthly" + count 2 = every 2 months
}

interface Money {
  value: number;                 // amount as a decimal value
  currency: string;              // ISO 4217
  formattedValue: string;        // e.g. "$9.99"
  digits: number;                // decimal digits for the currency
  wholeValue: number;            // value with no decimals (usually cents)
}

interface ThemeConfig {
  mode?: "dark" | "light";       // defaults to "light"
  colors?: {
    seed?: {
      brand: string;
      neutral: string;
      info: string;
      positive: string;
      negative: string;
      warning: string;
    };
    overrides?: {
      "bg-main": string;         // main background override
    };
  };
}

interface BillingDetailsConfig {
  fields?: {
    address?: boolean;           // false ⇒ you provide the address at submit time
  };
}

interface SubmitPaymentRequest {
  billingDetails: {
    address?: {
      address1: string;          // required
      address2?: string;
      city: string;              // required
      state: string;             // required
      postalCode: string;        // required
      country: string;           // required, ISO 3166-1 alpha-2
    };
  };
}