@sanlo/checkout-web NPM

Sanlo Checkout Web SDK

Integration

Integration the main SanloCheckout component into your application.

import SanloCheckout from '@sanlo/checkout-web';
import "@sanlo/checkout-web/dist/style.css";

const checkout = new SanloCheckout({
  // This is the session data from the BE session API
  sesssion: {
    id: ""
    token: "",
  }
  // A reference to the HTML element to mount to
  node: HTMLElement,
  onSessionUpdate: (data) => {
    console.log('onSessionUpdate', data);
  },
  onCheckoutError: (error) => {
    console.log('onCheckoutError', error);
  },
  onPurchaseSuccess: (data) => {
    console.log("onPurchaseSuccess", data);
  },
  onPurchaseError: (error) => {
    console.log("onPurchaseError", error);
  },
  onReady: () => {
    console.log("onReady");
  },
  onEnd: () => {
    console.log("onEnd");
  },
  style: {
    logo: "logo.png",
  }
});

UI Preview

A method to preview a large chunk of the UI without needing a valid payment session. UI only, works well with Storybook.

import { SanloCheckoutPreview } from '@sanlo/checkout-web';

<SanloCheckoutPreview
  user: {
    email: "fake@email.com",
    zip: "12345",
  },
  item: {
    "externalId": "item-external-id",
    "name": "Item Name",
    "description": "",
    "iconUrl": "iconUrl.png",
  },
  priceData: {
    "price": {
      "label": "Sub Total:",
      "amount": "$ 2.09",
    },
    "tax": {
      "label": "Tax:",
      "amount": "$ 0.42",
    },
    "vat": null,
    "total": {
      "label": "Total:",
      "amount": "$ 2.51",
    }
  },
  paymentMethods: [
    {
      "name": "Cards",
      "type": "scheme",
      "paymentKey": "cards"
    },
    {
      "name": "Google Pay",
      "type": "googlepay",
      "paymentKey": "googlepay"
    }
  ],
  style: {
    logo: "logo.png",
    colors: {
      primary: "#FF0000",
      secondary: "#00FF00",
    },
    backgrounds: {
      payments: "#a2a2eb",
      summary: "#f4c463",
    },
  }
/>