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.

PayEngine also provides a very convenient way to quickly render credit card form by using the PayEngine 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"
  }
}

Last updated