Customize Payment Form Appearance Deprecated

This component is deprecated. See below for guidance about what to use instead.

Complete the SqPaymentForm walkthrough to create a multi-element payment form. For more information, see Walkthrough: Integrate Square Payments in a Website. Do not follow the additional steps provided at the end of the walkthrough to build a single-element payment.

Review the following code components:

• Layout of the iframe elements. You see the following layout of the SqPaymentForm iframe elements:

  

  This layout is defined by the following <div> block in index.html. Three of the iframe elements (sq-expiration-date, CVV, and sq-postal-code) specify a class (third). The styles defined in the class cause the elements to appear on the same line.

  Copy

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

  /* 
      Defines the order of iFrames on the page. 
      The class "third" defines the size, and  position of x axis ..see the .css file 
  */
  <div id="form-container">
      <div id="sq-card-number"></div>
      <div class="third" id="sq-expiration-date"></div>
      <div class="third" id="sq-cvv"></div>
      <div class="third" id="sq-postal-code"></div>
      ...
  </div>
  

  If you inspect these payment form elements in your browser, you see the corresponding iframe elements with the class attribute showing the third class.

• Customize iframe styles. In index.html, the SqPaymentForm initialization specifies the inputClass configuration field that sets the CSS class to use for the iframe styles.

  Copy

  • 1
  • 2
  • 3
  • 4
  • 5

   const paymentForm = new SqPaymentForm({
       ...
       inputClass: 'sq-input',
      ...
   });   
  

  The sq-input class is defined in the mysqpaymentform.css file as follows:

  Copy

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

  .sq-input {
  height: 56px;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
      -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
  }
  

  You can explore customization by changing these CSS styles and review the resulting payment form.

• Customize the input styles within the iframe. The SqPaymentForm initialization specifies the inputStyles configuration field to define custom styles for the <input> element in the iframe.

  Copy

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

  // Customize the CSS for the SqPaymentForm iframe elements INTERNAL styles.
  const paymentForm = new SqPaymentForm({
  …
          inputStyles: [{
              fontSize: '16px',
              lineHeight: '24px',
              padding: '16px',
              placeholderColor: '#a0a0a0',
              backgroundColor: 'transparent',
          }], 
  
      …
   });
  

  The style applies to all four SqPaymentForm input fields in the iframes. The inputStyles defines the internal styles applied to the rendered iframes. For a list of input style properties that SqPaymentForm supports, see InputStyle.

Complete the SqPaymentForm example walkthrough. For more information, see Walkthrough: Integrate Square Payments in a Website. The resulting payment form you see uses the default CSS styling that the card configuration element provides. You can now apply custom styles.

Set the background color of the page.

Add custom styles so the payment form appears as shown in the preceding example. Open index.html and add the card.inputStyle configuration field as shown:

card:
{
  elementId: 'sq-card',
  inputStyle:
  {
    //Set font attributes on card entry fields
    fontSize: '16px',
    fontWeight: 500,
    fontFamily: 'futura',
    placeholderFontWeight: 300,
    autoFillColor: '#FFFFFF',    //Sets color of card nbr & exp. date
    color: '#FFFFFF',            //Sets color of CVV & Zip
    placeholderColor: '#A5A5A5', //Sets placeholder text color
    //Set form appearance
    backgroundColor: '#000',  //Card entry background color
    cardIconColor: '#A5A5A5', //Card Icon color
    borderRadius: '50px',
    boxShadow: "0px 2px 6px rgba(0,0,0,.02)," +
      "0px 4px 8px rgba(0,0,0, 0.04), 0px 8px 30px " +
      "rgba(0,0,0, 0.04), 0px 1px 2px rgba(0,0,0, 0.08)",
    //Set form appearance in error state
    error:
    {
      cardIconColor: '#FF1ADA', //Sets color of card icon
      color: '#FF4DB8',         //Sets color of card entry text
      backgroundColor: '#000',  //Card entry background color
      fontWeight: 500,
      fontFamily: 'futura'      //Font of the input field in error
    },
    //Set appearance of hint text below form
    details:
    {
      hidden: false,    //Shows or hides hint text
      color: '#A5A5A5', //Sets hint text color
      fontSize: '12px', //Not inherited from parent, Sets size of
      //text, defaults to 12px
      fontWeight: 500,  //Not inherited from parent
      fontFamily: 'futura', //Not inherited from parent, required to render form
      error:
      { //Sets attributes of hint text in when form
        color: '#FF4DB8', //is in error state
        fontSize: '12px'
      }
    }
  }
}