Custom Images in Payment Pages 2.0

If you want to replace or add different background images to the elements in your Payment Pages form, you have the following options:​

• It is recommended that you use Bitmap images in the CSS.

• If you need external images, you can only include the URLs to external images in the CSS, and the image URL should use the HTTPS protocol.

Use Google Fonts

If you use Google Fonts in Payment Pages 2.0, do not import multiple fonts in one import statement like below:

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

Instead, you should import the fonts one by one. For example:

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@1,700&display=swap');

Credit Card Expiration Date Fieldset

For the credit card type payment pages, the card expiration date month and year are grouped with a HTML fieldset tag.

The following CSS segment controls the credit card expiration date fields:

.form-element.required { height:auto !important; }
.form-element{ min-width:inherit !important; }
#form-label-creditCardExpirationMonth{ display: none; }
.field-set{ border: 1px solid #808080 !important; 
            margin: 1px; padding:1px; width: auto; color:#808080; }
.field-set-legend{ display: inline-block !important; color:#808080; }
.form-label-month{ display: block; }
.form-label-year{ display: block; }

Edit the above CSS to customize the display of the expiration date fields. For example, if you want to display the default expiration date label, comment out the declaration for the form-label-creditCardExpirationMonth id selection as below:

#form-label-creditCardExpirationMonth{ /* display: none; */ }

If you do hide the original expiration date label, you will see the expiration date fieldset not aligned in the preview mode. However, this problem does not exist when you actually renders the Payment Page. The expiration date fields correctly aligns with the rest of the fields on the Payment Page.

If you do not use the provided CSS pack but customize the CSS code based on the default CSS, to customize the width of the expiration date fields, use the following CSS code. This method is helpful for interaction issues where the expiration year and month dropdown lists cannot be properly clicked and displayed.

#input-creditCardExpirationYear {
  width: XXXpx;
}
#input-creditCardExpirationMonth {
  width: XXXpx;
}