title: Square Connect - Customizing the Form
body: <p>I am trying to create a payment form that allows a child care center to accept payments that the customer specifies by typing in a number. I have gotten the basic form to work with the basic setup found on their <a href="https://github.com/square/connect-api-examples/tree/master/connect-examples/v2/php_payment" rel="nofollow">Github</a>, so I am setup and running correctly. My problem is that I am a front end designer and cannot figure out how to get other fields to push through with the card info. I have all of the required files to run the Square Connect API. Here is the relevant code I have so far...</p>
  
  <p>My Form (in payment.php):</p>
  
  <pre><code>  &lt;script&gt;
      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();
      }
  &lt;/script&gt;
  &lt;form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post"&gt;
      &lt;div class="personal-info uk-flex uk-flex-column"&gt;
              &lt;div class="billing-form-group uk-flex uk-flex-space-between"&gt;
              &lt;input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;"&gt;
              &lt;input type="text" placeholder="Last Name" id="family_name" class="uk-form-large"&gt;
          &lt;/div&gt;
          &lt;input type="text" placeholder="Billing Address" class="uk-form-large"&gt;
          &lt;input type="text" placeholder="City" class="uk-form-large"&gt;
          &lt;select class="uk-form-large"&gt;
              &lt;option value="AL"&gt;Alabama&lt;/option&gt;
              &lt;option value="AK"&gt;Alaska&lt;/option&gt;
              &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
              &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
              &lt;option value="CA"&gt;California&lt;/option&gt;
              &lt;option value="CO"&gt;Colorado&lt;/option&gt;
              &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
              &lt;option value="DE"&gt;Delaware&lt;/option&gt;
              &lt;option value="DC"&gt;District Of Columbia&lt;/option&gt;
              &lt;option value="FL"&gt;Florida&lt;/option&gt;
              &lt;option value="GA"&gt;Georgia&lt;/option&gt;
              &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
              &lt;option value="ID"&gt;Idaho&lt;/option&gt;
              &lt;option value="IL"&gt;Illinois&lt;/option&gt;
              &lt;option value="IN"&gt;Indiana&lt;/option&gt;
              &lt;option value="IA"&gt;Iowa&lt;/option&gt;
              &lt;option value="KS"&gt;Kansas&lt;/option&gt;
              &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
              &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
              &lt;option value="ME"&gt;Maine&lt;/option&gt;
              &lt;option value="MD"&gt;Maryland&lt;/option&gt;
              &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
              &lt;option value="MI"&gt;Michigan&lt;/option&gt;
              &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
              &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
              &lt;option value="MO"&gt;Missouri&lt;/option&gt;
              &lt;option value="MT"&gt;Montana&lt;/option&gt;
              &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
              &lt;option value="NV"&gt;Nevada&lt;/option&gt;
              &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
              &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
              &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
              &lt;option value="NY"&gt;New York&lt;/option&gt;
              &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
              &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
              &lt;option value="OH"&gt;Ohio&lt;/option&gt;
              &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
              &lt;option value="OR"&gt;Oregon&lt;/option&gt;
              &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
              &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
              &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
              &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
              &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
              &lt;option value="TX"&gt;Texas&lt;/option&gt;
              &lt;option value="UT"&gt;Utah&lt;/option&gt;
              &lt;option value="VT"&gt;Vermont&lt;/option&gt;
              &lt;option value="VA"&gt;Virginia&lt;/option&gt;
              &lt;option value="WA"&gt;Washington&lt;/option&gt;
              &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
              &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
              &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large"&gt;
      &lt;/div&gt;
      &lt;div class="card-info uk-flex uk-flex-column"&gt;
          &lt;input type="text" placeholder="Phone Number" class="uk-form-large"&gt;
          &lt;input type="email" placeholder="Email" class="uk-form-large"&gt;
          &lt;div class="billing-form-group uk-flex uk-flex-space-between"&gt;
              &lt;input type="text" placeholder="Amount" class="uk-form-large"&gt;
              &lt;select class="uk-form-large"&gt;
                  &lt;option&gt;Visa&lt;/option&gt;
                  &lt;option&gt;Mastercard&lt;/option&gt;
                  &lt;option&gt;Discover&lt;/option&gt;
                  &lt;option&gt;American Express&lt;/option&gt;
              &lt;/select&gt; 
          &lt;/div&gt;
          &lt;input type="text" placeholder="Card Number" id="sq-card-number" class="uk-form-large"&gt;
          &lt;div class="exp-cvv-group uk-flex uk-flex-space-between"&gt;
              &lt;input type="text" placeholder="MM/YY" id="sq-expiration-date" class="uk-form-large"&gt;
              &lt;input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="hidden" id="card-nonce" name="nonce"&gt;
      &lt;div class="billing-button-container"&gt;
          &lt;input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div id="errors"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My Processor (in process-card.php):</p>
  
  <pre><code>&lt;?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" =&gt; $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" =&gt; array (
      "amount" =&gt; 100,
      "currency" =&gt; "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" =&gt; 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-&gt;charge($access_token, $location_id, $request_body);
    echo "&lt;pre&gt;";
    print_r($result);
    echo "&lt;/pre&gt;";
  } catch (\SquareConnect\ApiException $e) {
    echo "Caught exception!&lt;br/&gt;";
    print_r("&lt;strong&gt;Response body:&lt;/strong&gt;&lt;br/&gt;");
    echo "&lt;pre&gt;"; var_dump($e-&gt;getResponseBody()); echo "&lt;/pre&gt;";
    echo "&lt;br/&gt;&lt;strong&gt;Response headers:&lt;/strong&gt;&lt;br/&gt;";
    echo "&lt;pre&gt;"; var_dump($e-&gt;getResponseHeaders()); echo "&lt;/pre&gt;";
  }
  </code></pre>
  
  <p>Please note that I have replaced all references to MY-anything to the correct values for my application. (As I said, I have the basic form working.)</p>
  
  <p>I am not looking for anyone to write all of the code per se, but can someone point me in the direction of how to get started. I need to get the customer information to push through with the payment with maybe a note to list the child(ren). I know that I will have to add the form field to incorporate the note, but I don't even know how to make the name work, so I need to get that down first, then I can figure out the rest. My other thing is I need to know how to add the amount field that the parent can put in how much they want to pay. I can see the part in process-card.php here:</p>
  
  <pre><code>"amount_money" =&gt; array (
    "amount" =&gt; 100,
    "currency" =&gt; "USD"
  ),
  </code></pre>
  
  <p>I am not sure if that is just saying what the minimum amount to charge is, but it looks like it is only charging $1.00 every time no matter what. I know it is not connected to the form field, but I am not sure how to connect it.</p>
  
  <p>I have read the documentation <a href="https://docs.connect.squareup.com/articles/processing-payment-php/" rel="nofollow">here</a> and <a href="https://docs.connect.squareup.com/api/connect/v2/#connectapiv2conventions" rel="nofollow">here</a>, but most of this is Greek to me. If someone could help me get the custom amount working, I think I could figure out the rest. Let me know if I need to provide any additional information.</p>