@paybyrd/card-collect
Version:
Paybyrd's tool to aid in the creation of credit card info collect forms
69 lines (59 loc) • 2.05 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Paybyrd card collect</title>
<style>
div.myfield {
height: 60px;
}
div.myfield>input {
background: purple;
}
</style>
<script defer="defer" src="cardCollect-web.js"></script>
</head>
<body>
<div id="loader">Loading...</div>
<div id="cardCollect" style="display: none">
<div id="cc-holder" class="form-field myfield" 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,
});
// Form setup
document.getElementById("submit-form").onclick = handleSubmit;
}
init();</script>
</body>
</html>