Add the SDK script tags
<script>
window.sunbitAsyncInit = function() {
SUNBIT.EPAY.init({
sunbitKey: '<THE KEY PROVIDED BY SUNBIT>'
});
};
</script>
<script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>Add a wrapping element in your page:
<body>
...
<div id="sunbitCheckoutWrappingElement"></div>
...
</body>Call the "render" function:
<body>
...
<script>
SUNBIT.EPAY.render({
element: '#sunbitCheckoutWrappingElement', // can be a css selector or an element
purchaseAmount: 561.2, // the amount in USD
onDone: function(data) {
console.log(data);
},
onCancel: function(data) {
console.log(data);
}
});
</script>
</body>Each transaction must be sealed with a server to server call in order to secure it and finalize it with the sunbitKey provided by Sunbit (the same used by the javascript SDK) - the sunbitId generated at the end of the flow, the ro generated by the store, and the purchaseAmount.
Request URL:
PUT https://api.sunbit.com/purchase-service/api/v1/online-checkout/verify/Request Body:
{
"sunbitKey": "<THE KEY PROVIDED BY SUNBIT>",
"sunbitId": "435-5435-54543",
"ro": "#1223",
"purchaseAmount" : 100
}The sunbitOnlineSdk exposes the following functions:
The "init" method
SUNBIT.init(setupOptions)
| option | Required | type | Default | Description |
|---|---|---|---|---|
sunbitKey |
yes |
string |
The key provided by Sunbit |
The "Render" method Will render the button element that triggers the checkout process
SUNBIT.EPAY.render(renderOptions)
| option | Required? | type | Default | Description |
|---|---|---|---|---|
| Properties: | ||||
element |
yes |
HTMLElement / string |
(HTMLElement or a string selector) The wrapping element that will contain the rendred button |
|
renderOnly |
boolean |
false |
When true the button will not trigger the checkout process and will (see Usage or Examples |
|
purchaseAmount |
yes |
number |
The purchase amount in USD | |
size |
string |
"medium" |
("small", "medium", "large") Size of the rendered button |
|
theme |
string |
"dark" |
("dark", "light", "white", "transparent") Colors/theme of the button |
|
| Callbacks: | ||||
onDone |
Signature function(data: SunbitSuccess) => void |
A callback that is invoked when the checkout is done | ||
onCancel |
Signature function(data: SunbitCancel) => void |
A callback that is invoked when the checkout is canceled |
SUNBIT.EPAY.checkout(checkoutOptions)
| option | Required? | type | Default | Description |
|---|---|---|---|---|
| Properties: | ||||
purchaseAmount |
yes |
number |
The purchase amount in USD | |
| Callbacks: | ||||
onDone |
Signature function(data: SunbitSuccess) => void |
A callback that is invoked when the checkout is done | ||
onCancel |
Signature function(data: SunbitCancel) => void |
A callback that is invoked when the checkout is canceled |
| option | Required | type | Default | Description |
|---|---|---|---|---|
sunbitId |
yes |
string |
the transaction id that is generated by Sunbit |
| option | Required | type | Default | Description |
|---|---|---|---|---|
code |
yes |
number |
A number representing the cancelation | |
message |
yes |
string |
The description of the cancelation |
Assuming you have some element in your page:
<body>
...
<button id="someExistingElementId">Checkout</button>
...
</body>Add a function manually to your element and call the "checkout" function:
<body>
...
<script>
var someExistingElement = document.querySelector('#someExistingElementId');
someExistingElement.addEventListener('click', function() {
SUNBIT.EPAY.checkout({
purchaseAmount: 354.2, // the amount in USD
onDone: function(data) {
console.log(data);
},
onCancel: function(data) {
console.log(data);
}
});
});
</script>
</body>Some radio buttons with checkout options and a checkout button:
<body>
...
<form name="checkoutForm">
<label>
<input type="radio" name="checkoutOption" value="sunbit" checked />
<span id="advancedUsageWrapper"></span>
</label>
<br/>
<label>
<input type="radio" name="checkoutOption" value="paypal" />
<img src="https://pp-retail.com/sdk/img/pp_here_flat.png" style="max-width: 150px" />
</label>
<br/>
<button id="advancedUsageButton">Checkout</button>
</form>
...
</body>Render an element that doesn't trigger checkout:
<body>
...
<script>
SUNBIT.EPAY.render({
element: '#advancedUsageWrapper',
renderOnly: true, // disable the checkout onClick
theme: 'transparent',
size: 'medium'
});
</script>
</body>Add a function manually to your element and call the "checkout" function:
<body>
...
<script>
var advancedUsageButton = document.querySelector('#advancedUsageButton');
advancedUsageButton.addEventListener('click', function() {
var radio = document.querySelector('[name=checkoutOption]:checked');
if (radio.value === 'sunbit') {
SUNBIT.EPAY.checkout({
purchaseAmount: 952.2, // the amount in USD
onDone: function(data) {
console.log(data);
},
onCancel: function(data) {
console.log(data);
}
});
}
else {
alert('Checkout with: '+ radio.value)
}
});
</script>
</body>