npm package: @tamara-solution/checkout
Description: Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.
Author: Nhan Nguyen
Latest version: 1.0.6

# 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.

![Tamara Checkout Frame](https://cdn.tamara.co/iframe/docs/tamara-solution-checkout.jpg)

## 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
<!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

```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).