@tamara-solution/checkout
v1.0.6
Published
Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.
Readme
Tamara Checkout Frame
With tamara, your customers can buy now and pay later! Your customers enjoy a flexible payment solution to buy the product they love. No hidden fees. No risk.
What is it
Start accepting online payments in just a few minutes with Frames. A seamless way to integrate, accept online payments from all major credit cards, and customize with your brand. For more details, please visit us at https://www.tamara.co
How it works
You embedded the
TamaraCheckoutFramein your website, then customer now have an option calledpay later via tamaraon your checkout page.Your site later calls
TamaraCheckoutFrame.checkoutto confirm payment of order via tamara.
Integrate Frames
Before you start
Make sure you have the tamara's account for partner. If you don't have one, don't hesitate to contact us [[email protected]].
Add the code snippet to your site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="theme-color" content="#6DC8BF" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
/>
<title>tamara checkout frame demo</title>
</head>
<body>
<div
style=" z-index: 1999; display: flex; align-items: center; justify-items: center;width: 100vw; height: 100vh;"
>
<button
id="checkoutButton"
onclick="processCheckout('en_US')"
disabled
style="z-index: 2000; width: 200px; height: 100px;"
>
Checkout
</button>
</div>
<script>
window.addEventListener('DOMContentLoaded', function () {
document.getElementById('checkoutButton').disabled = false
})
</script>
<script>
function success() {
console.log(
"Merchant's site has received the event SUCCESS from tamara"
)
}
function failed() {
console.log("Merchant's site has received the event FAILED from tamara")
}
function cancel() {
console.log(
"Merchant's site has received the event CANCELED from tamara"
)
}
function init() {
TamaraFrame.addEventHandlers(TamaraFrame.Events.SUCCESS, success)
TamaraFrame.addEventHandlers(TamaraFrame.Events.FAILED, failed)
TamaraFrame.addEventHandlers(TamaraFrame.Events.CANCELED, cancel)
}
var tamaraCKOConfig = {
namespace: 'TamaraFrame',
init: init,
}
</script>
<script src="./checkoutFrame.min.js"></script>
<script>
function processCheckout(locale) {
TamaraFrame.checkout('CHECKOUT_URL')
}
</script>
</body>
</html>Frame reference
Here's a complete list of TamaraCheckoutFrame configuration options.
Optional
| Javascript Key | Description | Default |
| --- | --- | --- |
| debug | Set to true to view console messages. | false |
| namespace | Customize the default TamaraCheckoutFrame namespace. | TamaraCheckoutFrame |
Events
| Javascript constant | Description |
| --- | --- |
| READY | Triggered when TamaraCheckoutFrame is registered on the global namespace and safe to use. |
| STARTED | Triggered when the iframe is injected to DOM. |
| LOADED | Triggered when the iframe is loaded and rendered. |
| CLOSED | Triggered when the iframe is closed. |
| SUCCESS | Triggered when the order has been confirmed by user. |
| FAILED | Triggered when the order has been rejected by tamara. |
| CANCELED | Triggered when the order has been rejected by user. |
Adding an event handler
TamaraCheckoutFrame.addEventHandler(TamaraCheckoutFrame.Events.%event_constant%, handler);Actions
| Signature | Description | Returns |
| --- | --- | --- |
| addEventHandler(event, handler) | Adds a handler to the specified event that is triggered. Call the TamaraCheckFrames.Events object to retrieve the list of accepted events. | undefined |
| removeEventHandler(event, handler) | Removes a previously added handler from an event by providing the event name and handler as arguments in the method. | boolean |
| removeAllEventHandlers(event) | Removes all handlers added to the event specified. | boolean |
Can we help?
Thanks for using tamara. Should you need any help or questions, our Support team is always there at [email protected].
About tamara
If you want to know more information about tamara. Please checkout tamara's site [English version|Arabic version].
Request demo
Want a demo? No problem, just kindly send us a demo request to our dev team's email.