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:

Embedding credit card form

<pay-engine style="width: 500px;" 
    id="pf-cc" 
    type="creditcardform" 
    manually_entered="yes"
    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

Example payload on success event

{
  "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

{
  "card_cvc": {
    "errorMessages": [
      "is required",
      "is not a valid security code"
    ],
    "isDirty": false,
    "isEmpty": true,
    "isFocused": false,
    "isValid": false,
    "isTouched": true,
    "name": "card_cvc"
  }
}