Credit Card

The Credit Card library is a lightweight JavaScript library that provides an embeddable, secure credit card form for your payment websites.

Installation

Include the SDK in your HTML by adding a <script> tag:

<script src="https://sdk.leanx.io/index.umd.min.js"></script>

Getting Started

Once the library is loaded, you can instantiate the library class and mount the card form into your page. The class provides methods for mounting the form, validating input, and submitting the form.

Instantiating the Library

Create a new instance of the library by passing a configuration object. The configuration options include:

• containerId: An element where the form will be rendered.

const cc = new LeanxCC({
  containerId: 'card-container', // HTML element id where the form will be rendered
});

Mounting the Form

Call the init() method to render the card form inside the specified container.

cc.init()

Using the Library

The library exposes two primary methods to interact with the credit card form:

Card Form Validation

Use the validateCard() method to trigger form validation. This method returns a Promise that resolves to true if there are no validation errors.

await cc.validateCard().then(() => {
    // Form is validated
    console.log("Validated")
}).catch((err) => {
    // Handle error here
    console.error(err)
})

For error listings, please refer to API Reference section below.

Submit Form

You can call the submit() method to submit the form. This method will execute the previous validateCard() method before submitting the form, thus will return the same response if the form has validation errors.

If the form has no validation errors, the method will proceed with submitting the card form, and will redirect to the provider page.

This method requires the following argument:

• id

  A string of Leanx transaction_invoice_no. You can get this from the response of silent bill endpoint.

In a production environment, ensure that the payment_service_id is set to 1100 when generating a silent bill for use with credit card library.

API Reference

LeanxCC Class

The LeanxCC class provides a simple interface to embed and interact with the credit card form.

Constructor

Create a new instance of the library by passing an options object.

new LeanxCC(options)

Options

Name	Type	Description
containerId	string	A string of an HTML Element id

Methods

init()

Renders credit card form into the specified container.

Usage Example:

const cc = new LeanxCC({
    containerId: "card-container"
})

// Mount card in the container
cc.init()

validateCard()

Triggers the form validation. This method returns a Promise that resolves with true if the form is validated, or throw an exception containing an error object.

Usage Example:

await cc.validateCard().then(() => {
    // Form is validated
    console.log("Validated")
}).catch((err) => {
    // Handle error here
    console.error(err)
})

Error Code:

Code	Description
cc-form-validation	Card form has validation error.

submit(id)

This method will validate, submit, then redirect to provider.

Argument	Value
id	Retrieved from transaction_invoice_no when creating a silent bill.

Usage Example:

await cc.submit(id).catch((err) => {
    // Handle error
    console.error(err)
})

Error Code:

Code	Description
cc-form-validation	Card form has validation error.
id-required	Missing argument id.
invalid-id	Invalid transaction_invoice_no value.