# Credit Card

## Installation

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

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

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

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

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

{% hint style="info" %}
For error listings, please refer to [API Reference](/api-docs/library/credit-card.md#leanxcc-class) section below.
{% endhint %}

### 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.&#x20;

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`

  &#x20;A string of Leanx `transaction_invoice_no`. You can get this from the response of [silent bill endpoint](/api-docs/quick-start/accepting-using-own-page.md#step-2-create-silent-bill).&#x20;

{% hint style="warning" %}
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.
{% endhint %}

## API Reference&#x20;

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

```javascript
new LeanxCC(options)
```

**Options**

<table><thead><tr><th width="246">Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>containerId</code></td><td>string</td><td>A string of an HTML Element <code>id</code></td></tr></tbody></table>

#### Methods

`init()`

Renders credit card form into the specified container.

**Usage Example:**

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

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

&#x20;

`validateCard()`&#x20;

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

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

**Error Code:**

<table><thead><tr><th>Code</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><code>cc-form-validation</code></td><td>Card form has validation error.</td><td></td></tr></tbody></table>

`submit(id)`&#x20;

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

<table><thead><tr><th>Argument</th><th>Value</th><th data-hidden></th></tr></thead><tbody><tr><td><code>id</code></td><td>Retrieved from <code>transaction_invoice_no</code> when creating a <a href="/pages/gflXb6wtj5VMMeUB50eK#step-2-create-silent-bill">silent bill</a>.</td><td></td></tr></tbody></table>

**Usage Example:**

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

**Error Code:**

<table><thead><tr><th>Code</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><code>cc-form-validation</code></td><td>Card form has validation error.</td><td></td></tr><tr><td><code>id-required</code></td><td>Missing argument <code>id</code>.</td><td></td></tr><tr><td><code>invalid-id</code></td><td>Invalid <code>transaction_invoice_no</code> value.</td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.leanx.io/api-docs/library/credit-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.