# 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/XG01TSpk1NcutObxQTtY)

### Embedding credit card form

```javascript
<pay-engine style="width: 500px;" 
    id="pf-cc" 
    type="creditcardform" 
    manually-entered="true"
    merchant-id="xxxxxxxxx-xxx-xxxx-xxxx-xxxxxxe315d7"
    show-zip="true"></pay-engine>

<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": {
    "errorMessages": [
      "is required",
      "is not a valid security code"
    ],
    "isDirty": false,
    "isEmpty": true,
    "isFocused": false,
    "isValid": false,
    "isTouched": true,
    "name": "card_cvc"
  }
}
```


---

# 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.payengine.co/developer-docs/processing-payments/credit-card-form.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.