I am having difficulty processing a credit card payment through the web SDK in sandbox mode.
So I added some logging javascript code to see where things are stuck. Upon entering a test credit card number that doesn’t require verification as described in square’s documention and clicking pay $1.00, the button greys out and the page is stuck.
Based on my debugging, the code is stuck at:
const verificationToken = await verifyBuyer(payments, token);
and it doesn’t reach…
const paymentResults = await createPayment(token,verificationToken);
I have used the correct appid and locationid values for testing.
and also how do I change the zip code field to the postal code field? I am in Canada.
The code excluding CSS and excluding the actual appID and locationID values follows.
<!doctype html>
<html>
<head>
<link href="/app.css" rel="stylesheet"> <script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<script>
const appId='my-sandbox-app-id',locationId='my-location-id';
async function initializeCard(payments){const card=await payments.card();await card.attach('#card-container');return card}
async function createPayment(token, verificationToken){const body=JSON.stringify({locationId,sourceId:token,verificationToken,idempotencyKey:window.crypto.randomUUID()});
const paymentResponse=await fetch('/payment',{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 with status: ${tokenResult.status}`;
if (tokenResult.errors) {errorMessage+=` and errors: ${JSON.stringify(tokenResult.errors)}`;
}
throw new Error(errorMessage);
}
}
// Required in SCA Mandated Regions: Learn more at https://developer.squareup.com/docs/sca-overview
async function verifyBuyer(payments, token) {
const verificationDetails = {
amount: '1.00',
billingContact: {
givenName: 'John',familyName: 'Doe',
email: '[email protected]',phone: '3214563987',
addressLines: ['123 Main Street', 'Apartment 1'],
city: 'London',state: 'LND',countryCode: 'GB',
},
currencyCode: 'CAD',intent: 'CHARGE',
};
const verificationResults = await payments.verifyBuyer(token,verificationDetails);
return verificationResults.token;
}
// status is either SUCCESS or FAILURE;
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')}
let payments;
try {
payments = window.Square.payments(appId, locationId);
} catch {
const statusContainer = document.getElementById('payment-status-container');
statusContainer.className = 'missing-credentials';statusContainer.style.visibility = 'visible';
return;
}
let card;
try {
card = await initializeCard(payments);
} catch (e) {
console.error('Initializing Card failed', e);return;
}
async function handlePaymentMethodSubmission(event, card) {
console.debug("Starting....");
event.preventDefault();
try {
// disable the submit button as we await tokenization and make a payment request.
console.log("Greying button...");
cardButton.disabled = true;
console.log("Getting token");
const token = await tokenize(card);
console.log("Validating buyer...");
const verificationToken = await verifyBuyer(payments, token);
console.log("Making payment...");
const paymentResults = await createPayment(token,verificationToken);
console.log("Showing success...");
displayPaymentResults('SUCCESS');
console.debug('Payment Success', paymentResults);
console.log("DONE!");
} catch (e) {
cardButton.disabled = false;
displayPaymentResults('FAILURE');
console.error(e.message);
console.log("Payment failed!");
}
}
const cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', async function (event) {
await handlePaymentMethodSubmission(event, card);
});
});
</script>
</head><body>
<form id="payment-form"><div id="card-container"></div><button id="card-button" type="button">Pay $1.00</button></form>
<div id="payment-status-container"></div>
</body>
</html>
