@sanlo/checkout-web NPM

Sanlo Checkout Web SDK

Sanlo Checkout is an online payment checkout library for your Node project, supporting payments from around the world. More infomation here: https://www.sanlo.ai/

Installation

Make sure your Node project is setup correctly, please reference NPM Installation guide
In your project folder, run command: npm install @sanlo/checkout-web
Implement Sanlo Checkout into your project, here is an example implementation:

<!doctype html>
<html lang="en">
  <head>
    <title>Your Game</title>
  </head>
  <body>
	  <!-- Button that will be used to trigger instantiation of SanloCheckout -->
    <button id="trigger-checkout">Start Checkout</button>
  </body>
</html>

<script>
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, please refer to step 1 in https://developer.sanlo.ai/docs/sanlo-checkout
  sesssion: {
    id: "YOUR_SESSION_ID",  // Optional - omit this line if not setting Session ID
    token: "YOUR_SESSION_TOKEN"  // Required
  }
  // Example reference to the HTML element
  node: document.getElementById('checkout-container'),
  onSessionUpdate: (data) => {
    console.log('onSessionUpdate', data);
  },
  onCheckoutError: (error) => {
    console.log('onCheckoutError', error);
  },
  onPurchaseSuccess: (data) => {
    console.log("onPurchaseSuccess", data);
    // Once you've received this callback, you may reward your player the bought item(s)
  },
  onPurchaseError: (error) => {
    console.log("onPurchaseError", error);
  },
  onReady: () => {
    console.log("onReady");
  },
  onEnd: () => {
    console.log("onEnd");
    // Use this callback to trigger your own events after checkout has finished
  }
  // This style section is optional, will override styles generated from our
  // dashboard Checkout Builder
  ,
  style: {
    logo: "logo.png",
    colors: {
        primary: "#FF0000",
        secondary: "#00FF00",
      },
      backgrounds: {
        payments: "#000000",
        summary: "#FFFFFF",
      }
  }
  // End Style
});
</script>

OPTIONAL - Implement a 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",
    },
  }
/>