@tamara-solution/checkout/example/js/simple.js

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

function generateRandomReferenceIdForOrder() {
  return Math.random().toString(10).substring(4)
}

function generateRandomEmail() {
  const randomNumber = Math.random().toString(10).substring(5)

  return `nhan.nguyen+checkoutframe-${randomNumber}@tamara.co`
}

function generatePhoneNumber() {
  const prefix = ['50', '55']
  const prefixIndex = Math.floor(Math.random() * prefix.length)
  const phonenumber = Math.floor(1000000 + Math.random() * 9000000)

  return '966' + prefix[prefixIndex] + phonenumber
}

const RANDOM_PHONE_NUMBER = generatePhoneNumber()
const RANDOM_EMAIL = generateRandomEmail()

const CART_DATA = {
  order_reference_id: generateRandomReferenceIdForOrder(),
  total_amount: {
    amount: 10,
    currency: 'SAR',
  },
  description: 'Description',
  country_code: 'SA',
  payment_type: 'PAY_BY_LATER',
  locale: 'en-US',
  items: [
    {
      reference_id: '123',
      type: 'Digital',
      name: 'Lego City 8601',
      sku: 'SA-12436',
      quantity: 1,
      unit_price: {
        amount: 5.0,
        currency: 'SAR',
      },
      discount_amount: {
        amount: '0.00',
        currency: 'SAR',
      },
      tax_amount: {
        amount: '0.00',
        currency: 'SAR',
      },
      total_amount: {
        amount: 5.0,
        currency: 'SAR',
      },
    },
    {
      reference_id: '456',
      type: 'Digital',
      name: 'Lego City 8602',
      sku: 'SA-12436',
      quantity: 1,
      unit_price: {
        amount: 5.0,
        currency: 'SAR',
      },
      discount_amount: {
        amount: '0.00',
        currency: 'SAR',
      },
      tax_amount: {
        amount: '0.00',
        currency: 'SAR',
      },
      total_amount: {
        amount: 5.0,
        currency: 'SAR',
      },
    },
  ],
  consumer: {
    first_name: 'Mona',
    last_name: 'Lisa',
    phone_number: RANDOM_PHONE_NUMBER,
    email: RANDOM_EMAIL,
    national_id: '123459',
    date_of_birth: '2020-03-03',
  },
  billing_address: {
    first_name: 'Mona',
    last_name: 'Lisa',
    line1: '3764 Al Urubah Rd',
    line2: 'string',
    region: 'As Sulimaniyah',
    city: 'Riyadh',
    country_code: 'SA',
    phone_number: RANDOM_PHONE_NUMBER,
  },
  shipping_address: {
    first_name: 'Mona',
    last_name: 'Lisa',
    line1: '3764 Al Urubah Rd',
    line2: 'string',
    region: 'As Sulimaniyah',
    city: 'Riyadh',
    country_code: 'SA',
    phone_number: RANDOM_PHONE_NUMBER,
  },
  discount: {
    name: 'Christmas 2020',
    amount: {
      amount: '0.10',
      currency: 'SAR',
    },
  },
  tax_amount: {
    amount: '0.00',
    currency: 'SAR',
  },
  shipping_amount: {
    amount: '0.00',
    currency: 'SAR',
  },
  merchant_url: {
    success: 'https://store-demo.com/checkout/success',
    failure: 'https://store-demo.com/checkout/failure',
    cancel: 'https://store-demo.com/checkout/cancel',
    notification: 'https://store-demo.com/payments/tamarapay',
  },
  platform: 'Opencart',
}

$(document).ready(function () {
  const BASE_URL = 'https://api-staging.tamara.co/'
  const ENDPOINTS = {
    PARTNER: {
      LOGIN: 'merchants/login',
    },
    CHECKOUT: {
      CHECKOUT: 'checkout',
    },
  }
  const HTTP_METHOD = {
    GET: 'GET',
    POST: 'POST',
  }
  const PARTNER = {
    token: '',
  }
  const ERROR_CODE_MAPPING = {
    'merchant.login_wrong_credentials': 'Login wrong credentials',
  }

  function getErrorMessage(errorCode) {
    return ERROR_CODE_MAPPING[errorCode] || errorCode
  }

  function sendRequest({ endpoint, method, data, options = {} }) {
    const url = BASE_URL + endpoint

    return $.ajax({
      url: url,
      type: method,
      data: data,
      ...options,
    })
  }

  function loginPartner(email, password) {
    return sendRequest({
      endpoint: ENDPOINTS.PARTNER.LOGIN,
      method: HTTP_METHOD.POST,
      data: { email, password },
    })
  }

  function createCheckoutSession(cartData) {
    return sendRequest({
      endpoint: ENDPOINTS.CHECKOUT.CHECKOUT,
      method: HTTP_METHOD.POST,
      data: JSON.stringify(cartData),
      options: {
        headers: {
          Authorization: 'Bearer ' + PARTNER.token,
        },
        contentType: 'application/json',
        dataType: 'json',
      },
    })
  }

  function parseFormDataToObject(formData) {
    return formData.reduce(function (obj, item) {
      obj[item.name] = item.value
      return obj
    }, {})
  }

  function hidePartnerLoginForm() {
    $('#partner-login-form').hide()
  }

  function setReviewData() {
    $('.cart-data').val(JSON.stringify(CART_DATA, null, 4))
  }

  function showCartCheckout() {
    $('#cart-checkout').show()

    // Set review data
    setReviewData()
  }

  function setCheckoutFormListener() {
    $('#checkoutButton').click(function () {
      createCheckoutSession(CART_DATA).done(function (res) {
        const { checkout_url, next_action } = res

        if (checkout_url) {
          TamaraFrame.checkout(checkout_url)
        } else if (next_action) {
          TamaraFrame.checkout(next_action.url)
        }
      })
    })

    $('#select-language').change(function () {
      const locale = $('#select-language').val()

      CART_DATA.locale = locale

      // Refill review data
      setReviewData()
    })
  }

  function setPartnerLoginListener() {
    $('#partner-login-form').submit(function (event) {
      event.preventDefault()

      const formData = $(this).serializeArray()
      const { email, password } = parseFormDataToObject(formData)

      loginPartner(email, password)
        .done(function (res) {
          PARTNER.token = res.token

          hidePartnerLoginForm()
          showCartCheckout()
        })
        .fail(function (error) {
          const { message } = error.responseJSON

          $('#form-message').text(getErrorMessage(message))
        })
    })
  }

  function setEventListener() {
    setPartnerLoginListener()
    setCheckoutFormListener()
  }

  setEventListener()
})