Customize payment form
Get started
Sign In
Customize payment form
Create a seamless experience for customers by styling your payment form

The Solidgate Payment Form boasts unparalleled flexibility and extensive customization options. It accommodates various payment processing requirements across different countries. The form supports the display of additional fields essential for transaction processing and permits field whitelisting for easy display control, ensuring a personalized user experience.

Through the form, avail the opportunity to:

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

Template

Solidgate offers several default form templates with pre-configured styles.

Utilizing a template for a payment form from Solidgate simplifies the payment acceptance process on your website.

Templates offer a pre-designed and functional form, eliminating the need for customization. This ensures adherence to industry standards for both security and user experience.

Styles

The Solidgate Payment Form employs a styles object, consisting of nested CSS properties corresponding to diverse form elements. This enables easy and flexible form appearance modification without altering the underlying HTML or JavaScript code.

Allowed Classes Description
styles This class allows customization of all input fields’ CSS properties, aligning the form with your website’s design.

CSS properties are supported in the following classes:

chevron down chevron up
Form styles properties

Description

Class for editing styles of all input fields on the form.

Description

Class for editing styles of all additional fields on the form.

Description

Parameter responsible for the body of the form.

Description

Card number field parameter.

Description

Expiry date field parameter.

Description

Card CVV field parameter.

Description

Cardholder parameter field.

Description

ZIP code field parameter.

Description

Submit button field parameter.

Description

The payment form title - header for the payment form.

Description

The payment form subtitle.

Description

Class for editing card template. Sample for changing card color: card_view: { 'background': '#3D4251'}

Description

The errors customization for card and flat template.

Description

Class for editing the size and position of card brands.

Description

Class for editing the size and position of secure brands.

Description

Wrapper for CVV and Expiry Date fields in default form template.

  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 the following 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.

For the Solidgate Payment Form, applying CSS styles enables control over form elements’ visibility, providing control over specific properties’ display within the form.

Please note that hiding price-related fields on the payment form might impact the form’s functionality, so thorough testing is recommended to ensure the form still functions correctly.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
styles: {
  card_number: {
    display: 'none'
  },
  expiry_date: {
    display: 'none'
  },
  card_cvv: {
    display: 'none'
  },
  // other fields you want to hide
}

Label and placeholder 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. To customize all placeholders on the payment form, add the parameter fieldNamePlaceholder with the new label name in the formParams object for each desired field.

The parameters for Card Data fields are presented below.

1
2
3
4
5
6
7
8
cardExpiryDateLabel
cardCvvLabel
cardNumberLabel
cardHolderLabel
cardExpiryDatePlaceholder
cardCvvPlaceholder
cardNumberPlaceholder
cardHolderPlaceholder

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

For example, bolivia_ci becomes boliviaCiLabel, and argentina_dni becomes argentinaDniLabel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
PaymentFormSdk.init({
  ...restData,
  formParams: {
    ...restFormParamsIfPresent,
    cardExpiryDateLabel: 'Expiration Date',
    cardExpiryDatePlaceholder: 'MM/YY',
    argentinaDniLabel: 'DNI',
    boliviaCiLabel: 'CI'
  }
})

Custom submission

The Solidgate Payment Form provides two options for payment submission:

  • click on the payment button
  • use the form.submit method
The option to display a custom payment button below the form is available, allowing for the collection of additional user data.

To hide the payment form submit button, set the allowSubmit display property in formParams to false during initialization. This action not only hides the button but also blocks form submission via the enter key.

1
2
3
4
5
6
7
const form = PaymentFormSdk.init({
  ...restData,
  formParams: {
    ...restFormParamsIfPresent,
    allowSubmit: false
  }
})
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig, ClientSdkInstance } from "@solidgate/react-sdk"

const formParams = {
  allowSubmit: false
}

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
}> = (props) => {
  return (
    <Payment
      merchantData={props.merchantData}
      formParams={formParams}
    />)
}
 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
import {Component} from '@angular/core';

import {InitConfig} from "@solidgate/angular-sdk";

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [formParams]="formParams"
      [merchantData]="merchantData"
      width="100%"
    ></ngx-solid-payment>
  `
})
export class AppComponent {
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }

  formParams: InitConfig['formParams'] = {
    allowSubmit: false
  }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <Payment
      :merchant-data="merchantData"
      :form-params="formParams"
      width="100%"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}

const formParams: InitConfig['formParams'] = {
  allowSubmit: false
}
</script>

To submit the payment form without a Solidgate button, call the form’s submit method.

1
document.getElementById('yourCustomSubmitButtonId').addEventListener('click', () => form.submit())
 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
import React, { FC, useRef, useCallback } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig, ClientSdkInstance } from "@solidgate/react-sdk"

const formParams = {
  allowSubmit: false
}

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
}> = (props) => {
  const [isMounted, setIsMounted] = useState(false);
  const [form, setForm] = useState<ClientSdkInstance | null>(null);
  
  const handleOnReadyPaymentInstance = useCallback((form: ClientSdkInstance) => {
    setForm(form)
  }, [])
  
  const handleMounted = useCallback(() => {
    setIsMounted(true)
  }, [])

  return (
    <div>
        <Payment
          merchantData={props.merchantData}
          formParams={formParams}
          onReadyPaymentInstance={handleOnReadyPaymentInstance}
          onMounted={handleMounted}
        />
      {mounted && (
        <button type="button" onClick={() => {
          form?.submit()
        }}>
          {"Submit"}
        </button>
      )}
    </div>
  )
}
 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
import {Component} from '@angular/core';
import {BehaviorSubject, filter} from 'rxjs'
import {InitConfig, SdkMessage, MessageType} from '@solidgate/angular-sdk';

@Component({
  selector: 'app-root',
  template: `
    <ngx-solid-payment
      [merchantData]="merchantData"
      (mounted)="mounted = true"
      (readyPaymentInstance)="formSubject$.next($event)"
    ></ngx-solid-payment>
    <button *ngIf="mounted" type="button" (click)="submit()"></button>
  `
})
export class AppComponent {
  isMounted = false;
  
  formSubject$ = new BehaviorSubject<ClientSdkInstance | null>(null)
  
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }

  private form$ = this.formSubject$.pipe(filter(Boolean))

  submit(): void {
    this.form$.subscribe(form => form.submit())
  }
}
 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
<template>
  <Payment
      :merchant-data="merchantData"
      @mounted="onMounted"
      @ready-payment-instance="onReadyPaymentInstance"
  />
  <button     
      v-if="mounted"
      @click="submit">
    Submit
  </button>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'
import { InitConfig, ClientSdkInstance } from '@solidgate/vue-sdk'
const Payment = defineAsyncComponent(() => import('@solidgate/vue-sdk'))

const merchantData: InitConfig['merchantData'] = {
  merchant: '<<--YOUR MERCHANT ID-->>',
  signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
  paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
}

let mounted = ref(false)

let formResolve: (form: ClientSdkInstance) => {} = () => {} 
const formPromise = new Promise<ClientSdkInstance>(resolve => {
  formResolve = resolve
})

function onReadyPaymentInstance(form: ClientSdkInstance): void {
  formResolve(form)
}

function onMounted(): void {
  mounted.value = true
}

function submit(): void {
  formPromise.then(form => form.submit())
}
</script>
Actual submission does not occur if:

  • Additional fields require display
    Users see a validation error on the new field.
  • Some fields await validation
    Users see validation errors on the form.
  • Validation errors exist in form fields Otherwise, the form submits successfully.

Otherwise, the form will be submitted.