I tried everything and I just can’t get the example code provided by square to function properly in production mode. Every-time I run a credit card I get a “Payment failed” error.
I’m not sure what I’m doing wrong but I tried everything.
I recently started a thread about this, too. If you get any answers, could you let me know? Thanks.
I’ll keep you updated.
Is there any console errors or errors in your Logs when trying to process the payment? Also what’s your application Id?
I’m having a hard time figuring out how the api call get generated with php v 5.6. I also don’t have terminal access to my server which makes most of the guides unworkable.
Looking at the logs I see that you are successfully generating the source_id however it’s not hitting the payment request. With the Quickstart you will want to make sure that you do all the deployment tasks. For testing locally you can duplicate the env.example and instead of renaming it env.sandbox call it env.production . Then run npm start to start the server locally. 
Tried everything you said and i went through the deployment tasks and I’m still getting the payment failed error.
What’s your application Id?
The only error I’m getting is that the “payment failed”
Application ID sq0idp-w-llmys5nr0_TXsanUdRAw
Thanks for providing the ID. Looking at the logs it appears that it’s failing when trying to create the source_id. I see the request to create the source_id but they are failing. Is the card information that you are passing in valid card information?
I’m using my credit card information to test the submission.
If you’re using the sandbox you cannot use a real card. You need to use one of the tests card numbers provided. https://developer.squareup.com/docs/testing/test-values
Would you mind providing your card.html so we can take a look?
const appId = 'sq0idp-w-llmys5nr0_TXsanUdRAw';
const locationId = '2S9R1RXF3HVP0';
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('/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);
}
}
// 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;
}
// Checkpoint 2.
async function handlePaymentMethodSubmission(event, paymentMethod) {
event.preventDefault();
try {
// disable the submit button as we await tokenization and make a payment request.
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');
console.error(e.message);
}
}
const cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', async function (event) {
await handlePaymentMethodSubmission(event, card);
});
});
</script>
Do you have a way where I can send you the file instead of pasting it in the txt box.
Here’s the link …
https://www.recordmydocuments.com/square/public/examples/card.html
Thanks for providing the snippet and the link. I was able to get what you provided to work successfully in production with my credentials once I changed the href for the stylesheet back to what our original example was. It looks like the issue is in your css. One thing I noticed is that the form field isn’t asking for the zip code with means something is wrong. Once it asked for the postal code it worked as expected.
I changed the href for the css file and it doesn’t show the payment fails message anymore but also it doesn’t process the payment or give any message to show the payment was successful.
@BalaGee69 Were you able to resolve the issue?