It was from the payment form directly. When I click submit, it generates the nonce, but either way, even without SCA, it ends up doing Payment Failed. I have the SDK installed, but this is what I was using… connect-api-examples/connect-examples/v2/php_payment at master · square/connect-api-examples · GitHub
Sandbox App ID is sandbox-sq0idb-iCCXoi9_2nolNBkH2TJRIg Also since I’m a new user, i’m limited to 3 posts.
Update 625 pm et: My Current Script calls Verify buyer. I’m able to get the SCA Window, but it appears somehow it’s not passing it on to preocess-payment.php . Can I somehow get around this 3 reply limit so I don’t have to keep updating this?
This is what my form looks like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<link href="assets/style.php" rel="stylesheet" />
<script type="text/javascript" src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<script>
const appId = 'sandbox-sq0idb-iCCXoi9_2nolNBkH2TJRIg';
const locationId = '442SK8P2Z1YAH';
async function initializeCard(payments) {
const card = await payments.card();
await card.attach('#card-container');
return card;
}
// verificationToken can be undefined, as it does not apply to all payment methods.
async function createPayment(token, verificationToken) {
const bodyParameters = {
locationId,
sourceId: token,
};
if (verificationToken !== undefined) {
bodyParameters.verificationToken = verificationToken;
}
const body = JSON.stringify(bodyParameters);
const paymentResponse = await fetch('https://dev.bestphpscripts.com/sqtest/process-payment.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: dataJsonString,
//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 {
throw new Error(
`Tokenization errors: ${JSON.stringify(tokenResult.errors)}`
);
}
}
// 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';
}
async function verifyBuyer(payments, token) {
const verificationDetails = {
amount: '1.00',
billingContact: {
addressLines: ['123 Main Street', 'Apartment 1'],
familyName: 'Doe',
givenName: 'John',
email: '[email protected]',
country: 'US',
phone: '3214563987',
region: 'FL',
city: 'Sample City',
},
currencyCode: 'USD',
intent: 'CHARGE',
};
const verificationResults = await payments.verifyBuyer(
token,
verificationDetails
);
return verificationResults.token;
}
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,
paymentMethod,
shouldVerify = false
) {
event.preventDefault();
try {
// disable the submit button as we await tokenization and make a payment request.
cardButton.disabled = true;
const token = await tokenize(paymentMethod);
let verificationToken;
if (shouldVerify) {
verificationToken = await verifyBuyer(payments, token);
}
const paymentResults = await createPayment(
token,
verificationToken
);
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) {
// SCA only needs to be run for Card Payments. All other payment methods can be set to false.
handlePaymentMethodSubmission(event, card, true);
});
});
</script>
</head>
<body>
<form id="payment-form" method="POST" action="process-payment.php">
<div id="afterpay-button"></div>
<div id="card-container"></div>
<button id="card-button" type="button">Pay $1.00</button>
</form>
<div id="payment-status-container"></div>
</body>
</html>