Cash Developer Portal

Support

Whatsapp
    PAYMENTS API
      Quickstart guide
      Sample Code
      Error codes
      hola.cash eCommerce API
      Authentication
      tokenization
      transaction
      order
      checkout
      beta
      continuation
    CHECKOUT WIDGET
      Quickstart guide
      Sample code
    TUTORIALS
      Anti Fraud
      Webhooks
      3DS
      CVV
      Magento plugin
      Woocommerce plugin
    CONTACT
      Create account
      Contact us

Support

Whatsapp
ENG-US
ES-MX
BackBack to home

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.

picture_1

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:

  1. onSuccess -- > we call this callback when the charge is successfull. The parameter passed in is the response of the charge API

  2. onAbort -- > when the user closes the widget (modal/popup)

  3. onError -- > when the charge fails. The parameter is the error object

  4. onEmailEntered -- > when the user completes entering an email

  5. onCheckoutStart -- > when the checkout page is presented

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

Button icon