Examples

Set payment form style for Window Width

Use payment form internal and external styles to render form for different window widths.

Make your payment form reactive to different window widths by customizing sqpaymentform.css to set iframe height and width. Use JavaScript to set payment form input field font size and line height.

This recipe sets payment form iframe and input field styles for windows smaller than 421px and larger than 420px. Use the recipe if your web payment page may be viewed from a mobile, tablet, or desktop computer browser.

The content of the sqpaymentform.css stylesheet used in this recipe is taken from the payment form Setup Guide. If you have modified your stylesheet before using this recipe, you may need to adjust the property values that are set in this recipe to match the dimensions of your stylesheet.

Before you start

Step 1: Set the external styles of payment form iframes

You will be copying existing stylesheet classes into media breakpoints for small and larger windows. In the media breakpoints, you'll set only height, width, font size, and padding values. You can remove those dimensional properties for the original set of classes that are not encapsulated by media breakpoints.

  1. In your web application project, open your payment form stylesheet. If you followed the steps in the payment form Setup Guide, the stylesheet may be saved as sqpaymentform.css.
  2. Add a media breakpoint for smaller windows at the end of the stylesheet after existing stylesheet classes.
@media only screen and (max-width:520px)  {


}  
  1. Add classes that set iframe widths or heights for small windows. The only class properties that you set are properties for height, width, and padding.
@media only screen and (max-width:520px)  {
    #paymentDetails {
      width: 300px;
    }
    #sq-ccbox {
      padding:5px;
      font-weight: bold;
      font-size: 12px;
      width: calc(100% - 63px);
      text-align: left;
    }
    .sq-input {
      height: calc(26px - 10px); /* 36 minus 10px top/bottom padding */
      padding: 1px 2px;  /* top, right */
    }
    .sq-input.full {
      width: calc(100% - 3px); /* minus left/right padding from .sq-input */
    }
    /* card field lockup */
    #sq-card-number {
      width: 121px; /* minus left/right padding from .sq-input */
    }

    #sq-cvv {
      width: 121px; /* minus left/right padding from .sq-input */
    }

    #sq-expiration-date {
      width: 121px; /* minus left/right padding from .sq-input */
    }
    #sq-postal-code {
      width: 121px; /* minus left/right padding from .sq-input */
    }
    /* Customize the "Pay with Credit Card" button */
    .button-credit-card {
      min-width: 100px;
      min-height: 14px;
      padding: 0;
      margin: 5px;
      line-height: 12px;
      font-weight: bold;
      width: calc(100% - 53px); /* minus left/right padding from .sq-input */
    }

}  

Step 2: Set the internal styles of payment form iframes

  1. In your web application project, open the JavaScript file that initializes the SqPaymentForm object.

  2. Set the input field line height and font sizes in the SqPaymentForm initializing argument. Be sure to set the mediaMaxWidth valule to the same max width value that you set in the stylesheet for external styles.

// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({

...

  {
    mediaMaxWidth: '520px',
    fontSize: '12px',
    lineHeight: '10px',
  }

  ...
}  

The end result

This is the payment form in a full sized window:

Cookbook paymentform customize css default

If you followed the recipe, your payment form is resized like the following image in a window of 520px or smaller.

Cookbook paymentform customize css

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow