@sanlo/checkout-web
v0.0.7
Published
Sanlo Checkout Web SDK
Readme
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-webImplement 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: "[email protected]",
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",
},
}
/>- Done with setup, now run the project however you would normally. For example, in your project folder run the command:
npm run dev
Useful Links:
https://www.sanlo.ai