Customize payment form

Create a seamless experience for customers by styling your payment form

The payment form offers exceptional flexibility and extensive customization options, accommodating various requirements for payment processing in different countries. It supports displaying additional fields necessary for processing transactions and allows white-listing fields for easy display control, ensuring a tailored user experience regardless of the location.

Through the form, there is an opportunity to:

use one of the payment form templates
define styles for the selected form template or leave the default option
restrict the Guide
After completing all the steps described above and modifying all required parameters, you need to initiate Solidgate SDK. optional field from being shown

Template

Solidgate offers a number of default form templates with ready-to-go styles if you do not want to customize it with your owns.

Using a template for a payment form provided by Solidgate can simplify the process of accepting payments on your website. Templates provide a pre-designed and functional form that you can use without the need to customize its appearance or layout. This can save time and effort and ensure that the form adheres to industry standards for security and user experience.

default

card

inline

flat

Styles

The Solidgate payment form is styled with a styles object composed of nested CSS properties under objects corresponding to various form elements. This provides a simple and flexible way to modify the appearance of the form without having to make changes to the underlying HTML or JavaScript code.

Allowed Classes	Description
`styles`	The class enables customization of all input fields’ CSS properties on the form, ensuring a consistent design that aligns with your website’s aesthetics.

The CSS properties are supported in the following classes:

CSS Sample of Custom Styles

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132


styles: {
  form_body: {
    'font-family': 'Open Sans'
  },
  card_brands: {
  ...
  },
  secure_info: {
  ...
  },
  form_title: {
    display: 'flex',
      width: '100%',
      'justify-content': 'center',
      'font-weight': '500',
      'font-size': '28px',
      color: '#3D4251'
  },
  submit_button: {
    'display': 'none',
      'background-color': '#46D47F',
      height: '50px',
      ':disabled': {
      'background-color': '#576574'
    },
    '.title': {
      '::before': {
        'object-fit': 'contain',
      }
    }
  },
  card_number: {
    '.error input': {
      'border-color': '#FC9494',
        color: '#FC9494'
    },
    '.error .label': {
      color: '#FC9494',
    },
    '.error-text': {
      color: '#FC9494',
        '.triangle': {
        'border-color': 'transparent transparent ##ff6b6b'
      }
    },
    input: {
      'border-color': '#c8d6e5',
        'color': '#222f3e',
        ':focus': {
        'border-color': '#8395a7',
      },
    },
    '.label': {
      color: '#222f3e'
    },
    i: {
      display: 'none !important',
    },
  },
  card_cvv: {
    '.error input': {
      'border-color': '#FC9494'
    },
    '.error .label': {
      color: '#FC9494'
    },
    '.error-text': {
      color: '#FC9494',
        '.triangle': {
        'border-color': 'transparent transparent #3498db'
      }
    },
    input: {
      'border-color': '#c8d6e5',
        'color': '#222f3e',
        ':focus': {
        'border-color': '#8395a7',
      },
    },
    '.label': {
      color: '#3D4251'
    },
  },
  expiry_date: {
    '.error input': {
      'border-color': '#FC9494'
    },
    '.error .label': {
      color: '#FC9494'
    },
    '.error-text': {
      color: '#FC9494',
        '.triangle': {
        'border-color': 'transparent transparent #3498db'
      }
    },
    input: {
      'border-color': '#c8d6e5',
        'color': '#222f3e',
        ':focus': {
        'border-color': '#8395a7',
      },
    },
    '.label': {
      color: '#3D4251'
    },
  },
  zip_code: {
    '.error input': {
      'border-color': '#FC9494'
    },
    '.error .label': {
      color: '#FC9494'
    },
    '.error-text': {
      color: '#FC9494',
        '.triangle': {
        'border-color': 'transparent transparent #3498db'
      }
    },
    input: {
      'border-color': '#c8d6e5',
        'color': '#222f3e',
        ':focus': {
        'border-color': '#8395a7',
      },
    },
    '.label': {
      color: '#3D4251'
    },
  },
}

The properties for input fields on the payment form could be applied for 4 states:

not-empty
error
valid
default - without specifying the state

In case the state is not specified, properties are applied for all states.

The following pseudo-classes and pseudo-elements can also be styled using a nested object inside a variant:

:hover
:focus
:placeholder

There is no support for transferring images - neither via link or via data-uri.

Label customization

To customize all labels on the payment form, add the parameter fieldNameLabel with the new label name in the formParams object for each desired field.

The parameters for Card Data fields are presented below.

Card Data Fields Parameters

1
2
3
4


cardExpiryDateLabel
cardCvvLabel
cardNumberLabel
cardHolderLabel

To get the value of fieldNameLabel for additional fields, you need to take the Field Class name on the table, remake it into camelcase, and add a label at the end.

For example, bolivia_ci becomes boliviaCiLabel, and argentina_dni becomes argentinaDniLabel.

Label Customisation Sample

1
2
3
4
5
6
7
8
9


PaymentFormSdk.init({
  ...restData,
  formParams: {
    ...restFormParamsIfPresent,
    cardExpiryDateLabel: 'Expiration Date',
    argentinaDniLabel: 'DNI',
    boliviaCiLabel: 'CI'
  }
})

Subscriptions

Create and maintain a stable and healthy business subscription model.

Webhooks

Subscribe for events on your Solidgate account, so your integration can automatically trigger actions.

Reporting

Unlock reporting tools and features for in-depth transaction analysis and insights.