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:

Production environment

https://widget.connect.holacash.mx

Sandbox environment

https://widget.connect.sandbox.holacash.mx

Copy

Copied

<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:

Production environment

https://live.api.holacash.mx/v2

Sandbox environment

https://sandbox.api.holacash.mx/v2

Copy

Copied

<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 .

Copy

Copied

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

Copy

Copied

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