Skip to content

Quick Start

Introduction

This guide will walk you through the creation of a payment form using Liquido's all-in-one card Element. The cardElement simplifies the form and minimizes the number of fields required by inserting a single, flexible input field that securely collects all necessary card details. You can make use of Elements (our pre-built UI components) to create a payment form that securely collects your customer’s card information without you needing to handle sensitive card data. The card details are then converted to a representative token that you can safely send to your servers. Creating a custom payment form with Elements requires four steps:

  1. Set up Liquido Elements.
  2. Create your payment form.
  3. Create a token to securely transmit card information.
  4. Submit the token and the rest of your form to your server.

Before you start: HTTPS requirements

All submissions of payment info using Elements are made via a secure HTTPS connection. However, to protect yourself from certain forms of man-in-the-middle attacks, and to prevent your customers from seeing Mixed Content warnings in modern browsers, you must serve the page containing the payment form over HTTPS as well.

Using Elements

  • Step 1: Set up Elements

    Elements is available from element.js. To get started, include this script on your pages —it should always be loaded directly from https://js.liquido.com/element.js. For testing purposes, you can use https://js.dev.liquido.com/element.js.

    <script src="https://js.liquido.com/element.js"></script>

    Next, create an instance of Elements: 

    const liquidoInstance = liquido('your_api_key')
const elements = elements = liquidoInstance.elements({
    locale: 'en',
    country: 'BR'
})

    For more information on element.js, please visit our element reference page.

  • Step 2: Create your payment form To securely collect card details from your customers, Elements creates UI components for you that are hosted by Liquido. They are then placed into your payment form, rather than you creating them directly.
    To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form.
    For example:

    <form action="/save_card" method="post" id="payment-form">
    <div class="form-item">
        <label>Credit Card</label>
        <div id="card-element">
            <!-- A Liquido Element will be inserted here. -->
        </div>

        <!-- Used to display Element errors. -->
        <div id="card-errors" role="alert"></div>
    </div>
    <div class="form-item">
        <label>Card holder name</label>
        <input id="card-holder" type="text" name="cc-name" placeholder="Card holder name" />
    </div>
    <button>Pay</button>
</form>

    When the form above has loaded, create an instance of an Element and mount it to the Element container created above:

    // Custom styling can be passed to options when creating en Element.
const style = {
base: {
    fontSize: '16px',
    lineHeight: '30px'
}
};

// Create an instance of the card Element.
const card = elements.create('card', { style });

// Add an instance of the card Element into the `card-element` <div>.
card.mount(document.getElementById('card-element'))

    Elements validate user input as it is typed. To help your customers catch mistakes, you should listen to change events on the cardelement and display any errors:

    card.addEventListener('change', (event) => {
const displayError = document.getElementById('card-errors');
displayError.textContent = event.error
    ? event.error.message
    : ''
})

    Set legal policies: For Elements integration, you need to link to Liquido Privacy policy when the customers are completing their checkout to get an agreement on legal terms. You can use the following example to add it: [Merchant name] is powered by Liquido. As such, you are now providing your personal data to Liquido. For more information, please visit the Liquido Privacy Policy.

  • Step 3: Create a token to securely transmit card information The payment details collected using Elements can then be converted into a token. Create an event handler that handles the submitted event on the form. The handler sends the sensitive information to Liquido for tokenization and prevents the form’s submission (the form is submitted by JavaScript in the next step).

    // Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form')
form.addEventListener('submit', (event) => {
event.preventDefault()
const name = document.getElementById('card-holder').value
liquido.createToken(card, {
    name
}).then((result) => {
    // Send the token to your server.
    handleToken(result.data.cardId)
}).catch((result) => {
    if (result.error) {
    // Inform the customer that there was an error.
    const errorEl = document.getElementById('card-errors')
    errorEl.textContent = result.error.message
    }
})
})

  • Step 4: Submit the token and the rest of your form to your server The last step is to submit the token, along with any additional information that has been collected, to your server.

    const handleToken = (token) => {
// Insert the token ID into the form so it gets submitted to the server
const tokenInputEl = document.createElement('input')
tokenInput.setAttribute('type', 'hidden')
tokenInput.setAttribute('name', 'cardToken')
tokenInput.setAttribute('value', token)
form.appendChild(tokenInput)

// Submit the form
form.submit()
}
Back to top