@tamara-solution/checkout
Version:
Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.
146 lines (112 loc) • 5.11 kB
Markdown
# 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
1. You embedded the `TamaraCheckoutFrame` in your website, then customer now have an option called `pay later via tamara` on your checkout page.
2. Your site later calls `TamaraCheckoutFrame.checkout` to 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 [<help@tamara.co>].
### Add the code snippet to your site
```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
```javascript
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 <help@tamara.co>.
## About tamara
If you want to know more information about tamara. Please checkout tamara's site [[English version](https://tamara.co/merchants-page.html)|[Arabic version](https://tamara.co/ar/merchants-page.html)].
## Request demo
Want a demo? No problem, just kindly send us a demo request to our dev team's [email](mailto:help@tamara.co).