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

![](https://2556322805-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MRlN2yYeruyG-6M2wZN%2Fuploads%2F1LQwPpgbiItmlJxuyL9N%2FScreen%20Shot%202022-04-08%20at%2019.48.08.png?alt=media\&token=9778c02c-7218-4954-ad89-eeb08e19b4f8)

### 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"
  }
}
```