Cards & Wallets · PaySuite payment page · Customising the payment page

Skin CSS

A skin must contain a single non-empty CSS file inside the zip as /assets/css/main.css. This is the only CSS file from the skin that will be included on hosted pages.

The HTML that makes up the hosted payment and card management pages is highly structured and marked up with lots of classes. This documentation will go over the structure of the pages so that you can determine the CSS for your desired styling. We highly recommend using only the type and classes to target elements, as element IDs and names may change without notice.

These are guidelines and include lots of examples. We recommend looking at the examples by using an explorer account to create a hosted session in MITE and viewing the page source.

Page Structure

There is a common structure to all hosted pages.

HTML

<body>
  <div class="container">
      <header class="hosted-header-section">
          <!-- This logo-container will only be in the markup if a Header Image is configured; see Header Images for information. -->
          <div class="hosted-header-logo-container">
              <img class="header-logo-image" src="/path/to/header-image.jpg"/>
          </div>
      </header>
      <section class="hosted-main-section">
          ...
      </section>
      <footer class="hosted-footer-section"></footer>
  </div>
</body>

The header and footer sections are empty, the intention is that any additional content can be inserted with javascript, see Skin JavaScript.

Form

Inside the hosted-main-section will be a form, the classes will depend on the page in question

Payment Page

<form class="hosted-form hosted-form-payment">

Card Management Page

<form class="hosted-form hosted-form-manage">

The contents of the form follows a set structure.

HTML

<form class="...">

  <!-- If there are any general transaction processing errors, then this section will be included on the page to detail them. -->
  <section class="hosted-errors">
      <span class="hosted-error">Unable to process transaction at this time</span>
  </section>

  <!-- If this is a payment form with a customer notice located at FORM_TOP, then it will be here -->
  <div class="customer-notice customer-notice-form-top">...</div>

  <!-- If this is a payment form, and custom fields are being used, then any custom fields with the location 'FORM_TOP' will be included here -->
  <div class="custom-fields custom-fields-form-top">
      ...
  </div>

  <!-- All the payment methods available to choose from -->
  <section class="payment-methods">
      ...
  </section>

  <!-- If this is a payment form, non payment method related transaction details come next, such as the amount -->
  <section class="transaction-details">
      ...
  </section>

  <!-- If this is a payment form, and custom fields are being used, then any custom fields with the location 'FORM_BOTTOM' will be included here -->
  <div class="custom-fields custom-fields-form-bottom">
      ...
  </div>

  <!-- If this is a payment form with a customer notice located at FORM_BOTTOM, then it will be here -->
  <div class="customer-notice customer-notice-form-bottom">...</div>

  <!-- The form action links and buttons -->
  <section class="form-actions">
      ...

      <!-- If this is a payment form with a customer notice located at FORM_AFTER, then it will be here -->
      <div class="customer-notice customer-notice-form-after">...</div>
  </section>
</form>

The above shows the layout of the form, and how general errors are rendered. Further details on each section are given below.

Payment Methods

Single Payment Method

There is only one payment method on the form when it is a card input payment form and PayPal is not enabled.

HTML

<section class="payment-methods">
  <section class="payment-methods-card">
      <section class="payment-method payment-method-card payment-method-card-new">
          <span class="brand-logos card-brand-logos"> <!-- these brand logos can be configured via skin properties -->
              <img class="brand-logo card-brand-logo visa-brand-logo" src="/hosted/assets/payment-logo/visa_28x48.png" height="28" width="48" alt="Visa Logo"/>
              <img class="brand-logo card-brand-logo mastercard-brand-logo" src="/hosted/assets/payment-logo/mastercard_28x44.png" height="28" width="44" alt="Mastercard Logo"/>
          </span>
          <div class="payment-method-details payment-method-details-card payment-method-details-card-new">
              <!-- pan entry -->
              <div class="form-group pan-group">
                  ...
              </div>
              <!-- cardholder name -->
              <div class="form-group cardholder-name-group">
                  ...
              </div>
              <!-- card nickname -->
              <div class="form-group nickname-group">
                  ...
              </div>
              <!-- valid from -->
              <div class="form-group valid-from-group">
                  ...
              </div>
              <!-- expiry date -->
              <div class="form-group expiry-group">
                  ...
              </div>
              <!-- issue number -->
              <div class="form-group issue-number-group">
                  ...
              </div>
              <!-- csc -->
              <div class="form-group csc-group">
                  ...
              </div>
              <!-- address lines -->
              <div class="form-group billing-address-line1-group">
                  ...
              </div>
              <div class="form-group billing-address-line2-group">
                  ...
              </div>
              <div class="form-group billing-address-line3-group">
                  ...
              </div>
              <div class="form-group billing-address-line4-group">
                  ...
              </div>
              <!-- city -->
              <div class="form-group billing-address-city-group">
                  ...
              </div>
              <!-- region -->
              <div class="form-group billing-address-region-group">
                  ...
              </div>
              <!-- postcode -->
              <div class="form-group billing-address-postcode-group">
                  ...
              </div>
              <!-- country -->
              <div class="form-group billing-address-country-group">
                  ...
              </div>
          </div>
      </section>
  </section>
</section>

Multiple Payment Methods

There are multiple payment methods in the form either when PayPal is enabled, or the customer has multiple saved cards. In both cases the html structure is the same. In the below example the customer has two saved cards and PayPal is enabled.

Saved cards may have control links as part of the radio label. Most commonly this will be the option to update the specified card, but depending on account configuration other options may be available.

HTML

<section class="payment-methods">
  <section class="payment-methods-card">
      <section class="payment-method payment-method-card payment-method-card-saved payment-method-card-saved-0">
          <div class="radio payment-method-select payment-method-select-card payment-method-select-card-saved payment-method-select-card-saved-0">
              <label>
                  <input type="radio" class="payment-method-radio payment-method-radio-card payment-method-radio-card-saved payment-method-radio-card-saved-0" value="0" checked="checked" />
                  <span class="saved-card-label">
                      <span class="nickname-saved nickname-saved-0"></span>
                      <img class="brand-logo card-brand-logo mastercard-brand-logo" height="28" width="44" alt="Mastercard Logo" src="/hosted/assets/payment-logo/mastercard_28x44.png" />
                      <span class="pan-saved pan-saved-0">990000******0010</span>
                      <span class="payment-method-controls payment-method-controls-0">
                          <!-- the card action availability varies by merchant configuration for the number of cards a customer can have. -->
                          <span class="action update-card-action">
                              <a href="manageCards?selectedCardKey=0" class="manage-cards-link manage-cards-link-0">Update</a>
                          </span>
                      </span>
                  </span>
              </label>
          </div>
          <div class="payment-method-details payment-method-details-0 payment-method-details-card-saved payment-method-details-card-saved-0">
              <!-- cardholder name, not editable -->
              <div class="form-group cardholder-name-group">
                  ...
              </div>
              <!-- valid from -->
              <div class="form-group valid-from-group">
                  ...
              </div>
              <!-- expiry date -->
              <div class="form-group expiry-group">
                  ...
              </div>
              <!-- issue number -->
              <div class="form-group issue-number-group">
                  ...
              </div>
              <!-- csc -->
              <div class="form-group csc-group">
                  ...
              </div>
              <!-- address lines -->
              <div class="form-group billing-address-line1-group">
                  ...
              </div>
              <div class="form-group billing-address-line2-group">
                  ...
              </div>
              <div class="form-group billing-address-line3-group">
                  ...
              </div>
              <div class="form-group billing-address-line4-group">
                  ...
              </div>
              <!-- city -->
              <div class="form-group billing-address-city-group">
                  ...
              </div>
              <!-- region -->
              <div class="form-group billing-address-region-group">
                  ...
              </div>
              <!-- postcode -->
              <div class="form-group billing-address-postcode-group">
                  ...
              </div>
              <!-- country -->
              <div class="form-group billing-address-country-group">
                  ...
              </div>
          </div>
      </section>
      <section class="payment-method payment-method-card payment-method-card-saved payment-method-card-saved-1">
          <div class="radio payment-method-select payment-method-select-card payment-method-select-card-saved payment-method-select-card-saved-1">
              <label>
                  <input type="radio" class="payment-method-radio payment-method-radio-card payment-method-radio-card-saved payment-method-radio-card-saved-1" value="1" />
                  <span class="saved-card-label">
                      <span class="nickname-saved nickname-saved-1"></span>
                      <img class="brand-logo card-brand-logo visa-brand-logo" height="28" width="48" alt="Visa Logo" src="/hosted/assets/payment-logo/visa_28x48.png" />
                      <span class="pan-saved pan-saved-1">990300******0017</span>
                      <span class="payment-method-controls payment-method-controls-1">
                          <span class="action update-card-action">
                              <a href="manageCards?selectedCardKey=1" class="manage-cards-link manage-cards-link-1">Update</a>
                          </span>
                      </span>
                  </span>
              </label>
          </div>
          <div class="payment-method-details payment-method-details-1 payment-method-details-card-saved payment-method-details-card-saved-1">
              ...
          </div>
      </section>
  </section>

  <section class="payment-methods-paypal">
      <section class="payment-method payment-method-paypal">
          <div class="radio payment-method-select payment-method-select-paypal">
              <label>
                  <input class="payment-method-radio payment-method-radio-paypal" type="radio" value="2" id="selectedPaymentMethod3" name="selectedPaymentMethod" />
                  <span>Pay with PayPal</span>
                  <span class="brand-logos">
                      <a class="brand-logo-link paypal-brand-logo-link" target="_blank" href="https://www.paypal.com/en/webapps/mpp/paypal-popup">
                          <img class="brand-logo paypal-brand-logo" title="PayPal" height="28" width="44" alt="PayPal Logo" src="/hosted/assets/payment-logo/paypal_28x44.png" />
                      </a>
                  </span>
              </label>
          </div>
          <div class="payment-method-details payment-method-details-paypal payment-method-details-paypal-new">
              <!-- There are no payment method details for paypal -->
          </div>
      </section>
  </section>

</section>

Form Elements

All form elements are contained within a div with the class form-group. There will also be the class <field-name>-group for direct targeting in css. Typically the form group will contain a label, then the widget, but there are some exceptions. For example if it is a checkbox, the widget is inside the label.

If the field is required, then there will be a span with the class 'compulsory-notice' inside the label. This only ever contains an astrisk to mark the field as common. When this is the case the input will also have the 'required' attribute.

The label will have the classes control-label and <field-name>-label.

The input control will have the classes form-field and <field-name>-value.

The input control will be contained with a div with the classes control-wrapper and <field-name>-control-wrapper. There will also be a class based on the field type, such as text-control-wrapper or checkbox-control-wrapper.

Text Input

A simple input, used for PAN, cardholder name, card nickname, issue number, security code, billing and email address fields.

HTML

<div class="form-group cardholder-name-group">
  <label class="control-label cardholder-name-label" for="cardRegistration.cardHolder">
  <span>Cardholder Name</span>
  <span class="compulsory-notice">*</span>
  </label>
  <div class="control-wrapper text-control-wrapper cardholder-name-control-wrapper">
      <input type="text" value="" name="cardRegistration.cardHolder" required="required" class="form-control cardholder-name-value" id="cardRegistration.cardHolder">
  </div>
</div>

Date Input

The card valid from/start date and expiry date are two text inputs that operate as a pair.

HTML

<div class="form-group expiry-group">
  <fieldset class="form-inline expiry-fieldset">
      <label class="control-label expiry-label" for="cardRegistration.expiryMonth">
      <span>Expires</span>
      <span class="compulsory-notice">*</span>
      </label>
      <div class="control-wrapper number-control-wrapper expiry-control-wrapper">
          <input type="tel" value="" name="cardRegistration.expiryMonth" placeholder="mm" required="required" class="form-control form-control-inline expiry-value expiry-month-value" id="cardRegistration.expiryMonth">
          <input type="tel" value="" name="cardRegistration.expiryYear" placeholder="yy" required="required" class="form-control form-control-inline expiry-value expiry-year-value" id="cardRegistration.expiryYear">
      </div>
  </fieldset>
</div>

Telephone Number

Telephone number consists of two inputs; one for the region (used to derive the international dialling code), and one for the national number:

HTML

<div class="form-group telephone-group is-optional">
<label for="cardRegistration.regionCode" class="control-label telephone-label">
	<span>Telephone Number</span>
</label>

<fieldset class="telephone-fieldset">
	<div class="control-wrapper select-control-wrapper telephone-control-wrapper">
		<select id="cardRegistration.regionCode" name="cardRegistration.regionCode" class="form-control telephone-regionCode-value">
			<option class="select-regionCode-placeholder select-placeholder" value="">--- Select a dialing code ---</option>
			<option value="AF">Afghanistan (+93)</option>
			<option value="AX">Åland Islands (+358)</option>
			<option value="AL">Albania (+355)</option>
			<!-- et. al. for each supported region -->
		</select>

		<input id="cardRegistration.phoneNumber" class="form-control telephone-value telephone-phoneNumber-value" type="tel" name="cardRegistration.phoneNumber" value="" />
	</div>
</fieldset>
</div>

Checkboxes

A checkbox will appear on the payment page if the choice to save the card has been given to the customer. Checkboxes are also used on the card management page when choosing to make a card the customer's default.

HTML

<div class="form-group save-card-group">
  <div class="control-wrapper checkbox checkbox-control-wrapper save-card-control-wrapper">
      <label class="save-card-label">
          <input type="checkbox" class="form-field save-card-value" id="cardRegistration.registerCard1" name="cardRegistration.registerCard" value="true" checked="checked">
          <span>Save My Card</span>
      </label>
  </div>
</div>

Static Fields

Sometimes a field is just for information and cannot be edited by the customer. The typical example being a fixed amount.

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <p class="form-field form-field-static">£10.99</p>
  </div>
</div>

Validation messages

When the value given for an input is detected as invalid, two things happen:

The has-error class is added to the form-group
A validation message is shown with generic classes help-block and error-message. It will also have the class <field-name>-error-message.

An example for the issue number field:

HTML

<div class="form-group issue-number-group has-error">
  <label class="control-label issue-number-label" for="cardSelection.availableCards[0].issueNumber">
  <span>Issue Number (if applicable)</span>
  </label>
  <div class="control-wrapper number-control-wrapper issue-number-control-wrapper">
      <input type="tel" value="" name="cardSelection.availableCards[0].issueNumber" class="form-control issue-number-value" id="cardSelection.availableCards[0].issueNumber">
  </div>
  <span class="help-block error-message issue-number-error-message">Issue number must be between 0 and 99</span>
</div>

Transaction Details

There are several different ways the amount control can be shown on the page, depending on the hosted session intialisation.

Fixed Amount

The amount control is rendered as a static field.

JSON

"amount" : {
  "fixed" : 10.99
}

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <p class="form-field form-field-static">£10.99</p>
  </div>
</div>

Customer Input

The amount control is rendered as a text input

JSON

"amount" : { }

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount (£)</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <div class="amount">
          <input type="text" value="" name="cardTransaction.amount" id="cardTransaction.amount" required="required" class="form-control form-control-inline amount-value">
      </div>
  </div>
</div>

Range

The amount control is rendered as a text input with help text

JSON

"amount" : {
  "range" : {
      "min" : 5,
      "max" : 50
  }
}

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount (£)</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <div class="amount">
          <input type="text" value="" name="cardTransaction.amount" id="cardTransaction.amount" required="required" aria-describedby="amount-info" class="form-control form-control-inline amount-value">
          <span id="amount-info" class="help-block amount-message">£5 minimum, £50 maximum</span>
      </div>
  </div>
</div>

Choice

The amount control is rendered as a select. The value of each amount is incorporated into the classes of the HTML, with the decimal point being replaced with an underscore.

JSON

"amount" : {
  "choice" : {
      "option" : [ 10.00, 25.00, 50.00 ]
  }
}

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount (£)</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <div class="amount-options">
          <span class="radio amount-option amount-option-10_00">
              <label class="amount-option-label amount-option-label-10_00" for="transaction-amount-choice-10_00">
                  <input type="radio" checked="checked" name="cardTransaction.amount" value="10.00" class="amount-choice amount-choice-10_00" id="transaction-amount-choice-10_00">
                  £10.00
              </label>
          </span>
          <span class="radio amount-option amount-option-25_00">
              <label class="amount-option-label amount-option-label-25_00" for="transaction-amount-choice-25_00">
                  <input type="radio" name="cardTransaction.amount" value="25.00" class="amount-choice amount-choice-25_00" id="transaction-amount-choice-25_00">
                  £25.00
              </label>
          </span>
          <span class="radio amount-option amount-option-50_00">
              <label class="amount-option-label amount-option-label-50_00" for="transaction-amount-choice-50_00">
                  <input type="radio" name="cardTransaction.amount" value="50.00" class="amount-choice amount-choice-50_00" id="transaction-amount-choice-50_00">
                  £50.00
              </label>
          </span>
      </div>
  </div>
</div>

Suggested

The amount control is rendered as a select, the last option of which will be a test input. This is very similar the the choice option above.

JSON

"amount" : {
  "suggested" : {
      "choice" : {
          "option" : [ 10.00, 25.00, 50.00 ]
      },
      "range" : {
          "min" : 10.00,
          "max" : 50.00
      }
  }
}

HTML

<div class="form-group amount-group">
  <label class="control-label amount-label">Amount (£)</label>
  <div class="control-wrapper text-control-wrapper amount-control-wrapper">
      <div class="amount-options">
          <span class="radio amount-option amount-option-10_00">
              <label class="amount-option-label amount-option-label-10_00" for="transaction-amount-choice-10_00">
                  <input type="radio" checked="checked" name="cardTransaction.amount" value="10.00" class="amount-choice amount-choice-10_00" id="transaction-amount-choice-10_00">
                  £10.00
              </label>
          </span>
          <span class="radio amount-option amount-option-25_00">
              <label class="amount-option-label amount-option-label-25_00" for="transaction-amount-choice-25_00">
                  <input type="radio" name="cardTransaction.amount" value="25.00" class="amount-choice amount-choice-25_00" id="transaction-amount-choice-25_00">
                  £25.00
              </label>
          </span>
          <span class="radio amount-option amount-option-50_00">
              <label class="amount-option-label amount-option-label-50_00" for="transaction-amount-choice-50_00">
                  <input type="radio" name="cardTransaction.amount" value="50.00" class="amount-choice amount-choice-50_00" id="transaction-amount-choice-50_00">
                  £50.00
              </label>
          </span>
          <span class="radio amount-option amount-option-custom">
              <label class="amount-option-label amount-option-label-custom" for="transaction-amount-choice-custom">
                  put type="radio" name="cardTransaction.amount" value="" class="amount-choice amount-choice-custom" id="transaction-amount-choice-custom">
              </label>
              <input type="text" value="" name="cardTransaction.otherAmount" id="cardTransaction.otherAmount" aria-describedby="amount-info" class="form-control form-control-inline amount-value">
              <span id="amount-info" class="help-block amount-message">£10.00 minimum, £50.00 maximum</span>
          </span>
      </div>
  </div>
</div>

Custom Fields

Custom fields can be added to the page via the hosted initialisation request (see Hosted payments API). There are several types. The name of the custom field is incorporated into the classes used.

Label Field

JSON

"labelField" : {
  "name" : "someInfo",
  "value" : "the information",
  "label" : {
      "value" : "Some information"
  }
}

HTML

<div class="form-group custom-field-group custom-field-someInfo-group">
  <label class="control-label custom-field-someInfo-label">Some information</label>
  <div class="control-wrapper static-control-wrapper custom-field-someInfo-control-wrapper">
      <p class="form-field custom-field-someInfo-value">the information</p>
  </div>
</div>

Text Field

JSON

"textField" : {
  "name" : "productId",
  "label" : {
      "value" : "Product ID"
  }
}

HTML

<div class="form-group custom-field-group custom-field-productId-group">
  <label class="control-label custom-field-productId-label" for="cf_productId">Product ID</label>
  <div class="control-wrapper text-control-wrapper custom-field-productId-control-wrapper">
      <input type="text" value="" class="form-control custom-field-productId-value" name="cf_productId" id="cf_productId">
  </div>
</div>

Select Field

JSON

"selectField" : {
  "name" : "offer",
  "label" : {
      "value" : "Select Offer"
  },
  "options" : {
      "option" : [ {
          "label" : "Free Delivery",
          "value" : "delivery"
      }, {
          "label" : "10% discount",
          "value" : "discount"
      } ]
  }
}

HTML

<div class="form-group custom-field-group custom-field-offer-group">
  <label class="control-label custom-field-offer-label" for="cf_offer">Select Offer</label>
  <div class="control-wrapper select-control-wrapper custom-field-offer-control-wrapper">
      <select class="form-control custom-field-offer-value" name="cf_offer" id="cf_offer">
          <option value="delivery" selected="selected">Free Delivery</option>
          <option value="discount">10% discount</option>
      </select>
  </div>
</div>

Radio Field

JSON

"radioField" : {
  "name" : "origin",
  "label" : {
      "value" : "How did you find us"
  },
  "options" : {
      "option" : [ {
          "label" : "Search engine",
          "value" : "search"
      }, {
          "label" : "Recommended",
          "value" : "word_of_mouth"
      } ]
  }
}

HTML

<div class="form-group custom-field-group custom-field-origin-group">
  <label class="control-label custom-field-origin-label" for="cf_origin">How did you find us</label>
  <div class="control-wrapper radio-control-wrapper custom-field-origin-control-wrapper">
      <span class="radio custom-field-origin-option custom-field-origin-option-0">
          <label class="custom-field-origin-option-label custom-field-origin-option-label-0" for="custom-field-origin-choice-0">
              <input type="radio" value="search" checked="checked" class="custom-field-origin-choice custom-field-origin-choice-0" name="cf_origin" id="custom-field-origin-choice-0">
              <span>Search engine</span>
          </label>
      </span>
      <span class="radio custom-field-origin-option custom-field-origin-option-1">
          <label class="custom-field-origin-option-label custom-field-origin-option-label-1" for="custom-field-origin-choice-1">
              <input type="radio" value="word_of_mouth" class="custom-field-origin-choice custom-field-origin-choice-1" name="cf_origin" id="custom-field-origin-choice-1">
              <span>Recommended</span>
          </label>
      </span>
  </div>
</div>

Customer Notice

A customer notice can be added to the page via the Hosted initialisation request (see Hosted payments API) and may be rendered at different locations - see "Form" markup above for an indication of the relative layout.

When present, the notice will have a class customer-notice, and an additional class based upon the location:

HTML

<div class="customer-notice customer-notice-form-top">This is a customer notice located at FORM_TOP</div>

<div class="customer-notice customer-notice-form-bottom">This is a customer notice located at FORM_BOTTOM</div>

<div class="customer-notice customer-notice-form-after">This is a customer notice located at FORM_AFTER</div>

The content may contain a limited subset of HTML elements, which can be targeted with a nested selector for styling. See Customer Notice for more information.

Result Page

The result page is shown when requested in the hosted initialisation api request.

JSON

"features" : {
"showResultsPage" : true
}

It can also be configured on the merchant account.

HTML

<section class="hosted-main-section transaction-result-section">
<section class="transaction-results">
	<h1 class="transaction-result status-transaction-result">Successful</h1>
	<div class="transaction-result transaction-type-transaction-result">
		<label>Transaction Type</label>
		<p>Payment</p>
	</div>
</section>
<section class="transaction-details">
	<div class="transaction-detail amount-transaction-detail">
		<label>Amount</label>
		<p>
			<span class="amount-value">£10.99</span>
			<span class="amount-currency-code">GBP</span>
		</p>
	</div>
	<div class="transaction-detail date-transaction-detail">
		<label>Date</label>
		<p>15/11/2017 14:16:05 Europe/London (+00:00)</p>
	</div>
	<div class="transaction-detail merchant-reference-transaction-detail">
		<label>Order ID</label>
		<p>abc123</p>
	</div>
	<div class="transaction-detail description-transaction-detail">
		<label>Description</label>
		<p>Merchant generated transaction description</p>
	</div>
	<div class="transaction-detail transaction-id-transaction-detail">
		<label>Transaction ID</label>
		<p>1234567890</p>
	</div>
	
	<div class="transaction-detail card-transaction-detail">
		<label>Card</label>
		<p>
			<span class="card-scheme">Mastercard</span>
			<span class="card-pan">************0010</span>
		</p>
	</div>
</section>
<section class="transaction-result-controls">
	<!-- To more closely match other hosted pages, this link will become wrapped in an form-actions and action-links element in early 2018 -->
	<a class="action-link return-action-link" href="...">Continue</a>
</section>
</section>

Form Actions

Which links and buttons are included in the form depends on the page and merchant configuration, but the structure is always the same. Action links come first, then action buttons.

Payment Form

HTML

<section class="form-actions">
  <div class="action-links">
      <!-- The add card link is shown when the customer has already saved cards and has not reached the configurable cards per customer limit -->
      <span class="action add-new-card-action">
          <a href="changeCard" class="action-link add-new-card-action-link">Add New Card</a>
      </span>
      <span class="action cancel-action">
          <a href="cancel" class="action-link cancel-action-link">Cancel</a>
      </span>
  </div>
  <div class="action-buttons">
      <input class="button default-button action-button pay-action-button" type="submit" name="paynow" value="Pay Now" />
  </div>
</section>

Card Management Form

HTML

<section class="form-actions">
  <div class="action-links">
      <span class="action back-action">
          <a href="back" class="action-link back-action-link">Back</a>
      </span>
  </div>
  <div class="action-buttons">
      <input name="deleteCard" class="button delete-card-button" type="submit" value="Delete" />
      <input name="updateCard" class="button update-card-button" type="submit" value="Update" />
  </div>
</section>

Bootstrap

By default the Bootstrap CSS is included in all hosted pages. Skin properties are available to specify the Bootstrap version that gets included or to turn Bootstrap off if its not wanted, see Skin Properties. To make the most of Bootstrap, several of its classes are on the hosted page HTML to give a good base level of styling. If bootstrap is disabled then these classes are still included, the CSS just isn't imported.

By default Bootstrap will make all inputs page width. This is not suitable for some of the payment form input elements that need to be side-by-side, such as card expiry date. To that end we have introduced a new class which is included when Bootstrap is enabled.

CSS

.form-control-inline {
  min-width: 0;
  width: auto;
  display: inline;
}

Multiple CSS Files

Only the main.css file from the skin will be loaded onto the hosted pages. You may wish to spread your CSS over multiple files to aid management. You can use the css @import feature to achieve this.

Say your CSS is split over three files colours.css, widgets.css and layout.css. If in the skin zip they are put into the same directory as main.css, then the main css could be just

CSS

@import url("colours.css");
@import url("widgets.css");
@import url("layout.css");

Internet Explorer support

It is possible for the skin to include extra CSS files just for use in specific versions of Internet Explorer. The files that can be included are:

File in skin zip	Version of IE it will be included for
/assets/css/ie.css	All
/assets/css/ie9.css	IE 9
/assets/css/ie8.css	IE 8
/assets/css/ie7.css	IE 7
/assets/css/ie6.css	IE 6
/assets/css/ie-lte8.css	IE 8 and older
/assets/css/ie-gt8.css	IE versions after 8

The CSS files are selectively included on the page using the extended comment feature of Internet Explorer.

HTML

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie.css" />
<![endif]-->
<!--[if lte IE 8]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie-lte8.css" />
<![endif]-->
<!--[if gt IE 8]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie-gt8.css" />
<![endif]-->
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie8.css" />
<![endif]-->
<!--[if IE 9]>
  <link rel="stylesheet" type="text/css" href=".../skin/assets/css/ie9.css" />
<![endif]-->

Content Security Policy

All hosted pages are served with a Content Security Policy (CSP) which tells the web browser to only load other content from Access PaySuite domains. This provides protection for the user as no content can be injected from other domains. For the skin CSS that means it cannot reference images or resources from other domains. Any such resources have to be put inside the skin zip and referenced from the CSS with relative paths.