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();