Thank, Isabelle_, for your reply.
This is more or less the relevant code I'm using:
THE FORM
<html>
<head>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="text/javascript" src="../square/sqform.js"></script>
<link rel="stylesheet" type="text/css" href="../square/sqpaymentform.css">
</head>
<body>
<div id="container">
<div id="sq-ccbox">
<form method="post" id="nonce-form" name="theform" novalidate action="add-card.php">
<p class="form-header">CREDIT CARD</p>
<table class="registration-table">
<tbody>
<tr>
<th>Credit card number:</th>
<td>
<input type="hidden" name="id" value="<?php echo $_GET['id'] ?>"/>
<div id="sq-card-number"></div>
<p style="font-weight: normal">Last four: <?php echo substr($row_ccinfo->creditcard_number, -4); ?></p>
</td>
</tr>
<tr>
<th>Name on Card:</th>
<td>
<input type="text" name="creditcard_nameoncard"
value="<?php echo $row_ccinfo->creditcard_nameoncard ?>">
</td>
</tr>
<tr>
<th>CC identification number:</th>
<td>
<div id="sq-cvv"></div>
</td>
</tr>
<tr>
<th>Expiration:</th>
<td>
<div id="sq-expiration-date"></div>
</td>
</tr>
<tr>
<th>Billing Address Line1:</th>
<td>
<input type="text" name="billing_address1"
value="<?php echo $row_billingaddress->billing_address1 ?>">
</td>
</tr>
<tr>
<th>Billing Address Line2:</th>
<td>
<input type="text" name="billing_address2"
value="<?php echo $row_billingaddress->billing_address2 ?>">
</td>
</tr>
<tr>
<th>City:</th>
<td>
<input type="text" name="billing_city"
value="<?php echo $row_billingaddress->billing_city ?>">
</td>
</tr>
<tr>
<th>Zip Code:</th>
<td>
<div id="sq-postal-code"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button name="updatecard" id="sq-creditcard" class="btn toright"
onclick="requestCardNonce(event)">
Update Card
</button>
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="card-nonce" name="nonce">
</form>
</div>
</div>
</body>
</html>
add-card.php
<?php
// Configure OAuth2 access token for authorization: oauth2
$accessToken = 'production-token-here';
$nonce = $_POST['nonce'];
\SquareConnect\Configuration::getDefaultConfiguration()->setAccessToken($accessToken);
$customersApi = new \SquareConnect\Api\CustomersApi();
$cardholderName = $_POST['creditcard_nameoncard'];
$squareCustomerId = getSquareCustomerId($link, $accountId);
$companyId = 'company-id';
$body = new \SquareConnect\Model\CreateCustomerCardRequest();
$body->setCardNonce($nonce);
if (is_null($nonce)) {
echo "Invalid card data";
http_response_code(422);
return;
}
try {
$result = $customersApi->createCustomerCard(
$squareCustomerId,
array(
"card_nonce" => $nonce,
"cardholder_name" => $cardholderName
)
);
$customerCard = $result->getCard();
} catch (Exception $e) {
echo "<pre>";
echo "Customer Id : $squareCustomerId<br>";
echo "Exception when calling CustomersApi->createCustomerCard: ", $e->getMessage(), PHP_EOL;
echo "</pre>";
}
?>
<html>
<head>
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script type="text/javascript" src="../square/sqform.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<p class="form-header">THE CREDIT CARD HAS BEED REGISTRATED</p>
<table class="registration-table">
<tbody>
<tr>
<th>Credit card number:</th>
<td>
<p>**** **** **** <?php echo $creditCardInfo['creditcard_number']; ?></p>
</td>
</tr>
<tr>
<th>Name on Card:</th>
<td>
<p><?php echo $_POST['creditcard_nameoncard']; ?></p>
</td>
</tr>
<tr>
<th>Card type:</th>
<td>
<p><?php echo $creditCardInfo['creditcard_type']; ?></p>
</td>
</tr>
<tr>
<th>Expiration:</th>
<td>
<p><?php echo $creditCardInfo['creditcard_expmonth'] ?>
/<?php echo $creditCardInfo['creditcard_expyear'] ?>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
sqform.js
// Set the application ID
let applicationId = "production-application-id";
// Set the location ID
let locationId = "production-location-id";
// function: requestCardNonce
// requestCardNonce is triggered when the "Pay with credit card" button is clicked
//
// Modifying this function is not required, but can be customized if you wish to take additional action when the
// form button is clicked.
function requestCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
// Create and initialize a payment form object
let paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: '**** **** **** ****'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code'
},
// SqPaymentForm callback functions
callbacks: {
// callback function: cardNonceResponseReceived
// Triggered when: SqPaymentForm completes a card nonce request
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (nonce) {
// Assign the nonce value to the hidden form field
document.getElementById('card-nonce').value = nonce;
// POST the nonce form to the payment processing page
document.getElementById('nonce-form').submit();
}
},
// * callback function: unsupportedBrowserDetected
// * Triggered when: the page loads and an unsupported browser is detected
unsupportedBrowserDetected: function () {
/* PROVIDE FEEDBACK TO SITE VISITORS */
},
// callback function: inputEventReceived
// Triggered when: visitors interact with SqPaymentForm iframe elements.
inputEventReceived: function (inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
/* HANDLE AS DESIRED */
break;
case 'errorClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
// callback function: paymentFormLoaded
// Triggered when: SqPaymentForm is fully loaded
paymentFormLoaded: function () {
/* HANDLE AS DESIRED */
}
}
});
I think that's it.
I coded all these about a year ago and worked very well until a few days ago. I haven't changed anything since then.
I appreciate any help provided.
