1.0.6 • Published 1 year ago

@tamara-solution/checkout v1.0.6

Weekly downloads
1
License
MIT
Repository
gitlab
Last release
1 year ago

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 KeyDescriptionDefault
debugSet to true to view console messages.false
namespaceCustomize the default TamaraCheckoutFrame namespace.TamaraCheckoutFrame

Events

Javascript constantDescription
READYTriggered when TamaraCheckoutFrame is registered on the global namespace and safe to use.
STARTEDTriggered when the iframe is injected to DOM.
LOADEDTriggered when the iframe is loaded and rendered.
CLOSEDTriggered when the iframe is closed.
SUCCESSTriggered when the order has been confirmed by user.
FAILEDTriggered when the order has been rejected by tamara.
CANCELEDTriggered when the order has been rejected by user.

Adding an event handler

TamaraCheckoutFrame.addEventHandler(TamaraCheckoutFrame.Events.%event_constant%, handler);

Actions

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

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago