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