async function initializeCard(payments) {
const card = await payments.card();
await card.attach(’#card-container’);
return card;
}
async function createPayment(token) {
const body = JSON.stringify({
locationId,
sourceId: token,
});
const paymentResponse = await fetch(‘index.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body,
});
if (paymentResponse.ok) {
return paymentResponse.json();
}
const errorBody = await paymentResponse.text();
throw new Error(errorBody);
}
async function tokenize(paymentMethod) {
const tokenResult = await paymentMethod.tokenize();
if (tokenResult.status === ‘OK’) {
return tokenResult.token;
} else {
let errorMessage = Tokenization failed-status: ${tokenResult.status};
if (tokenResult.errors) {
errorMessage += and errors: ${JSON.stringify( tokenResult.errors )};
}
throw new Error(errorMessage);
}
}
function displayPaymentResults(status) {
const statusContainer = document.getElementById(
‘payment-status-container’
);
if (status === ‘SUCCESS’) {
statusContainer.classList.remove(‘is-failure’);
statusContainer.classList.add(‘is-success’);
} else {
statusContainer.classList.remove(‘is-success’);
statusContainer.classList.add(‘is-failure’);
}
statusContainer.style.visibility = ‘visible’;
}
document.addEventListener(‘DOMContentLoaded’, async function () {
if (!window.Square) {
throw new Error(‘Square.js failed to load properly’);
}
const payments = window.Square.payments(appId, locationId);
let card;
try {
card = await initializeCard(payments);
} catch (e) {
console.error(‘Initializing Card failed’, e);
return;
}
// Checkpoint 2.
async function handlePaymentMethodSubmission(event, paymentMethod) {
event.preventDefault();
try {
cardButton.disabled = true;
const token = await tokenize(paymentMethod);
const paymentResults = await createPayment(token);
displayPaymentResults('SUCCESS');
console.debug('Payment Success', paymentResults);
} catch (e) {
cardButton.disabled = false;
displayPaymentResults('FAILURE');
alert(e);
console.error(e.message);
}
}
const cardButton = document.getElementById(
‘card-button’
);
cardButton.addEventListener(‘click’, async function (event) {
await handlePaymentMethodSubmission(event, card);
});
});
</script>
Sorry for the delay. I don’t see the locationId configured in what you provided. Also whats the error message you’re getting? 