Hello, I have a problem with the sandbox payment, description below:
When the page loads I have this error:
https://connect.squareup.com/payments/data/frame.html?referer=https%3A%2F%2Fdelivered.direct%2Fmy-account%2F
Then the form loads correctly and When I use one of the test cards you provide:
I get this:
With this error:
https://pci-connect.squareup.com/v2/card-nonce?_=1614594491657.0605&version=067ae2dd06
I copied and changed stuff from one of your basic templates, here is the code:
JS
var appID = 'sandbox-sq0idb-tdrncM8QaBQ-jRPBX16oFg';
var locationID = 'L4Y2SNXETYZBN';
// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: appID,
locationId: locationID,
inputClass: 'sq-input',
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
backgroundColor: 'transparent',
color: '#333333',
fontFamily: '"Helvetica Neue", "Helvetica", sans-serif',
fontSize: '16px',
fontWeight: '400',
placeholderColor: '#8594A7',
placeholderFontWeight: '400',
padding: '16px',
_webkitFontSmoothing: 'antialiased',
_mozOsxFontSmoothing: 'grayscale'
}],
// 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: {
createPaymentRequest: function () {
var paymentRequestJson = {
requestShippingAddress: false,
requestBillingInfo: true,
shippingContact: {
familyName: "CUSTOMER LAST NAME",
givenName: "CUSTOMER FIRST NAME",
email: "[email protected]",
country: "USA",
region: "CA",
city: "San Francisco",
addressLines: [
"1455 Market St #600"
],
postalCode: "94103",
phone: "14255551212"
},
currencyCode: "GBP",
countryCode: "UK",
total: {
label: "MERCHANT NAME",
amount: "1.00",
pending: false
},
lineItems: [{
label: "Subtotal",
amount: "1.00",
pending: false
}]
};
return paymentRequestJson;
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData, billingContact, shippingContact) {
if (errors) {
var error_html = "";
for (var i = 0; i < errors.length; i++) {
error_html += "<li> " + errors[i].message + " </li>";
}
document.getElementById("error").innerHTML = error_html;
document.getElementById('sq-creditcard').disabled = false;
return;
} else {
document.getElementById("error").innerHTML = "";
}
// 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 */
}
}
});
function onGetCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
PHP
// dotenv is used to read from the '.env' file created for credentials
$dotenv = Dotenv::create(dirname(__FILE__, 2));
$dotenv->load();
// Pulled from the .env file and upper cased e.g. SANDBOX, PRODUCTION.
$upper_case_environment = strtoupper(getenv('ENVIRONMENT'));
// The access token to use in all Connect API requests.
// Set your environment as *sandbox* if you're just testing things out.
$access_token = getenv($upper_case_environment.'_ACCESS_TOKEN');
// Initialize the Square client.
$client = new SquareClient([
'accessToken' => $access_token,
'environment' => getenv('ENVIRONMENT')
]);
// Helps ensure this code has been reached via form submission
if ($_SERVER['REQUEST_METHOD'] != 'POST') {
error_log('Received a non-POST request');
echo 'Request not allowed';
http_response_code(405);
return;
}
// Fail if the card form didn't send a value for `nonce` to the server
$nonce = $_POST['nonce'];
if (is_null($nonce)) {
echo 'Invalid card data';
http_response_code(422);
return;
}
$payments_api = $client->getPaymentsApi();
// To learn more about splitting payments with additional recipients,
// see the Payments API documentation on our [developer site]
// (https://developer.squareup.com/docs/payments-api/overview).
$money = new Money();
// Monetary amounts are specified in the smallest unit of the applicable currency.
// This amount is in cents. It's also hard-coded for $1.00, which isn't very useful.
$money->setAmount(100);
$money->setCurrency('GBP');
// Every payment you process with the SDK must have a unique idempotency key.
// If you're unsure whether a particular payment succeeded, you can reattempt
// it with the same idempotency key without worrying about double charging
// the buyer.
$create_payment_request = new CreatePaymentRequest($nonce, uniqid(), $money);
// The SDK throws an exception if a Connect endpoint responds with anything besides
// a 200-level HTTP code. This block catches any exceptions that occur from the request.
try {
$response = $payments_api->createPayment($create_payment_request);
// If there was an error with the request we will
// print them to the browser screen here
if ($response->isError()) {
echo 'Api response has Errors';
$errors = $response->getErrors();
echo '<ul>';
foreach ($errors as $error) {
echo '<li>' . $error->getDetail() . '</li>';
}
echo '</ul>';
exit();
}
echo '<pre>';
print_r($response);
echo '</pre>';
} catch (ApiException $e) {
echo 'Caught exception!<br/>';
echo('<strong>Response body:</strong><br/>');
echo '<pre>'; var_dump($e->getResponseBody()); echo '</pre>';
echo '<br/><strong>Context:</strong><br/>';
echo '<pre>'; var_dump($e->getContext()); echo '</pre>';
exit();
}