Payment.Js - HTML container example

CONTAINER

.asx-container wraps the payment form. Use this to apply, for example, margins between your page elements and the payment form.

<div class="asx-container">
	...
</div>

Individual classes:

.asx-container-card

FORM

.asx-form styles all payment forms. Use this to change the look and feel of the payment form, including backgrounds, paddings, margins or shadows.

<form class="asx-form asx-clearfix" action="{handler}" method="POST" target="{iframe}" lang="en">
	...
</form>

Individual classes:
.asx-form-card

GROUPS

.asx-group wraps the label and the wrapper of the input element. Use this to style labels and inputs together, i.e. position or width.

<div class="asx-group">
	<div class="asx-label">...</div>
	<div class="asx-wrapper">...</div>
</div>

Individual classes:
.asx-group-brand
.asx-group-cardNumber
.asx-group-expiry
.asx-group-cardHolder
.asx-group-cvv
.asx-group-submit / styles the "Pay now" button
.asx-group-button / styles the buttons containing the brand

LABELS

.asx-label holds the label of an input element.

<div class="asx-label">
	Card Number
</div>

Individual classes:

.asx-label-brand
.asx-label-cardNumber
.asx-label-expiry
.asx-label-cardHolder
.asx-label-cvv

WRAPPERS

Input and select elements are wrapped in a div to gain more control over their styles, especially their width.

.asx-wrapper holds an input or select element. Use this to set the width of the containing input or select element.

<div class="asx-wrapper">
	...
</div>

Individual classes:
.asx-wrapper-brand
.asx-wrapper-cardNumber
.asx-wrapper-expiry
.asx-wrapper-cardHolder
.asx-wrapper-cvv
.asx-wrapper-submit

INPUT, SELECT ELEMENTS or DIVISION (EMBEDDED)

All textual <input>, <textarea>, <select> elements or <division> where ebedded field will be placed, have a base .asx-control class and are set to width: 100%; by default. The width of these elements should be set via .asx-wrapper.

.asx-control styles the borders, backgrounds or paddings of all <input>, <select>, and <div>.

<div class="asx-control asx-control-cardNumber">
<input type="tel" value="" > // received from Payment.js
</div>

Individual classes:
.asx-control-brand
.asx-control-cardNumber
.asx-control-expiry
.asx-control-cardHolder
.asx-control-cvv

BUTTONS

.asx-button styles the submit buttons.

<button type="submit" name="pay" class="asx-button asx-button-pay">Pay now</button>

Individual classes:
.asx-button-pay / styles the "Pay now" button.
.asx-button-brand / styles the buttons containing a brand.

BRANDS

.asx-brand styles the brand icons.

<div class="asx-brand asx-brand-card asx-brand-mastercard"></div>

Individual classes:
.asx-brand-card / styles the card brands
.asx-brand-brandname / dynamic, to show and styles the specific brand received from Payment.js

ERROR HINTS

.asx-has-error adds a red background, border and color to the input element and a red color to the next .asx-hint element.

<div class="asx-control asx-control-cardNumber asx-has-error">
	<input type="tel" name="" value="" > // Received from Payment.js
</div>
<div class="asx-hint asx-hint-cardNumberError">
	Invalid card number or brand // dynamic value from Payment.js
</div>

Individual classes:
.asx-hint-cardNumberError /
.asx-hint-expiryError /
.asx-hint-cardHolderError /
.asx-hint-cvvError /

HELPERS

.asx-clearfix allows elements to contain floats without re-sorting. Assuming that .asx-label and .asx-wrapper are floated, .asx-group needs .asx-clearfix.

<div class="asx-group asx-clearfix">
	<div class="asx-label">...</div>
	<div class="asx-wrapper">...</div>
</div>

CREDIT CARD HTML & CSS CLASSES

Here is an example HTML output of the credit card payment form:

<div id="card" class="asx-container asx-container-card">
	<form class="asx-form asx-form-card asx-clearfix" action="{handler}" method="POST" target="{frame}" lang="en">
		<div class="asx-group asx-group-brand asx-clearfix">
			<div class="asx-psp">Brand</div>
			<div class="asx-brand asx-brand-card asx-brand-MASTER"></div>
		</div>
		<div class="asx-group asx-group-cardNumber asx-clearfix">
			<div class="asx-label asx-label-cardNumber">Card Number</div>
			<div class="asx-wrapper asx-wrapper-cardNumber">
				<div class="asx-control asx-control-cardNumber" id="asx-cc">
					<input> // Received from Payment.js
				</div>
				<div class="asx-hint asx-hint-cardNumberError">
				</div>
			</div>
		</div>
		<div class="asx-group asx-group-expiry asx-clearfix">
			<div class="asx-label asx-label-expiry">Expiry Date</div>
			<div class="asx-wrapper asx-wrapper-expiry">
				<input autocomplete="off" type="tel" name="card.expiry" class="asx-control asx-control-expiry" placeholder="MM / YY">
				<div class="asx-hint asx-hint-expiryError">
				</div>
			</div>
		</div>
		<div class="asx-group asx-group-cardHolder asx-clearfix">
			<div class="asx-label asx-label-cardHolder">Card holder</div>
			<div class="asx-wrapper asx-wrapper-cardHolder">
				<input autocomplete="off" type="text" name="card.holder" class="asx-control asx-control-cardHolder" placeholder="Card holder">
				<div class="asx-hint asx-hint-cardHolderError">
				</div>
			</div>
		</div>
		<div class="asx-group asx-group-cvv asx-clearfix">
			<div class="asx-label asx-label-cvv">CVV</div>
			<div class="asx-wrapper asx-wrapper-cvv">
				<div class="asx-control asx-control-cvv" id="asx-cc">
					<input> // Received from Payment.js
				</div>
				<div class="asx-hint asx-hint-cvvError">
				</div>
			</div>
		</div>
		<div class="asx-group asx-group-submit asx-clearfix">
			<div class="asx-wrapper asx-wrapper-submit">
				<button type="submit" name="pay" class="asx-button asx-button-pay">Pay now</button>
			</div>
		</div>
		<input type="hidden" name="{hiddendata1}" value="{value}">
		<input type="hidden" name="{hiddendata2}" value="{value}">
		<input type="hidden" name="{hiddendata3}" value="{value}">
		<input type="hidden" name="card.expiryMonth" value="">
		<input type="hidden" name="card.expiryYear" value="">
	</form>
</div>