Я пытаюсь использовать Квадратный платежный шлюз, используя код API, указанный в приведенном ниже URL-адресе
[http://significanttechno.com/square-payment-gateway-integration-using-php]
Однако, хотя я копировал и пытался проверить тот же код на моем сервере, кажется, ничего не работает.
Форма не позволяет мне вводить данные карты, и даже если я добавлю к ней теги ввода и попытаюсь отправить форму, она не перенаправить на страницу действий ..
Код выглядит так:
Индекс. php
<html>
<head>
<title>Square Payment Gateway</title>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link to the SqPaymentForm library -->
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform">
</script>
<!-- link to the local SqPaymentForm initialization -->
<script type="text/javascript" src="sqpaymentform.js">
</script>
<!-- link to the custom styles for SqPaymentForm -->
<link rel="stylesheet" type="text/css" href="sqpaymentform-basic.css">
<script>
document.addEventListener("DOMContentLoaded", function(event) {
if (SqPaymentForm.isSupportedBrowser()) {
paymentForm.build();
paymentForm.recalculateSize();
}
});
</script>
</head>
<body>
<div id="form-container">
<div id="sq-ccbox">
<!--
Be sure to replace the action attribute of the form with the path of
the Transaction API charge endpoint URL you want to POST the nonce to
(for example, "/process-card")
-->
<form id="nonce-form" novalidate action="payment-process.php" method="post">
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button>
<div id="error"></div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="amount" name="amount" value="100">
<input type="hidden" id="card-nonce" name="nonce">
</form>
</div> <!-- end #sq-ccbox -->
</div> <!-- end #form-container -->
</body>
</html>
sqpaymentform. js
// Set the application ID
var applicationId = "APPLICATION-ID";
// Set the location ID
var locationId = "LOCATION-ID";
function buildForm(form) {
if (SqPaymentForm.isSupportedBrowser()) {
form.build();
form.recalculateSize();
}
}
function buildForm1() {
if (SqPaymentForm.isSupportedBrowser()) {
var paymentDiv = document.getElementById("form-container");
if (paymentDiv.style.display === "none") {
paymentDiv.style.display = "block";
}
paymentform.build();
paymentform.recalculateSize();
} else {
// Show a "Browser is not supported" message to your buyer
}
}
/*
* 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
var paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
autoBuild: false,
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '16px',
fontFamily: 'Helvetica Neue',
padding: '16px',
color: '#373F4A',
backgroundColor: 'transparent',
lineHeight: '24px',
placeholderColor: '#CCC',
_webkitFontSmoothing: 'antialiased',
_mozOsxFontSmoothing: 'grayscale'
}],
// Initialize Apple Pay placeholder ID
applePay: false,
// Initialize Masterpass placeholder ID
masterpass: false,
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: 'XXXX XXXX XXXX XXXX'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: '12345'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
* Replace the JSON object declaration with a function that creates
* a JSON object with Digital Wallet payment details
*/
createPaymentRequest: function () {
return {
requestShippingAddress: false,
requestBillingInfo: true,
currencyCode: "USD",
countryCode: "US",
total: {
label: "MERCHANT NAME",
amount: "100",
pending: false
},
lineItems: [
{
label: "Subtotal",
amount: "100",
pending: false
}
]
}
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log("Encountered errors:");
errors.forEach(function (error) {
console.log(' er= ' + error.message);
alert(error.message);
});
return;
}
// 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':
document.getElementById("error").innerHTML = "Please fix card information errors before continuing.";
break;
case 'errorClassRemoved':
/* HANDLE AS DESIRED */
document.getElementById("error").style.display = "none";
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 */
console.log("The form loaded!");
}
}
});
процесс оплаты. php
<?php
require 'vendor/autoload.php';
$access_token = 'ACCESS-TOKEN';
# setup authorization
\SquareConnect\Configuration::getDefaultConfiguration()->setAccessToken($access_token);
# create an instance of the Transaction API class
$transactions_api = new \SquareConnect\Api\TransactionsApi();
$location_id = 'LOCATION-ID';
$nonce = $_POST['nonce'];
$request_body = array (
"card_nonce" => $nonce,
# 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.
"amount_money" => array (
"amount" => (int) $_POST['amount'],
"currency" => "USD"
),
# 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.
"idempotency_key" => uniqid()
);
try {
$result = $transactions_api->charge($location_id, $request_body);
// print_r($result);
// echo '';
if($result['transaction']['id']){
echo 'Payment success!';
echo "Transation ID: ".$result['transaction']['id']."";
}
} catch (\SquareConnect\ApiException $e) {
echo "Exception when calling TransactionApi->charge:";
var_dump($e->getResponseBody());
}
?>
Обратите внимание, что я скачал "Square SDK" как указано и добавлено идентификатор местоположения и токен доступа от учетной записи Square.
Любая помощь приветствуется.