npm package: @guruhotel/external-checkout
Description: Library to consume GuruHotel checkout in a secure way
Author: Eduardo Enriquez
Latest version: 1.20.4

# 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

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

## using es6

```sh
npm install @guruhotel/external-checkout
```

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

## usage

### standalone example

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

```js
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

```html
<!-- 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>
```

```js
// 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

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

```js
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

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