1.20.4 • Published 2 years ago
@guruhotel/external-checkout v1.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
- 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();
1.20.1
2 years ago
1.20.2
2 years ago
1.20.3
2 years ago
1.20.4
2 years ago
1.19.0
2 years ago
1.18.1
2 years ago
1.18.0
2 years ago
1.18.2
2 years ago
1.17.2
2 years ago
1.17.1
2 years ago
1.17.0
2 years ago
1.16.0
2 years ago
1.15.0
2 years ago
1.15.1
2 years ago
1.14.1
2 years ago
1.13.2
2 years ago
1.14.0
2 years ago
1.13.1
2 years ago
1.13.0
3 years ago
1.12.0
3 years ago
1.9.0
3 years ago
1.8.0
3 years ago
1.11.0
3 years ago
1.10.1
3 years ago
1.10.0
3 years ago
1.7.0
3 years ago
1.6.0
3 years ago
1.2.4
3 years ago
1.5.0
3 years ago
1.2.3
3 years ago
1.4.0
3 years ago
1.2.2
3 years ago
1.3.0
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.0
3 years ago
1.0.0
3 years ago
1.0.1
3 years ago