Support
Quickstart guide
Checkout Widget
A simple code snippet that allows you to unleash all the power from Hola Cash in your e-commerce.Integrate our solution in just a few minutes.

1. Create an account to access the Sandbox.
Create an account in our Sandbox environment, you just need an email and password to create your account. If you prefer you can use our test API Key:
Copy and paste the Test API Key and use it directly in the API Reference.
pub_sandbox_MjFiENYD.U38HsIFTKLpdiCQwOZYitzBWXgyulH6u
2. Widget customization and payment methods.
You must add the domain of the webpage in which the widget will be displayed, you can also select the payment methods you want to include. Configure them in the Configuration > Widget customization. section.
* It's important that you only add the domain name, without the https protocol or www nor subdomains, for example, if your widget wil be displayed inhttps://holacash.mx/widget , you just have to add holacash.mx.
3. Include Connect.js
Include this code snippet into the <head/> section of your website, replace the {PUBLIC_KEY} with your API Public Key.
The CDN_URL must be replaced depending on the environment you are using:
<script
async
id="holacash-connect"
type="text/javascript"
src="{CDN_URL}/connect.min.js"
data-public-key="{PUBLIC_KEY}">
</script>
4. Include the "PAY" button element
You must include the PAY button which will show the Checkout Widget. Include this snippet where you want the button to load, replacing {PUBLIC_KEY} with your Public API Key. and {ButtonUrlBase} with the following URLs depending on environment you are using:
<div id="instant-holacash-checkout-button">
<object
id="checkout-button"
data={`${ButtonUrlBase}/checkout/button?public_key=${PUBLIC_KEY}`}
data-disabled={false}
/>
</div>
Ensure that the container div has the id instant-holacash-checkout-button and the object tag has id checkout-button
The data-disabled the attribute allows you to disable the button while the order id is fetched from the order API
5. Create an order
You need to create an order with all the details from the products added to your shopping cart in order to create a payment and initialize the Checkout Widget. Remember that the Order must be created before calling HolaCashCheckout.configure.
6. Load the Widget
When the user clicks on the button, PAY, you must initialize the Checkout Widget,passing the Order as a parameter .
HolaCashCheckout.configure(
{
order_id: order_id,
// hints are optional
hints: {
first_name: 'John',
last_name: 'Doe',
second_last_name: 'Doe',
email: 'john.doe@gmail.com',
phone: '13212312412'
},
},
callbacks
);
Callbacks list:
onSuccess -- > we call this callback when the charge is successfull. The parameter passed in is the response of the charge API
onAbort -- > when the user closes the widget (modal/popup)
onError -- > when the charge fails. The parameter is the error object
onEmailEntered -- > when the user completes entering an email
onCheckoutStart -- > when the checkout page is presented
check -- > We will use the check callback to determine if Cash Pay should proceed loading the checkout page. This must return a boolean
const callbacks = {
onSuccess: (res) => {
setSuccessResponse(JSON.parse(res))
setReceiptVisible(true)
console.log('onSuccess', JSON.parse(res))
},
onAbort: () => console.log('onAbort callback'),
onError: (err) => console.log(JSON.stringify(err)),
onEmailEntered: (email) => console.log(email),
onCheckoutStart: () => console.log('checkout started'),
// this function should always return a boolean
check: () => {
return true;
},
};
Pass the object callbacks as second parameter in the HolaCashCheckout.configure()
7. Widget look and feel
This is how the Checkout Widget will look ready to process your Order and its Payment.
8. Webhook
When the payment is processed, a webhook will be sent with the information about the event. To configure the Webhook address, go to the Hola Cash Portalin the Developers section.
9. Widget Demo
In this repo you will be able to download a demo for the widget:
Widget demo