@paybyrd/card-collect
Version:
Paybyrd's tool to aid in the creation of credit card info collect forms
38 lines (32 loc) • 1.97 kB
HTML
<html><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Paybyrd card collect</title><script defer="defer" src="cardCollect-web.js"></script><script defer="defer" src="main.mjs"></script></head><body><div id="loader">Loading...</div><div id="cardCollect" style="display: none"><div id="cc-holder" class="form-field" data-placeholder="Card Holder"></div><div id="cc-number" class="form-field" data-placeholder="Card Number"></div><div class="form-field-group"><div id="cc-expiration-date" class="form-field" data-placeholder="MM/YY"></div><div id="cc-cvc" class="form-field" data-placeholder="CVV"></div></div><button class="form-button" id="submit-form">Submit</button></div><script type="module">async function init() {
const handleSubmit = () => {
cardCollect_submit()
// Handle paybyrd's response here
.then(({ status, data }) => console.log("Success:", status, data))
// Handle any errors here
.catch((error) => console.log("Error:", error));
};
const handleFieldChange = ({ fieldId, element, error, value, isValid }) => {
console.log(fieldId, element, error, value, isValid);
}
const handleCardCollectFrameLoaded = (data) => {
// With new CardCollect integration, this listener is used to set a loder while
// the form is getting build
console.log("CardCollect Form Loaded: ", data);
document.getElementById('cardCollect').style.display = "block";
document.getElementById('loader').style.display = "none";
}
// Paybyrd card collect initialization
const {
cardCollect_submit,
} = await cardCollect({
displayErrors: true,
onFieldChange: handleFieldChange,
displayHelpIcons: true,
onCardCollectFrameLoaded: handleCardCollectFrameLoaded,
css: `input { background: red; }`,
});
// Form setup
document.getElementById("submit-form").onclick = handleSubmit;
}
init();</script></body></html>