Square Connect - 自定义表单

时间：2016-09-11 16:36:51

标签： php forms 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-anything的所有引用替换为我的应用程序的正确值。 （正如我所说，我的基本形式有效。）

我不是在寻找任何人编写所有代码本身，但有人可以指出我如何开始。我需要获取客户信息，以便通过付款来完成，可能会有一个注释列出孩子（ren）。我知道我将不得不添加表单字段以包含注释，但我甚至不知道如何使名称工作，所以我需要首先解决它，然后我可以弄清楚其余部分。我的另一件事是我需要知道如何添加父母可以支付多少钱的金额字段。我可以在这里看到process-card.php中的部分：

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

我不确定这是不是只是说最低收费金额是多少，但看起来它每次只收取1.00美元，无论如何。我知道它没有连接到表单字段，但我不确定如何连接它。

我已阅读文档here和here，但大部分内容都是希腊语。如果有人可以帮助我获得定制金额，我想我可以弄明白其余的。如果我需要提供任何其他信息，请告诉我。

1 个答案:

答案 0 :(得分：4)

一些事情

  • 在process-card.php中，每次从API获取您的位置可能更容易，而不是硬编码（如果您只计划拥有一个位置）

    $location_api = new \SquareConnect\Api\LocationApi();
$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId();

  • 在较高级别，信用卡随机数与表单中的所有其他命名变量一起传递。我编辑了您的代码以传递更多信息并在另一侧显示。

`

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<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: 'XXXXX',
      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 name="phone" type="text" placeholder="Phone Number" class="uk-form-large">
        <input name="email" type="email" placeholder="Email" class="uk-form-large">
        <div class="billing-form-group uk-flex uk-flex-space-between">
            <input name="amount" 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" value="4111111111111111" class="uk-form-large">
        <div class="exp-cvv-group uk-flex uk-flex-space-between">
            <input type="text" placeholder="MM/YY" value="0121" 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>

<?php
include 'vendor/autoload.php';

$access_token = 'XXXXXX';

echo'<pre>';
var_dump($_POST);
echo '</pre>';

$location_api = new \SquareConnect\Api\LocationApi();

$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId();
# 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" => $_POST['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>";
}
相关问题
最新问题