Card payment Problem face

Questions
1
Pay $1.00
const appId = 'sandbox-sq0idb-mdh1BUZ08uyHam9n9uR89A'; const locationId = ''; 
 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>

url : https://www.pgayurvedprayojanam.in/payment.php

2

:wave: Sorry for the delay. I don’t see the locationId configured in what you provided. Also whats the error message you’re getting? :slightly_smiling_face: