0.0.6 • Published 9 months ago

@sanlo/checkout-web v0.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

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

Development Work

https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e

Install dependencies: npm install

Storybook: npm run storybook

Build the package: npm run build

Pack the artifact: npm pack --pack-destination ~

Point the app to the local artifact (make sure version number is up to date): "@sanlo/checkout-web": "file:../../sanlo-checkout-web-*.*.*.tgz"

Install the package: npm install @sanlo/checkout-web

0.0.6

9 months ago

0.0.5-alpha.5

9 months ago

0.0.5-alpha.4

9 months ago

0.0.5-alpha.3

9 months ago

0.0.5-alpha.2

9 months ago

0.0.5-alpha.1

9 months ago

0.0.5

9 months ago

0.0.4

9 months ago

0.0.3

9 months ago

0.0.2

9 months ago

0.0.1

9 months ago