Пользовательский платежный шлюз Woocommerce для Squareup.com

Я занимаюсь разработкой платежного шлюза Square Connect для Woocommerce.

Вот документы на пропускные пути и форма кредитной карты, которую я могу вставить для шлюза.

https://docs.connect.squareup.com/articles/adding-payment-form/

Теперь процесс - это одноразовая карточка возврата формы оплаты, которая используется для удержания платежа от клиента.

Вот пример кода.

require_once 'SquareConnect/autoload.php';

# Assume you have assigned values to the following variables:
#   $nonce
#   $location_id
#   $access_token

$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, which is not very useful.
  "amount_money" => array (
    "amount" => 100,
    "currency" => "USD"
  ),

  # Every payment you process for a given business 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 200 (success).
# This block catches any exceptions that occur from the request.
try {
  print_r($transaction_api->charge($access_token, $location_id, $request_body));  
} catch (Exception $e) {
  echo "Caught exception " . $e->getMessage();

Проблема в том, что Платежная форма возвращает nonce с функцией javascript.

Вот как я могу встроить форму в свой плагин.

function payment_fields(){
?>
<p  class="form-row form-row form-row-wide">
  <label>Card Number</label>
  <div id="sq-card-number"></div>
</p>
<p  class="form-row form-row form-row-wide">
  <label>CVV</label>
  <div id="sq-cvv"></div>
</p>
<p  class="form-row form-row form-row-wide">
  <label>Expiration Date</label>
  <div id="sq-expiration-date"></div>
</p>
<p  class="form-row form-row form-row-wide">
  <label>Postal Code</label>
  <div id="sq-postal-code"></div>
</p>
<input type="hidden" id="payment_nonce" value="" />
<script src="https://js.squareup.com/v2/paymentform" type="text/javascript"></script>
<script type="text/javascript">
var paymentForm = new SqPaymentForm({
    applicationId: 'sandbox-sq0idp-Yjm9KUoP_AiqDuGgwV6q4A', // <-- REQUIRED: Add Application ID
    inputClass: 'sq-input',
    inputStyles: [
      {
        fontSize: '15px'
      }
    ],
    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'
    },
    callbacks: {
      cardNonceResponseReceived: function(errors, nonce, cardData) {
        if (errors) {
          // handle errors
          errors.forEach(function(error) { console.log(error.message); });
        } else {
          // handle nonce
          console.log('Nonce received:');
          console.log(nonce);
        }
      },
      unsupportedBrowserDetected: function() {
        // Alert the buyer that their browser is not supported
      }
    }
  });
  function requestCardNonce() {
    paymentForm.requestCardNonce();
  }
paymentForm.build();
</script>
<?php
    }

Это одноразовый ответ

console.log («Получен одноразовый номер:»); console.log (Nonce);

Теперь не знаете, как получить этот одноразовый номер в разделе процесса оплаты в woocomerce?