Ctrlk
Sign up for free
For the complete documentation index, see llms.txt. This page is also available as Markdown.

How to customize and style the 2Pay.js payment form

Overview

The 2Pay.js payment form can be customized and styled by providing an object as the second argument when calling the create method from component service in the TwoPayClient JavaScript SDK.

Before moving on to the payment form customization, let's take a look at how the elements work and how they are rendered by the browser.

To implement the documentation below, you need to have a 2Pay.js client already set up and a payment form already working inside your web page. If not, read this article to see the basic implementation of 2Pay.js.

Merchant’s Web Page and the 2Pay.js Form

As you probably noticed, the payment form renders inside an iFrame so the merchant’s page CSS will have to be written separately from the payment form. For example, you have a Full name field which is on the merchant’s page and the credit card, CVV and expiration date fields that are in the iFrame. However, the entire form will have to look and behave the same and the only way to customize the iFrame is by using the style configuration.

Payment Form Elements and Behavior

Rendering the payment form with the default styling (no styles applied) will consist of the following structure.

Generic elements

You can use generic elements as high-level HTML elements.

<body>
  <div>
    <form class="form">
      <div class="row">
        <div class="col">
        
          <!-- Credit card number field content goes here -->
          
        </div>
      </div>
      <div class="row">
        <div class="col">
        
          <!-- Expiration date field content goes here -->
        
        </div>
        <div class="col">
        
          <!-- CVV field content goes here -->
        
        </div>
      </div>
    </form>
  </div>
</body>

The Payment Form <body> Element

The payment form is rendered inside an iFrame and it needs to have an HTML, a <body> and a <head> tag.

CSS rules such as font, color, and background can be applied to the <body> by providing styles in the style object, as shown in the example below.

HTML Elements <div class=”row”> and <div class=”col”>

The purpose of these two elements is to offer a way to divide the payment form content. For example, using rows and columns by applying CSS rules for them. Below is an example of how the payment form can display with the credit card number field on a row and expiration date field and CVV field on another row with two columns.

Card number field

The card number field will be rendered together with several other HTML elements that are represented and explained below.

The field container <div class=”field-container card-number”>

It holds all the card number field elements and it can customizable, as shown in the example below.

The field wrapper <div class=”field-wrapper”>

It contains the label, input, and icons and offers support for different states (validation or transition):

  • default → Contains the base class names “field-wrapper form-group is-error is-empty is-required“. Usually, you will apply only some spacing to this element:

  • focus → Offers support for when the input is focused by adding the class name “is-focused” to this element.

  • error → Offers support for when there is a validation error and adds the class name “is-error“ to this element.

  • valid → Offers support for when the field validation passes and adds the class name ”is-valid” to this element.

The field’s label <label class="label control-label">

Styling the field’s label:

Styling the field’s label on focus:

Styling the field’s label on error:

Styling the field’s label when valid:

The input wrapper <div class="input-wrapper">

Offers support for absolute positioning of the icons:

The input <input type=”text” class=”field form-control”>

This is the actual input field where the user types in the data.

Styling the input:

Styling the input on focus:

Styling the input on error:

Styling the input when valid:

The card icon <i class="card-icon"></i> or <i class="card-type-icon"></i> (card number specific element)

This element represents the card icon which appears by default in the card number field. The “card-icon” class name changes into “card-type-icon“ after the credit card auto-detection returns a card type.

This element’s style can also be customized:

The lock icon <i class="lock-icon"></i> (available for card number and CVV fields)

This element can be customized the same way as the card icon or it can be hid.

The lock icon <i class="error-icon"></i> or <i class="valid-icon"></i>

This element represents the error of valid icons. When an error is present, the element will have the class name “error-icon“, or if the field is valid, the element will have the “valid-icon“ class name. There is no class name on default state.

The example below shows how to style the error and valid icons:

The validation message element <span class="validation-message">

This element displays only whether an error is present for the current field.

Here's how you can customize the validation message element:

Expand table

The above styling can be applied to all payment form fields with some exceptions:

  • card-icon, card-type-icon – are only available for the card number field;

  • lock-icon – is only available for the card number and CVV fields;

  • you cannot pass any URL references in the style object. The following example will NOT work:

The Style Object

Default style object

The default style object used, if no other style object has been provided, is the one below:

Allowed CSS Properties

Allowed CSS Pseudo-classes

PreviousBasic Implementation for 2Pay.js Payments SolutionNextSet the language when generating the card component

Last updated

Was this helpful?