45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
async function CardPay(fieldEl, buttonEl) {
|
|
|
|
// Create a card payment object and attach to page
|
|
const card = await window.payments.card({
|
|
style: {
|
|
'.input-container.is-focus': {
|
|
borderColor: '#006AFF'
|
|
},
|
|
'.message-text.is-error': {
|
|
color: '#BF0020'
|
|
}
|
|
}
|
|
});
|
|
await card.attach(fieldEl);
|
|
|
|
async function eventHandler(event) {
|
|
|
|
// Clear any existing messages
|
|
window.paymentFlowMessageEl.innerText = '';
|
|
|
|
|
|
|
|
try {
|
|
|
|
const result = await card.tokenize();
|
|
// console.log(result);
|
|
if (result.status === 'OK') {
|
|
$('#loading-spinner-overlay').css('visibility', 'visible');
|
|
// Use global method from sq-payment-flow.js
|
|
window.createPayment(result.token);
|
|
}
|
|
} catch (e) {
|
|
if (e.message) {
|
|
// console.log(e.message);
|
|
// window.showError(`Error: ${e.message}`);
|
|
window.showError(`The request is already in process`);
|
|
} else {
|
|
window.showError('Something went wrong');
|
|
}
|
|
}
|
|
}
|
|
|
|
buttonEl.addEventListener('click', eventHandler);
|
|
}
|