> For the complete documentation index, see [llms.txt](https://docs.payengine.co/developer-docs-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/developer-docs-v2.5/processing-payments/credit-card-form.md).

# Credit Card Form

### Overview

SecureFields JS provides building blocks to securely capture (tokenize) credit card information which then can be used to execute sale requests.

You are also provided a very convenient way to quickly render credit card form by using this web component:

![](/files/1mfcj1Gyijx60pd9BJhY)

### Embedding credit card form

```javascript
<payment-platform style="width: 500px;" 
    id="pf-cc" 
    type="creditcardform" 
    manually_entered="true"
    merchant_id="xxxxxxxxx-xxx-xxxx-xxxx-xxxxxxe315d7"
    show_zip="true"></payment-platform>

<button id="btn">Save</button>

<script>
    //--> Reference to UI element
    var component = document.querySelector("#pf-cc");
    var button = document.querySelector("#btn");

    //--> Success event to get the card 
    component.addEventListener("success", function(card) {
        console.log("Card created successfully", card.detail)
    });
    
    //--> Error handler
    component.addEventListener("error", function(e) {
        console.log("Unable to create card", e.detail)
    });
    
    //--> Submitting form if needed
    button.addEventListener("click", function(e) {
        e.preventDefault();
        component.submit();
    });
</script>
```

### Properties

| Property/Method    | Description                                                                 |
| ------------------ | --------------------------------------------------------------------------- |
| `manually_entered` | `true/false`. True if the merchants enter the credit card information       |
| `show_zip`         | `true/false` Controls whether zip is displayed or not                       |
| `submit`           | Submits the form and send response back to event handlers                   |
| `success`          | Success handler is called if the card tokenization is successful            |
| `error`            | Error handler is called if system can not tokenize the provided card detail |

{% hint style="info" %}
**Visa 3D Secure Mandate**

Partners must collect cardholder's mobile number OR email address during payment processing. For this purpose, set show\_email = "true" and/or show\_phone\_number = "true"
{% endhint %}

#### Example payload on `success` event

```javascript
{
  "env": "sandbox",
  "token": "card_test_6WXdHYzhxfzmF33t3tb80Z3V",
  "card_data": {
    "id": "5f972fdb-98f5-4da1-afa3-1c9b6732d5b2",
    "brand": "visa",
    "last_4": "1111",
    "exp_month": 12,
    "exp_year": 23,
    "name": "JOHN DOE"
  }
}
```

#### Example payload on `error` event

```javascript
{
  "card_cvc": {
    "error_messages": [
      "is required",
      "is not a valid security code"
    ],
    "is_dirty": false,
    "is_empty": true,
    "is_focused": false,
    "is_valid": false,
    "is_touched": true,
    "name": "card_cvc"
  }
}
```