0.0.6 • Published 9 months ago
@sanlo/checkout-web v0.0.6
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