@guruhotel/external-checkout

external-checkout by guruhotel

Options

Parameter	Value	Description
apiKey	pk_123	the private key generated in the hotel dashbaord
sandbox	true or false (false by default)	this will allow you to test the iframe calls in a sandbox environment
render	true or false (true by default)	this value determine if lib initialization display or not the iframe
containerName	html element id	the lib will take this param to build the iframe
styles.width	size in % or px	this value will be the width of the container max is 100%
styles.height	size in % or px	this value will be the height of the container max is 100%
styles.overflow	hidden or visible or scroll or auto	this value specifies whether to clip the content or to add scrollbars

Using via cdn

1. import script

<script src="https://external-checkout.guruhotel.com/v1/index.min.js"></script>

using es6

npm install @guruhotel/external-checkout

import GuruCheckout from "@guruhotel/external-checkout";

usage

standalone example

<div id="gh-checkout"></div>

const params = {
  apiKey: "<YOUR-PRIVATE-KEY>",
  sandbox: true,
  containerName: "gh-checkout",
  styles: {
    width: "100%",
    height: "100%",
    left: "0",
    overflow: "hidden",
    position: "fixed",
    top: "0"
  },
};

const checkout = new GuruCheckout(params);

Passing query params

<!-- index.html -->
<form id="gh-form" onsubmit="javascript:handleSubmit">
  <input name="arrival" type="date" />
  <input name="departure" type="date" />
  <select name="currency" required>
    <option value="MXN">MXN</option>
    <option value="USD">USD</option>
  </select>
  <button id="gh-form-submit" type="submit">Open checkout</button>
</form>
<div id="gh-checkout"></div>

// index.js
const params = {
  apiKey: "<YOUR-PRIVATE-KEY>",
  render: false, // wait render until user triggers search method
  sandbox: true,
  containerName: "gh-checkout",
  styles: {
    width: "100%",
    height: "100%",
    left: "0",
    overflow: "hidden",
    position: "fixed",
    top: "0"
  },
};
const checkout = new GuruCheckout(params);

const form = document.getElementById("gh-form");
form.onsubmit = handleSubmit;

function handleSubmit(e) {
  e.preventDefault();
  const arrival = e.target[0].value;
  const departure = e.target[1].value;
  const currency = e.target[2].value;

  // use search function to pass form values to iframe
  checkout.search({
    arrival,
    departure,
    currency,
  });
}

Payment link

<div id="gh-checkout"></div>

const params = {
  apiKey: "<YOUR-PRIVATE-KEY>",
  sandbox: true,
  containerName: "gh-checkout",
  styles: {
    width: "100%",
    height: "100%",
    left: "0",
    overflow: "hidden",
    position: "fixed",
    top: "0"
  },
};
const checkout = new GuruCheckout(params);

// this will enable the functionality of listen for payment links
checkout.paymentLinkListener();

Close checkout

const params = {
  apiKey: "pk_xxxxxxxxx",
  sandbox: true, // default false
  containerName: "gh-checkout",
  styles: {
    width: "100%",
    height: "100%",
    left: "0",
    overflow: "hidden",
    position: "fixed",
    top: "0"
  },
};
const checkout = new GuruCheckout(params);

// trigger this whenever you want to set containers visibility to 'visible'
checkout.makeVisible();