Yes I had based my code on the Github web-payments-quickstart which - in my opinion - over complicated things by abstracting too much into separate functions. Because the examples are written in plain JS, translating this into the life cycle hooks of a framework such as Vue, I must’ve encountered the issue of some promises from API calls not yet being fulfilled. I therefore dug into the Docs (https://developer.squareup.com/docs/web-payments/take-card-payment) and adjusted my code:
async mounted() {
if (!window.Square) {
throw new Error('Square.js failed to load properly');
}
const payments = Square.payments(CONST.SQUARE.APPLICATION_ID, CONST.SQUARE.LOCATION_ID);
const card = await payments.card();
const reservationCode = this.$store.getters.getReservationCode
// console.log(`Reservation code is ${reservationCode}`)
await card.attach('#card-container');
const cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', async (event) => {
event.preventDefault();
try {
cardButton.disabled = true;
const result = await card.tokenize();
if (result.status === 'OK') {
console.log(`Payment token is ${result.token}`);
const paymentResults = await this.createPayment(result.token, reservationCode);
this.displayPaymentResults('SUCCESS');
console.debug('Payment Success', paymentResults);
}
} catch (e) {
cardButton.disabled = false;
this.displayPaymentResults('FAILURE');
console.error(e);
}
});
},
The code above is executed when this component is mounted into the DOM, i.e. when the payment component is loaded. It only refers to two separately defined methods (createPayment() and displayPaymentResult()) which are pretty much copy&pasted from the Docs.
I hope this helped 