Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@tamara-solution/checkout

tamara-frontend41MIT1.0.6

Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.

tamara, tamara-checkout, tamara-solution, payafter

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

  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

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

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|Arabic version].

Request demo

Want a demo? No problem, just kindly send us a demo request to our dev team's email.