SimpleCheckout Styling

You are here:

SimpleCheckout Design Customizations

You can adapt and adjust the look and feel for how your SimpleCheckout payment form is to be displayed. Our designers have prepared 10 different samples, which you can download and use – or you can get more information below.

Style options

The styling of our payment form can be adjusted heavely by setting the CSS styles of the objects before the payment applet is loaded. 

The payment form always contains a class called paymentWidgets which you can alter upon. The attribute data-theme=”divs” is our most dynamically div-based form that you can use, and that matches most requirements for building up a payment form.

				
					.paymentWidgets .PaymentFields {
        background: #FFF;
        width: 400px;
    }
    .paymentWidgets .PaymentFields div {
        position: relative;
        width: 200px;
    }
				
			

The div class PaymentFields have a subset of divs, which contains:

  • a div class field-description
  • a div class field-content

Each input field have its own id that you can reach for setting the CSS of the field.

As you have seen above, you can override any of the CSS simply by adding your own custommade CSS in your stylesheet.