Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.paywint.com/llms.txt

Use this file to discover all available pages before exploring further.

The Paywint Inline Checkout SDK renders a managed checkout component inside your page. Your backend creates a short-lived checkout token, then your frontend passes that token to the SDK with the payment configuration.

​
Load the SDK

Load the Paywint Checkout SDK and initialize the checkout mount point. 
<head>
  <script>window.$paywint=window.$paywint||{};$paywint.checkout=$paywint.checkout||{ready:function(){}};</script>
  <script src="https://YOUR_PAYWINT_SDK_HOST/checkout.js" defer></script>
</head>
<body>

  <!-- Element to mount the checkout SDK -->
  <div id="checkout-root"></div>
  
  <!-- Optional custom submit button -->
  <button id="host-submit-button" type="button">Submit From Host</button>

  <script>
    $paywint.checkout.ready = () => {
      const pwCheckout = new PaywintCheckout();

      const pwCheckoutConfig = {
        token: "CHECKOUT_TOKEN_FROM_YOUR_BACKEND",
        payOptions: ["card", "wallet"],
        amount: 120,
        currency: "USD",
        invoice_number: "INV-1001",
        description: "Order #1001",
        hide_submit_button: false,
        style: {
          "pw-border-color": "#d9e6f4",
          "pw-active-border-color": "#025865",
          "pw-background-color": "#ffffff",
          "pw-text-color": "#1e293b",
          "pw-input-border-color": "1px solid #cbd5e1",
          "pw-input-radius": "8px",
          "pw-input-height": "40px",
          "pw-submit-button-background-color": "#000000",
          "pw-submit-button-text-color": "#ffffff",
          "pw-checkout-font": "Inter, sans-serif"
        }
      };

      const payerAddressData = {
        payer_first_name: "Jane",
        payer_last_name: "Doe",
        payer_address_line_1: "123 Main Street",
        payer_city: "New York",
        payer_state: "NY",
        payer_zip: "10001",
        payer_country: "US"
      };

      pwCheckout
        .init("#checkout-root", pwCheckoutConfig, (event) => {
          console.log("Paywint event:", event);
        })
        .then(() => {
          pwCheckout.updatePayorAddress(payerAddressData);

          document.getElementById("host-submit-button")?.addEventListener("click", () => {
            pwCheckout.triggerSubmit();
          });
        })
        .catch((error) => {
          document.getElementById("checkout-root").textContent = error?.message || "Failed to initialize checkout.";
        });
    };
  </script>
</body>
Replace https://YOUR_PAYWINT_SDK_HOST/checkout.js with the checkout SDK URL provided for your environment.
EnvironmentCheckout.js URL
Productionhttps://script.paywint.com/checkout.js
Sandboxhttps://sandbox.script.paywint.com/checkout.js

​
Configuration

Pass the configuration object as the second argument to init(selector, config, eventsCB).
FieldTypeRequiredDescription
tokenstringYesCheckout token created by your backend.
payOptionsstring[]YesPayment methods to show. Supported values include card and wallet.
amountnumberYesPayment amount. The SDK validates that this matches the token context.
currencystringRecommendedISO currency code, for example USD.
invoice_numberstringOptionalYour invoice or order reference.
descriptionstringOptionalDescription shown in checkout and returned in events where applicable.
hide_submit_buttonboolean | nullOptionalSet to true when you want to submit from your own host button using triggerSubmit().
styleobject | stringOptionalCSS variable overrides for the checkout component.

​
Payer Address

Use updatePayorAddress() after init() resolves. You can call it again whenever the payer edits their billing address in your host page. 
pwCheckout.updatePayorAddress({
  payer_first_name: "Jane",
  payer_last_name: "Doe",
  payer_address_line_1: "123 Main Street",
  payer_city: "New York",
  payer_state: "NY",
  payer_zip: "10001",
  payer_country: "US"
});

​
Custom Submit Button

If your integration hides the SDK submit button, call triggerSubmit() from your own button after init() completes. 
document.getElementById("host-submit-button")?.addEventListener("click", () => {
  pwCheckout.triggerSubmit();
});

​
Events

Pass an event callback as the third argument to init(). The SDK calls this function as checkout state changes. 
pwCheckout.init("#checkout-root", pwCheckoutConfig, (event) => {
  console.log(event.event, event.message, event.data);
});
Common event payloads include an event name, a human-readable message, and optional data for the payment or verification step.

​
Styling

The style configuration accepts an object of CSS variable overrides. Keys may be provided with or without the leading --. 
style: {
    "pw-border-color": "#d9e6f4",
    "pw-border-width": "2px",
    "pw-active-border-color": "#025865",
    "pw-disabled-border-color": "#f8fff0",
    "pw-disabled-opacity": "0.5",
    "pw-background-color": "#ffffff",
    "pw-text-color": "#1e293b",
    "pw-input-label-text-color": "#1e293b",
    "pw-subtext-text-color": "#64748b",
    "pw-muted-background-color": "rgb(127 127 127 / 0.12)",
    "pw-error-text-color": "#ff5757",
    "pw-success-surface-start-background-color": "#f0fdf4",
    "pw-success-surface-end-background-color": "#dcfce7",
    "pw-success-icon-background-color": "#dcfce7",
    "pw-success-icon-color": "#16a34a",
    "pw-success-text-color": "#16a34a",
    "pw-input-border-color": "1px solid #cbd5e1",
    "pw-input-radius": "8px",
    "pw-input-height": "40px",
    "pw-input-font-size": "18px",
    "pw-input-background-color": "#ffffff",
    "pw-submit-button-background-color": "#000000",
    "pw-submit-button-text-color": "#ffffff",
    "pw-submit-button-radius": "8px",
    "pw-file-upload-background-color": "#ffffff",
    "pw-file-upload-text-color": "#000000",
    "pw-file-upload-button-radius": "8px",
    "pw-file-upload-button-height": "44px",
    "pw-file-upload-border-color": "#000000",
    "pw-file-upload-border-width": "2px",
    "pw-file-upload-border-style": "dotted",
    "pw-checkout-font": "Inter, sans-serif",
    "pw-otp-gap": "10px",
    "pw-otp-width": "50px",
    "pw-otp-height": "40px",
    "pw-otp-font-size": "18px",
    "pw-otp-border-color": "1px solid #cbd5e1",
    "pw-otp-radius": "8px",
    "pw-otp-background-color": "#ffffff",
    "pw-otp-text-color": "#1e293b",
    "pw-otp-placeholder-text-color": "#94a3b8",
    "pw-otp-focus-border-color": "#025865"
}
When pw-checkout-font is provided, the SDK does not load its default Inter font stylesheet. Load your custom font on the host page if the font is not already available.

​
SDK Methods

MethodDescription
init(selector, config, eventsCB)Mounts checkout into an element matching the selector. The selector must be an ID selector such as #checkout-root.
updatePayorAddress(address)Updates payer billing address data after checkout has initialized.
triggerSubmit()Programmatically submits checkout. Use this for host-controlled submit buttons.