Credit Card Form
Last updated
Last updated
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:
<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>
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
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"
}
}
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"
}
}