Square Connect — Настройка формы

Я пытаюсь создать форму оплаты, которая позволяет центру по уходу за детьми принимать платежи, указанные клиентом, введя номер. Я получил базовую форму для работы с базовой настройкой, найденной на их Github, так что я настроен и работает правильно. Моя проблема в том, что я являюсь дизайнером внешнего интерфейса и не могу понять, как заставить другие поля выдвигать информацию о карте. У меня есть все необходимые файлы для запуска Square Connect API. Вот соответствующий код у меня пока …

Моя форма (в payment.php):

  <script>
var sqPaymentForm = new SqPaymentForm({
// Replace this value with your application's ID (available from the merchant dashboard).
// If you're just testing things out, replace this with your _Sandbox_ application ID,
// which is also available there.
applicationId: 'MY-APPLICATION-ID',
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-number',
placeholder: "0000 0000 0000 0000"},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal Code'
},
// inputStyles: [
//   // Because this object provides no value for mediaMaxWidth or mediaMinWidth,
//   // these styles apply for screens of all sizes, unless overridden by another
//   // input style below.
//   {
//     fontSize: '14px',
//     padding: '3px'
//   },
//   // These styles are applied to inputs ONLY when the screen width is 400px
//   // or smaller. Note that because it doesn't specify a value for padding,
//   // the padding value in the previous object is preserved.
//   {
//     mediaMaxWidth: '400px',
//     fontSize: '18px',
//   }
// ],
callbacks: {
cardNonceResponseReceived: function(errors, nonce, cardData) {
if (errors) {
var errorDiv = document.getElementById('errors');
errorDiv.innerHTML = "";
errors.forEach(function(error) {
var p = document.createElement('p');
p.innerHTML = error.message;
errorDiv.appendChild(p);
});
} else {
// This alert is for debugging purposes only.
alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));
// Assign the value of the nonce to a hidden form element
var nonceField = document.getElementById('card-nonce');
nonceField.value = nonce;
// Submit the form
document.getElementById('form').submit();
}
},
unsupportedBrowserDetected: function() {
// Alert the buyer that their browser is not supported
}
}
});
function submitButtonClick(event) {
event.preventDefault();
sqPaymentForm.requestCardNonce();
}
</script>
<form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post">
<div class="personal-info uk-flex uk-flex-column">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;">
<input type="text" placeholder="Last Name" id="family_name" class="uk-form-large">
</div>
<input type="text" placeholder="Billing Address" class="uk-form-large">
<input type="text" placeholder="City" class="uk-form-large">
<select class="uk-form-large">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large">
</div>
<div class="card-info uk-flex uk-flex-column">
<input type="text" placeholder="Phone Number" class="uk-form-large">
<input type="email" placeholder="Email" class="uk-form-large">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input type="text" placeholder="Amount" class="uk-form-large">
<select class="uk-form-large">
<option>Visa</option>
<option>Mastercard</option>
<option>Discover</option>
<option>American Express</option>
</select>
</div>
<input type="text" placeholder="Card Number" id="sq-card-number" class="uk-form-large">
<div class="exp-cvv-group uk-flex uk-flex-space-between">
<input type="text" placeholder="MM/YY" id="sq-expiration-date" class="uk-form-large">
<input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini">
</div>
</div>
<input type="hidden" id="card-nonce" name="nonce">
<div class="billing-button-container">
<input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button"></div>
</div>
</form>
<div id="errors"></div>

Мой процессор (в process-card.php):

<?php
require 'vendor/autoload.php';
# Replace these values. You probably want to start with your Sandbox credentials
# to start: https://docs.connect.squareup.com/articles/using-sandbox/
# The ID of the business location to associate processed payments with.
# If you're testing things out, use a sandbox location ID.
#
# See [Retrieve your business's locations](https://docs.connect.squareup.com/articles/getting-started/#retrievemerchantprofile)
# for an easy way to get your business's location IDs. If the php page is not rendering, make sure
# that error reporting is turned on. If you get an error that says, "Fatal error: Uncaught
# exception 'SquareConnect\ApiException' with message 'API call to
# https://connect.squareup.com/v2/locations failed, but for an unknown reason." This is most likely
# caused by blocked outgoing ports in the web server. Contact host provider for resolution.
$location_id = 'MY-LOCATION-ID';
# The access token to use in all Connect API requests. Use your *sandbox* access
# token if you're just testing things out.
$access_token = 'MY-ACCESS-TOKEN';
# 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;
}
$transaction_api = new \SquareConnect\Api\TransactionApi();
$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" => 100,
"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()
);
# 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 {
$result = $transaction_api->charge($access_token, $location_id, $request_body);
echo "<pre>";
print_r($result);
echo "</pre>";
} catch (\SquareConnect\ApiException $e) {
echo "Caught exception!<br/>";
print_r("<strong>Response body:</strong><br/>");
echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>";
echo "<br/><strong>Response headers:</strong><br/>";
echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>";
}

Обратите внимание, что я заменил все ссылки на MY-что-либо на правильные значения для моего приложения. (Как я уже сказал, у меня есть основная форма работы.)

Я не ищу никого, кто мог бы написать весь код как таковой, но кто-то может указать мне, как начать. Мне нужно получить информацию о клиенте, чтобы пройти с платежом, возможно, с запиской, чтобы перечислить ребенка (Ren). Я знаю, что мне придется добавить поле формы, чтобы включить примечание, но я даже не знаю, как заставить имя работать, поэтому мне нужно сначала разобраться с этим, а потом я могу выяснить остальное. Другое, мне нужно знать, как добавить поле суммы, которое родитель может указать, сколько он хочет заплатить. Я могу видеть часть в process-card.php здесь:

"amount_money" => array (
"amount" => 100,
"currency" => "USD"),

Я не уверен, что это просто говорит о том, какова минимальная сумма для взимания, но похоже, что он только заряжает 1,00 $ каждый раз, несмотря ни на что. Я знаю, что это не связано с полем формы, но я не уверен, как его подключить.

Я прочитал документацию Вот а также Вот, но большая часть этого греческого для меня. Если бы кто-то мог помочь мне получить обычную сумму, я думаю, я мог бы выяснить остальное. Дайте мне знать, если мне потребуется предоставить дополнительную информацию.