Square Payment Form script reference

bodytags.html

<!--
   Replace the action attribute of the form with the path of the URL you 
   want to POST the nonce to (for example, "/process-card")

  This form provides a convenient way for your page to post a card nonce to your 
  backend. The 4 placeholder div tags are required for the  SqPaymentForm object to 
  replace with iframes when it builds the Payment Form and can be placed anywhere in
  your page. 
-->
<form id="nonce-form" novalidate action="/process-card.php" method="post">
  Pay with a Credit Card
  <table>
  <tbody>
    <tr>
      <td>Card Number:</td>
      <td><div id="sq-card-number"></div></td>
    </tr>
    <tr>
     <td>CVV:</td>
      <td><div id="sq-cvv"></div></td>
    </tr>
    <tr>
      <td>Expiration Date: </td>
      <td><div id="sq-expiration-date"></div></td>
    </tr>
    <tr>
      <td>Postal Code:</td>
      <td><div id="sq-postal-code"></div></td>
    </tr>
    <tr>
      <td colspan="2">
        <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">
          Pay with card
        </button>
      </td>
    </tr>
  </tbody>
  </table>

  <!--
    After a nonce is generated it will be assigned to this hidden input field.
  -->
  <input type="hidden" id="card-nonce" name="nonce">
</form>

headscript.html

<!-- 
   The 1st script tag is necssary to reference the SqPaymentForm library. The
   2nd and 3rd script tags reference the javascript and stylesheet code that 
   this setup guide asks you to add to your web application

 link to the SqPaymentForm library -->
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>

<!-- link to a javascript file where you put your SqPaymentForm logic -->
<script type="text/javascript" src="/sqpaymentform.js"></script>

<!-- link to your stylesheet that declares custom styles for SqPaymentForm -->
<link rel="stylesheet" type="text/css" href="/sqpaymentform.css">

requestcardnonce.js

/*
* 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();
}

sqpaymentform-singlepage.js

/* Create and initialize a payment form object.  This example is the minimum necessary
   initializing script. Follow the steps in the setup guide to configure  your page 
   with a Payment Form that shows typical customization.
   
   The setup guide shows you how to get REPLACE ME values from your Square Application
   Dashboard.
*/
var paymentForm = new SqPaymentForm({
  applicationId: "REPLACE_ME",
  locationId: "REPLACE_ME",
  inputClass: 'sq-input',
  
  //Disable automatically building Payment Form
  autoBuild: false,
  inputStyles: [{
      fontSize: '.9em'
  }],
  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: {
    /*
     * 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('  ' + 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();
    }
  }
});

/*
Call the `buildForm()` function after the page DOM contains the Payment Form
placeholder elements.
*/
function buildForm(){
  if (paymentForm.isSupportedBrowser()) {
    paymentForm.build()
  }
}

/*
 * Removes SqPaymentForm event listeners from a page.
*/
function stopPaymentFormEventListeners() {
  paymentForm.destroy();
}

/*
* function: requestCardNonce
 *
 * requestCardNonce is invoked 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();
}

sqpaymentform.js

/* Create and initialize a payment form object.  This example is the minimum necessary
   initializing script. Follow the steps in the setup guide to configure  your page 
   with a Payment Form that shows typical customization.
   
   The setup guide shows you how to get REPLACE ME values from your Square Application
   Dashboard.
*/
var paymentForm = new SqPaymentForm({
  applicationId: "REPLACE_ME",
  locationId: "REPLACE_ME",
  inputClass: 'sq-input',
  inputStyles: [{
      fontSize: '.9em'
  }],
  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: {
    /*
     * 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('  ' + 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();
    }
  }
});
/*
* 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();
}

sqpaymentformhelpers.js

/*
Single-page apps typically render the Payment Form explicitly with the
build() function. You must call the paymentForm.isSupportedBrowser() function
before calling `paymentForm.build()` to confirm the Payment Form will load
properly.

Call the `buildForm()` function after the page DOM contains the Payment Form
placeholder elements.
*/
function buildForm(){
  if (paymentForm.isSupportedBrowser()) {
    paymentForm.build()
  }
}
/*
* 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();
}

stylesheet.css

/* Defines how SqPaymentForm iframes should look */
.sq-input {
  border: 1px solid rgb(223, 223, 223);
  outline-offset: -2px;
  margin-bottom: 5px;
  display: inline-block;
}

/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
  outline: 5px auto rgb(59, 153, 252);
}

/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
  outline: 5px auto rgb(255, 97, 97);
}

/* Customize the "Pay with Credit Card" button */
.button-credit-card {
  min-width: 200px;
  min-height: 20px;
  padding: 0;
  margin: 5px;
  line-height: 20px;
  box-shadow: 2px 2px 1px rgb(200, 200, 200);
  background: rgb(255, 255, 255);
  border-radius: 5px;
  border: 1px solid rgb(200, 200, 200);
  font-weight: bold;
  cursor:pointer;
}