@tamara-solution/checkout NPM

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 TamaraCheckoutFrame in your website, then customer now have an option called pay later via tamara on your checkout page.
Your site later calls TamaraCheckoutFrame.checkout to confirm payment of order via tamara.

Tamara Checkout Frame

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

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