Understand how to integrate the payment form into your product
Solidgate’s payment form enables tokenization of sensitive data and management of 3D Secure authentication and supports multiple payment methods.
Integration steps
This guide simplifies adding Solidgate’s payment form to your website. It covers preparing the backend, installing the SDK, creating API instances, and setting up merchant data. Additionally, it explains how to initialize the form using different JavaScript frameworks and customize its look with parameters and styles.
Setup backend
Begin by setting up your backend, a vital step for successful implementation. Utilize the Solidgate SDK for seamless integration of Solidgate’s payment form into your platforms, leveraging its intuitive transaction and payment form customization features. To initiate a charge, it is essential to supply transaction-specific information via the fields of the paymentIntent object.
paymentIntent object
Expand all
Description
The public IP address of the customer. Both IPv4 and IPv6 are supported.
Private IPs (10.0.0.0-10.255.255.255, 172.16.0.0-172.31.255.255, 192.168.0.0-192.168.255.255) will result in an ‘Invalid IP’ error.
Example
8.8.8.8
Description
Customer platform at the moment of payment.
Available values:
WEB - desktop
MOB - mobile version
APP - application
Example
WEB
Description
The Order ID, which must be unique, is specified in the merchant system.
Example
123456
Description
The order description in your system and for bank processing.
Example
Premium package
Description
The ID of the predefined product must be passed in UUID v4 format.
Order amount - integer without fractional component (i.e cents). For instance, 1020 means 10 USD and 20 cents.
Required, for the non-subscription workflow.
Example
1020
Description
The currency amount is represented in a three-letter currency code as per the ISO-4217 standard.
Required, for the non-subscription workflow.
Example
USD
Description
Customer country subject to ISO 3166-1 alpha-3.
Required, for Apple, Google Pay.
Example
GBR
Description
The country where the goods are purchased or where the seller is based is identified using the ISO-3166 alpha-3 country code.
If you are registered with international payment systems as a marketplace, this parameter is required. Being registered as a marketplace, in the context of international payment systems, typically implies that you operate a platform where numerous sellers can offer their goods or services.
Example
CHN
Description
Customer email. If no parameter is received, it will be collected automatically on payment form.
Routing payments flag for 3DS flow (enabled by Solidgate account manager).
Example
true
Description
Time (in hours) when auto-settle should be done. Value of null means that the client must request settle on its own. Minimum of 0 means that executed in the near future, and maximum value is 168 hours.
In the event of providing a settle_interval of more than 7 days, banks may settle the payment earlier.
Example
48
Description
Parameter for transaction authorization through a payment form.
Example
auth
Description
The number of payments by the customer.
Example
1
Description
Date of order creation in format YYYY-MM-DD-HH-MM-SS.
Example
2020-12-21 11:21:30
Description
Order items in UTF-8 code.
Example
item1, item2
Description
Metadata is useful for storing additional, structured information about an object. The object consists of a set of key-value pairs (e.g. “coupon_code”: “NY2018", “partner_id”: “123989"). The callback notification returns an order_metadata from the order in each state.
Example
Up to 10 fields with an upper limit of 255 characters.
Description
The object is a struct that includes parameters such as address, city, country, state, and zip_code.
If the zip_code field is provided, manual entry will not be required for it.
Example
zip_code and state fields should have a maximum length of 10 characters.
country field must be in ISO 3166-1 alpha-3 format and should be exactly 3 characters long.
All other fields should have a maximum length of 100 characters.
Description
Device of customer.
Example
iPhone 8 iOS 12.0
Description
User-agent of the customer.
Example
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (HTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Provide this URL if you want to redirect a customer to your own Success Screen. If you do not provide the URL, Solidgate will direct customers to the Solidgate Success Screen.
Provide this URL if you want to redirect a customer to your own Fail Screen. If you do not provide the URL, Solidgate will direct customers to the Solidgate Fail Screen.
The
Solidgate
SDK
should be installed in your environment:
1
npm install @solidgate/node-sdk
1
go get github.com/solidgate-tech/go-sdk
1
composer require solidgate/php-sdk
1
pip3 install solidgate-card-sdk
Step 2 Create an SDK instance
To interact with the Solidgate API, you need to create an API instance by calling the API constructor function with your Public (public_key) and Secret (secret_key) keys and as arguments.
To create a charge, you must provide some information about the transaction. This information is encapsulated in a FormInitDTO object, which is created by calling the formMerchantData function on your API instance. In the example code, the formMerchantData function is called with paymentIntent fields.
1
2
3
4
5
6
7
8
9
10
constsolidGate=require('@solidgate/node-sdk');letapi=newsolidGate.Api("public_key","private_key");letpaymentIntentData={/// fill it as described in documentation
}letmerchantData=api.formMerchantData(paymentIntentData);constdataToFront=merchantData.toObject()
packagemainimport("encoding/json""fmt"solidgate"github.com/solidgate-tech/go-sdk")funcmain(){solidgateSdk:=NewSolidGateApi("public_key","secret_key")paymentIntent=PaymentIntent{}// fill as described in documentation
paymentIntentBytes,err:=json.Marshal(paymentIntent)iferr!=nil{fmt.Print(err)}formInitDto,err:=solidgateSdk.FormMerchantData(paymentIntentBytes)iferr!=nil{fmt.Print(err)}// ...
}
1
2
3
4
5
6
7
<?phpuseSolidGate\API\Api;$api=newApi('public_key','secret_key');$response=$api->formMerchantData(['JSON payment intent // fill as described in documentation']);
After you have set up the FormInitDTO and turned it into a simple object, you can effortlessly integrate it into your front-end code by transmitting the paymentIntent encrypted String (during form initialization).
Without SDK
In addition to using the Solidgate SDK for integrating the payment form into your website, there is an alternative option to work without the SDK.
Backend Preparation Set up your server-side code to handle the communication with Solidgate’s API using your preferred programming language and libraries.
Create DTO Create a JSON object containing the mandatory fields for a payment transaction, and then encrypt it.
Generate merchant data Once you have successfully encrypted the paymentIntent, pass it to your front-end code for further processing, such as initializing the payment form.
Signature generation To initialize the Solidgate payment form, generate the signature parameter on your backend, which verifies the merchant’s request authenticity on the payment gateway server. The signature is generated from the paymentIntent encrypted String.
constpublicKey="public_key"constsecretKey="secret_key"constdata=JSON.stringify({payment_intent_data// fill as described in documentation
});constpayloadEncrypted=encryptPayload(secretKey,data);constformInitDTO={paymentIntent:payloadEncrypted,merchant:publicKey,signature:generateSignature(publicKey,secretKey,payloadEncrypted)}functionencryptPayload(secretKey,data){letiv=crypto.randomBytes(16);letcipher=crypto.createCipheriv('aes-256-cbc',secretKey.substr(0,32),iv);letencrypted=cipher.update(data);encrypted=Buffer.concat([iv,encrypted,cipher.final()]);returnencrypted.toString('base64').replace(/\+/g,'-').replace(/\//g,'_')}functiongenerateSignature(publicKey,secretKey,attributes){varhashed=CryptoJS.HmacSHA512(publicKey+attributes+publicKey,secretKey);returnBuffer.from(hashed.toString()).toString('base64')}
$publicKey="public_key";$secretKey="secret_key";$attributes=array("json_data");// fill as described in documentation
$encryptedFormData=generateEncryptedFormData($secretKey,$attributes);$signature=generateSignature($publicKey,$secretKey,$encryptedFormData);$formInitDTO=["paymentIntent"=>$encryptedFormData,"signature"=>$signature,"merchant"=>$publicKey,];functiongenerateEncryptedFormData(string$secretKey,array$attributes):string{$attributes=json_encode($attributes);$secretKey=substr($secretKey,0,32);$ivLen=openssl_cipher_iv_length('aes-256-cbc');$iv=openssl_random_pseudo_bytes($ivLen);$encrypt=openssl_encrypt($attributes,'aes-256-cbc',$secretKey,OPENSSL_RAW_DATA,$iv);returnstrtr(base64_encode($iv.$encrypt),'+/','-_');}functiongenerateSignature(string$publicKey,string$secretKey,string$data):string{returnbase64_encode(hash_hmac('sha512',$publicKey.$data.$publicKey,$secretKey));}
typeFormInitDTOstruct{PaymentIntentstringMerchantstringSignaturestring}funcmain(){publicKey:="public_key"secretKey:="secret_key"encryptedData,err:=EncryptCBC([]byte(secretKey)[:32],[]byte("json payment_intent"))iferr!=nil{returnnil,err}encoded:=base64.URLEncoding.EncodeToString(encryptedData)signature:=GenerateSignature(publicKey,secretKey,[]byte(encoded))// use formInitDTO to pass data to frontend
formInitDTO:=FormInitDTO{PaymentIntent:encoded,Merchant:publicKey,Signature:signature,}}funcGenerateSignature(publicKey,secretKeystring,data[]byte)string{payloadData:=publicKey+string(data)+publicKeykeyForSign:=[]byte(secretKey)h:=hmac.New(sha512.New,keyForSign)h.Write([]byte(payloadData))returnbase64.StdEncoding.EncodeToString([]byte(hex.EncodeToString(h.Sum(nil))))}funcpkcs7Pad(b[]byte,blockSizeint)([]byte,error){ifblockSize<=0{returnnil,errors.New("block size less than 0")}ifb==nil||len(b)==0{returnnil,errors.New("empty data to encrypt")}n:=blockSize-(len(b)%blockSize)pb:=make([]byte,len(b)+n)copy(pb,b)copy(pb[len(b):],bytes.Repeat([]byte{byte(n)},n))returnpb,nil}funcEncryptCBC(key,data[]byte)([]byte,error){data,err:=pkcs7Pad(data,aes.BlockSize)iferr!=nil{returnnil,err}block,err:=aes.NewCipher(key)iferr!=nil{returnnil,err}cipherText:=make([]byte,aes.BlockSize+len(data))iv:=cipherText[:aes.BlockSize]if_,err:=io.ReadFull(rand.Reader,iv);err!=nil{returnnil,err}mode:=cipher.NewCBCEncrypter(block,iv)mode.CryptBlocks(cipherText[aes.BlockSize:],data)returncipherText,nil}
Setup frontend SDK
The
Solidgate
SDK
is a hosted, pre-built user interface component for payments. The SDK helps tokenize the customer’s data so that the
card data does not come into contact with the merchant’s website.
When starting with the Solidgate payment form, you can use our official payment form SDK wrapper for different JS frameworks:
These integrations automatically load solid-form.js and provide a convenient interface for working with the form. Furthermore, you can use manual installation.
Alternatively, manually add the payment form SDK to your checkout page by inserting the script tag at the end of the HTML file’s <body> tag. Utilize the Solidgate CDN-hosted form for easy integration, ensuring the latest version and preventing potential issues from script modification.
Check the console for a warning that Solidgate PaymentFormSdk
is already initialized. If this warning appears, solid-form.js
has most likely been loaded and executed twice. Remove the unnecessary connection.
Next, create a container for the payment form on your page and assign a custom ID, as shown below. Avoid setting height dimensions or display properties for elements inside the container, including the container itself, to prevent form appearance bugs due to CSS conflicts.
The following example specifies a container with the default id of Solidgate SDK.
1
<divid="solid-payment-form-container"></div>
Otherwise, you can use your own container, passing its id to iframeParams like in the example below.
<template><Payment:merchant-data="merchantData":form-params="formParams"width="100%"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}constformParams:InitConfig['formParams']={}</script>
Object data
(or InitConfig interface in case of frameworks usage) should contain the:
following properties
Expand all
Description
The main object required to init the form. Contains all the information for creating payment on Solidgate side.
Description
Unique merchant identification. Shall be shared at the moment of registration.
Example
api_pk_7b197...ba108f842
Description
Signature of request. It allows verifying whether the request from the merchant is genuine on the payment gateway server.
Example
MjNiYjVj…ZhYmMxMzNiZDY=
Description
The encrypted aes-cbc-256 string of JSON request data with random IV (16bytes) and secret key is first 32bytes of merchant secret key.
Example
E5FKjxw5vRjjIZ….vmG2YFjg5xcvuedQ==
Description
An object that allows you to control non-mandatory parameters of the form (f.e. - Cardholder Name, templates).
Description
The parameter allows you to select the type of payment button: with continue text or default one with pay text.
Example
continue
Default
pay
Description
The text on the submit button.
Example
Pay Now
Default
Not set
Description
Defines should Cardholder field be always visible. Otherwise, it could be shown simultaneously during
additional fields request.
The authentication method of the card transaction.
PAN_ONLY: This authentication method is associated with payment cards stored on file with the user’s Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.
CRYPTOGRAM_3DS: This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
The capability to transmit only PAN_ONLY or CRYPTOGRAM_3DS is also available, and such transmission will work for both one-time payments and subscriptions.
Example
['PAN_ONLY']
Default
['PAN_ONLY', 'CRYPTOGRAM_3DS']
Description
An object that allows you to customize the Apple Pay button.
Description
The parameter is responsible for displaying the Apple Pay button.
Example
false
Default
false
Description
The id of container to place the Apple Pay button.
By default, if not set, button will be displayed above the form.
Example
yourCustomContainerId
Default
Not set
Description
The color of the Apple Pay button on Solidgate payment form.
Supported colors:
white-outline
black
white
Example
white-outline
Default
black
Description
The type of the Apple Pay button.
Supported types:
check-out
add-money
buy
order
plain
reload
set-up
subscribe
top-up
Not supported types:
donate
support
rent
contribute
tip
continue
pay
Example
check-out
Default
plain
Description
An object that allows you to customize form container placement and sizes.
Description
The parameter allows the overriding of the form’s width. You can set the value in either percentage (e.g., 100%) or pixels (e.g., 320px).
Please note that the minimum form width is 320 pixels. This requirement is related to the 3D Secure (3DS) window provided by Visa and Mastercard, and it should be adhered to in order to ensure a secure and proper display of the form during user authentication.
Example
100%
Default
Not set
Depending on form template:
default: 300px
card: 352px
inline: 300px
flat: 320px
Description
Custom containerId to place form. If not set, for will be displayed in element with id solid-payment-form-container
constdata={merchantData:{merchant:'api_pk_7b197...ba108f842',signature:'MjliMzU4ODE3ZDVlM2E1YWZmYzI1NmU4MzU3YjhlODRkMTJmZTk1NjIxOWNiYzFmNDk0N2NkNjk5YTA5Y2Q4NzIzOWIwMTgxZTQwOGExZjFmYWQ1NzQyYjc3ZGRjMzE0MTczYTQ2OGEyMTlmNGI4YzA5ZmNhMTczZDI0ZDBkZmM=',paymentIntent:'E5FKjxw5vRjjIZBKtH_Q9oN1Wmn5icMn720prO4nPB3cYpzC9wLAHwq9IwstmD-YFLFPsdq2Rk9YzRJhxdPEq2KI19fFt1QotX-smH5_xWxGfYcv9rf2Y4v4KWgbjzJylHTDM6eCXVvbdZyVU54vD3sxntN3gFiyuhEzMn8mKoDV0UdIqLN_VsTAdehBUrqk7aPNzXCfSqpy9pCBlpdFNCfgOyHoDXGGS_Z9fK3gCw7usF2v0IU96mQGzdtyEUs1Z2MJYwle7sjEkWNEb9SkpW1zUXEZCFMF8Cu-dn6fWe4cVE2Ok1MDeTE43dySgw9e8GzMxgPmG2YFjg5xcvuedQ=='},formParams:{buttonType:'default',submitButtonText:'Pay',isCardHolderVisible: true,hideCvvNumbers: true,headerText:'Enter your debit or credit card details (from merchant)',titleText:'Card info (from merchant)',formTypeClass:'default',googleFontLink:'//fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap',autoFocus: false},styles:{submit_button:{'background-color':'red','font-size':'16px','font-weight':'bold',':hover':{'background-color':'green'},form_body:{'font-family':'DM Sans'}}}}
Form events
Using the Solidgate payment form, you can build your user actions tracking by the events that it returns.
You can subscribe to Solidgate payment events like in the examples below.
1
2
3
4
5
6
constform=PaymentFormSdk.init(data)form.on('event_type',(e)=>{constbody=e.data// The body of any available event as it described below.
// The code will be executed when the event is received.
})
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(mounted)="onMounted($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onMounted(event: SdkMessage[MessageType.Mounted]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@mounted="mounted"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionmounted(event:SdkMessage[MessageType.Mounted]):void{// here your logic
}</script>
This event indicates that the user has successfully submitted the payment. It is triggered when valid data is entered within the form and the payment process is initiated.
The event could be triggered for one of the variations: the Solidgate payment form, Google Pay, or Apple Pay.
1
2
3
4
interfaceSubmitMessage{type:'submit',entity:'applebtn'|'googlebtn'|'form'// one of listed values, indicates how payment was processed
}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(submit)="onSubmit($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onSubmit(event: SdkMessage[MessageType.Submit]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@submit="submit"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionsubmit(event:SdkMessage[MessageType.Submit]):void{// here your logic
}</script>
This event indicates that the payment was successfully processed.
1
2
3
4
5
6
7
8
9
10
11
interfaceSuccessMessage{type:'success',entity:'applebtn'|'googlebtn'|'form'// one of listed values, indicates how payment was processed
order:{// an optional order object
status: string// an optional order status field
currency: string// an optional order currency field
amount: number// an optional order amount field
subscription_id: string// an optional subscription id field
order_id: string// an optional order id field
}}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(success)="onSuccess($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onSuccess(event: SdkMessage[MessageType.Success]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@success="success"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionsuccess(event:SdkMessage[MessageType.Success]):void{// here your logic
}</script>
This event indicates that the payment had been declined.
1
2
3
4
5
6
7
8
9
10
11
12
13
interfaceFailMessage{type:'fail'entity:'applebtn'|'googlebtn'|'form'// one of listed values, indicates how payment was processed
code: string// an optional error code field
message: string// an optional error message field
order:{// an optional order object
status: string// an optional order status field
currency: string// an optional order currency field
amount: number// an optional order amount field
subscription_id: string// an optional subscription id field
order_id: string// an optional order id field
}}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(fail)="onFail($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onFail(event: SdkMessage[MessageType.Fail]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@fail="fail"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionfail(event:SdkMessage[MessageType.Fail]):void{// here your logic
}</script>
This event informs that the payment starts processing through the 3D flow.
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(verify)="onVerify($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onVerify(event: SdkMessage[MessageType.Verify]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@verify="verify"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionverify(event:SdkMessage[MessageType.Verify]):void{// here your logic
}</script>
This event informs that the iframe performs a redirect (to status or to 3d verification page).
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(redirect)="onRedirect($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onRedirect(event: SdkMessage[MessageType.Redirect]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@redirect="redirect"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionredirect(event:SdkMessage[MessageType.Redirect]):void{// here your logic
}</script>
This event information on the current state of the Solidgate payment form and the user’s interaction with the controls:
interfaceInteractionMessage{type:'interaction'target:{// Indicates source of interaction
type:'button'|'input'// one of the listed
name:'submit'|'googlePay'|'applePay'|'cardNumber'|'cardCvv'|'cardExpiry'|'cardHolder'// It could be one of the listed; furthermore, Solidgate might extend the list.
interaction:'click'|'change'|'focus'|'blur'|'enterKeyDown'// one of the listed
}cardForm:{// Indicates current card form state
fields:{cardNumber:{isValid: booleanisTouched: boolean}cardCvv:{isValid: booleanisTouched: boolean}cardExpiry:{isValid: booleanisTouched: boolean}// The rest of the fields are optional, including, but not limited to: the `cardHolder` field
}isValid: booleanisTouched: boolean}}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(interaction)="onInteraction($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onInteraction(event: SdkMessage[MessageType.Interaction]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@interaction="interaction"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioninteraction(event:SdkMessage[MessageType.Interaction]):void{// here your logic
}</script>
This event indicates that the Solidgate payment form was resized. For example, could resize after a validation message appeared.
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(resize)="onResize($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onResize(event: SdkMessage[MessageType.Resize]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@resize="resize"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionresize(event:SdkMessage[MessageType.Resize]):void{// here your logic
}</script>
This event indicates that your styles have been applied to the Solidgate payment form. This event is helpful for cases when you want to draw your preloader over the Solidgate payment form (at this point, you may remove it).
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(customStylesAppended)="onCustomStylesAppended($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onCustomStylesAppended(event: SdkMessage[MessageType.CustomStylesAppended]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@custom-styles-appended="customStylesAppended"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioncustomStylesAppended(event:SdkMessage[MessageType.CustomStylesAppended]):void{// here your logic
}</script>
This event indicates that the customer has entered the card number and provides probable information about the card brand when the card number is validated.
Exact details will be confirmed and relayed via webhook notification.
1
2
3
4
5
6
7
8
9
10
11
12
13
interfaceErrorMessage{type:'error'value: Errordetails?:{code: string;// 1.01, 2.01 etc.
message: string;}}// only included in InitPaymentError.details
interfaceGateError{code: stringmessage: string}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(error)="onError($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onError(event: SdkMessage[MessageType.Error]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@error="error"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionerror(event:SdkMessage[MessageType.Error]):void{// here your logic
}</script>
The following Error classes are provided:
ConnectionError - happens when the user experiences problems with their internet connection.
InitPaymentError - happens when an error with payment intent occurs during initialization. The message will contain a stringified object with code and an explanation of the particular error. Additionally, it will include a details field with the original GateError object, allowing you to create different handlers for different error codes. The following error codes are supported:
1.01 - Invalid credentials or signature generated.
2.01 - Invalid data in payment intent. It could be a non-existing product ID or other properties, which will be described in a message.
6.01 - Something went wrong on our backed side, please contact support.
GatewayResponseError - occurs when we cannot parse the response from our backend. Please contact support in case of such errors.
This event indicates that the customer has entered the card number and provides information about the card brand when the card number is validated.
1
2
3
4
5
6
7
interfaceCardMessage{type:'card'card:{brand: string// one of the card brands in upper case ('VISA', 'MASTERCARD' etc) or 'unknown'
bin:'111222'// string with the card bin (first 6 symbols)
}}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(card)="onCard($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onCard(event: SdkMessage[MessageType.Card]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@card="card"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioncard(event:SdkMessage[MessageType.Card]):void{// here your logic
}</script>
This event indicates that the order status was changed while processing. However, the event may not show all changes before the final order status: approved or declined.
1
2
3
4
interfaceOrderStatusMessage{type:'orderStatus'response: object// partial Order status operation response (https://api-docs.solidgate.com/#tag/Card-payments/operation/Card%20order%20status)
}
import{Component}from'@angular/core';import{InitConfig,SdkMessage,MessageType}from"@solidgate/angular-sdk";@Component({selector:'app-root',template:`
<ngx-solid-payment
[merchantData]="merchantData"
(orderStatus)="onOrderStatus($event)"
></ngx-solid-payment>
`})exportclassAppComponent{merchantData: InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}onOrderStatus(event: SdkMessage[MessageType.OrderStatus]):void{// here your logic
}}
<template><Payment:merchant-data="merchantData"@order-status="orderStatus"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionorderStatus(event:SdkMessage[MessageType.OrderStatus]):void{// here your logic
}</script>
Form update
You do not have to repeatedly call the payment form when using multiple tariffs. Instead, you can request the form once and change the
amount
,
currency
,
product ID
, or one of the parameters of
partialIntent
object using the
update
method of the form instance.
To update Solidgate payment form parameter, generate the Signature parameter on your backend. The signature allows for verifying whether the request from the merchant is valid on the payment gateway server. It is generated from the
partialIntent encrypted String
Setup backend
First of all, it is necessary to make sure that the backend is prepared, while in the example code, the
formMerchantData
function is called with fields:
partialIntent object
Expand all
Description
Order amount - integer without fractional component (i.e cents). For instance, 1020 means 10 USD and 20 cents.
Required, for the non-subscription workflow.
Example
1020
Description
The currency amount is represented in a three-letter currency code as per the ISO-4217 standard.
Required, for the non-subscription workflow.
Example
USD
Description
The ID of the predefined product must be passed in UUID v4 format.
Required, for the subscription workflow.
Example
faf3b86a-1fe6-4ae5-84d4-ab0651d75db2
Description
The order description in your system and for bank processing.
Example
Premium package
Description
Parameter for transaction authorization through a payment form.
Example
auth
Description
The number of payments by the customer.
Example
1
Description
Date of order creation in format YYYY-MM-DD-HH-MM-SS.
Example
2020-12-21 11:21:30
Description
Order items in UTF-8 code.
Example
item1, item2
Description
Provide this URL if you want to redirect a customer to your own Success Screen. If you do not provide the URL, Solidgate will direct customers to the Solidgate Success Screen.
Provide this URL if you want to redirect a customer to your own Fail Screen. If you do not provide the URL, Solidgate will direct customers to the Solidgate Fail Screen.
To update, you must provide some information about the transaction. This information is encapsulated in a FormUpdateDTO object, which is created by calling the formUpdate function on your API instance.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
constsolidGate=require('@solidgate/node-sdk');letapi=newsolidGate.Api("public_key","secret_key");letpartialIntentData={/// fill it as described in documentation
}letformUpdateDTO=api.formUpdate(partialIntentData);constdataToFront=formUpdateDTO.toObject()/// This values should be applied on frontend in the following way
constform.update(dataToFront)
packagemainimport("encoding/json""fmt"solidgate"github.com/solidgate-tech/go-sdk")typeUpdateParamsstruct{...}funcmain(){solidgateSdk:=solidgate.NewSolidGateApi("public_key","secret_key")partialIntent=PartialIntent{}// fill in the necessary information for updating as described in the documentation
partialIntentBytes,err:=json.Marshal(partialIntent)iferr!=nil{fmt.Print(err)}formUpdateDto,err:=solidgateSdk.FormUpdate(partialIntentBytes)iferr!=nil{fmt.Print(err)}// ...
}
1
2
3
4
5
6
7
<?phpuseSolidGate\API\Api;$api=newApi('public_key','secret_key');$formUpdateDTO=$api->formUpdate(['JSON payment intent // fill as described in documentation']);
valapi=Api(HttpClient(),Credentials("public_key","secret_key"))valattributes=Attributes(mapOf(// fill as described in documentation
))valformUpdateDTO=api.formUpdate(attributes)
Step 2 Pass the generated data to your frontend
The
FormUpdateDTO
object that is returned by the
formUpdateDTO
function is an instance of a class, so you may need to convert it to a plain object before you can use it in your front-end code. In the example code, this is done by calling the
toObject
function on the
FormUpdateDTO
object, which returns a plain JavaScript object.
Once you have formed the merchant data and converted it to a plain object, you can use it in your front-end code to update with partialIntent encrypted String
Partial form update
Update method parameters
Expand all
Description
The encrypted aes-cbc-256 string of JSON request data with random IV (16bytes) and secret key is the first 32bytes of Merchant secret key.
Example
E5FKjxw5vRjjIZ....vmG2YFjg5xcvuedQ==
Description
Signature of request. It allows verifying whether the request from the Merchant is genuine on the payment gateway server.
<template><Payment:merchant-data="merchantData"@ready-payment-instance="onReadyPaymentInstance"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,ClientSdkInstance}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functiononReadyPaymentInstance(form:ClientSdkInstance):void{form.update({partialIntent,signature}).then(callbackForSuccessUpdate).catch(callbackForFailedUpdate)}</script>
It is important to note that you must handle possible errors, including network errors, in callbackForFailedUpdate
by calling a valid update or init; otherwise, the form will remain unresponsive.
If one of the parameters in the updateIntent request is invalid (e.g. the product_id will not be unique), you will get an error.
Solidgate provides the ability to apply discounts to subscription products through two schemas:
Predefined coupon application flow In this flow, the coupon ID is embedded and encrypted in the paymentIntent during payment initialization. Once the form is initialized, the applied discount will already be present.
Direct coupon application flow In this flow, the coupon code is applied after the payment form has been initialized using a special applyCoupon method.
ID of the coupon which corresponds to the specific product discount, must be passed in UUID v4 format.
The coupon flow will only be activated when a product_id is supplied of the subscription workflow.
Without a product_id, the coupon_id will be disregarded.
Example
eb4c6e93-4c53-447a-b215-5d5786af9844
After a successful form initialization, the discount will already be applied. However, in the case of an invalid or expired coupon, you will receive an error event with a GateError when calling form.init
Direct coupon flow
If you have already initialized the payment form and wish to apply a discount to it, you can do so by calling the applyCoupon method with the specified couponCode string.
1
2
3
4
form.applyCoupon("exampleCoupon").then((result: ApplyCouponPrices)=>{/* success handlers here */}).catch((error: ApplyCouponError)=>{/* error handlers here */})
If the coupon is valid and was successfully applied, applyCoupon will resolve with ApplyCouponPrices object with schema:
If the trial price is present, the user will be charged at this rate. The discountPrice may be applied in future payments as per the rules set up in the HUB. You can use data from ApplyCouponPrices to provide users with insights into the original product price and the discounted price.
In the event that the coupon application is unsuccessful due to reasons such as an expired coupon code or other issues, the applyCoupon method will reject with an ApplyCouponError, which contains details of the error with a specific code and message within the GateError interface.
ApplyCouponError.details will contain original GateError with a specific code and message
The Solidgate payment form has two options for submitting a payment, submit
via:
a click on the payment button
the form.submit method
We leave the option to display your payment button below the payment form. Use this feature to collect additional data from the user.
To hide the payment form submit button, you need to set the allowSubmit display property in formParams to false during initialization. This will not only hide the button but also prevent the form from being submitted via enter key press in form fields.
<template><Payment:merchant-data="merchantData":form-params="formParams"width="100%"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}constformParams:InitConfig['formParams']={allowSubmit:false}</script>
To submit the payment form without using a Solidgate button, you need to call the form’s submit method.
<template><Payment:merchant-data="merchantData"@mounted="onMounted"@ready-payment-instance="onReadyPaymentInstance"/><buttonv-if="mounted"
@click="submit">Submit</button></template><scriptlang="ts"setup>import{defineAsyncComponent,ref}from'vue'import{InitConfig,ClientSdkInstance}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}letmounted=ref(false)letformResolve:(form:ClientSdkInstance)=>{}=()=>{}constformPromise=newPromise<ClientSdkInstance>(resolve=>{formResolve=resolve})functiononReadyPaymentInstance(form:ClientSdkInstance):void{formResolve(form)}functiononMounted():void{mounted.value=true}functionsubmit():void{formPromise.then(form=>form.submit())}</script>
Actual submit will not happen if some of the following conditions are met:
additional fields are requested to be displayed: user will see validation error on appeared field
some fields on the form have yet to be validated: user will see validation errors on form
validation errors are present in the form fields
Otherwise, the form will be submitted.
Additional fields
Solidgate payment form will check the
Card BIN
and receive a list of necessary additional fields according to information about the
BIN
country (the first 6 digits).
Also, depending on the provider, the customer phone parameter is often used to verify the identity of the person making a payment; for example, in India, this is
indian_customer_phone
. This parameter typically requires the person to enter their registered mobile phone number, which is then used to authenticate the payment.
Additional fields
Expand all
Country Argentina
Country Code (ISO 3166-1) ARG
Field Title DNI
Country Bangladesh
Country Code (ISO 3166-1) BGD
Field Title National identity card
Country Bolivia
Country Code (ISO 3166-1) BOL
Field Title Cedula de Identidad
Country Brazil
Country Code (ISO 3166-1) BRA
Field Title CPF
Country Cameroon
Country Code (ISO 3166-1) CMR
Field Title CNI
Country Chile
Country Code (ISO 3166-1) CHL
Field Title Rol Único Tributario
Country China
Country Code (ISO 3166-1) CHN
Field Title Citizen ID Number
Country Colombia
Country Code (ISO 3166-1) COL
Field Title Cedula de Ciudadania
Country Costa Rica
Country Code (ISO 3166-1) CRI
Field Title Cédula de Identidad
Country Dominican Republic
Country Code (ISO 3166-1) DOM
Field Title Identity card
Country Ecuador
Country Code (ISO 3166-1) ECU
Field Title Cédula de Identidad
Country El Salvador
Country Code (ISO 3166-1) SLV
Field Title Personal Identification Card
Country Egypt
Country Code (ISO 3166-1) EGY
Field Title Identity card
Country Ghana
Country Code (ISO 3166-1) GHA
Field Title Ghana Card
Country Guatemala
Country Code (ISO 3166-1) GTM
Field Title CUI
Country India
Country Code (ISO 3166-1) IND
Field Title PAN
Country India
Country Code (ISO 3166-1) IND
Field Title Customer Phone
Country Indonesia
Country Code (ISO 3166-1) IDN
Field Title NIK
Country Japan
Country Code (ISO 3166-1) JPN
Field Title My Number
Country Kenya
Country Code (ISO 3166-1) KEN
Field Title National ID Card
Country Malaysia
Country Code (ISO 3166-1) MYS
Field Title NRIC
Country Mexico
Country Code (ISO 3166-1) MEX
Field Title CURP
Country Morocco
Country Code (ISO 3166-1) MAR
Field Title CNIE
Country Nigeria
Country Code (ISO 3166-1) NGA
Field Title NIN
Country Panama
Country Code (ISO 3166-1) PAN
Field Title Cedula de Identidad
Country Paraguay
Country Code (ISO 3166-1) PRY
Field Title Cédula de Identidad
Country Peru
Country Code (ISO 3166-1) PER
Field Title DNI
Country Philippines
Country Code (ISO 3166-1) PHL
Field Title PSN
Country Senegal
Country Code (ISO 3166-1) SEN
Field Title CNI or ECOWAS ID Card
Country South Africa
Country Code (ISO 3166-1) ZAF
Field Title South African Identity Card
Country Tanzania
Country Code (ISO 3166-1) TZA
Field Title National Identity Card
Country Thailand
Country Code (ISO 3166-1) THA
Field Title Thai Identity Card
Country Turkey
Country Code (ISO 3166-1) TUR
Field Title T.C. Kimlik No.
Country Uganda
Country Code (ISO 3166-1) UGA
Field Title National ID number (NIC)
Country Uruguay
Country Code (ISO 3166-1) URY
Field Title Cédula de Identidad
Country Vietnam
Country Code (ISO 3166-1) VNM
Field Title VNID
Country United States
Country Code (ISO 3166-1) USA
Field Title ZIP code
Additional fields classes will be formed as follows:
1
"class":"input_group zip_code additional_field"
You can customize all additional fields at once using the
additional_field
class. In this case, styles will be applied to all additional field classes described in the table above.
Front-end validation and auto-tabulation prevent errors and fraud, verify data correctness, enhance user experience, end increase transaction success.
Validation of form fields occurs when a field loses focus.
Card number
Validate the correctness of data entered (check data entered for validity)
The validity of the card number is verified by the Luhn Algorithm. The Luhn Algorithm calculates the check digits of a plastic card number in accordance with the standard
ISO/IEC 7812
WIKI
Define card brand to display the desired logo
For card payments, one of the most important UX rules is automatic card type detection and automatic card number formatting (spacing). To
implement these functions, you need to know the IIN ranges and spacing patterns for card types.
Determine the country of the card by BIN and add fields dynamically if necessary
To dynamically add fields to the form, we need to define the country of the card brand. Depending on this, we add the required field on the frontend.
Expiry date
The expiration date field accepts dates in both of the following formats: MM/YY, MM/YYYY
The date entered should be in the future
CVV
The CVV field can only accept 3 or 4 digits. Validation of the CVV field depends on the card brand:
for AMERICAN EXPRESS, the CVV field must contain 4 digits
for all other card brands, the CVV field must contain 3 digits
Cardholder
The field with the name of the cardholder is disabled by default. It is possible to enable this field through CSS styles.
Rules for the field
at least 3 characters
convert from Cyrillic to Latin
must not contain symbols and numbers, only letters
auto tabulation is disabled
Supported browsers
The Solidgate payment form requires that the customer's browser supports TLS 1.2. If TLS 1.2 is not supported, the payment form will not be displayed. Additionally, it is important to know:
some of the user’s extensions can break the correct behavior of our payment form
we don’t guarantee payment form stable functioning when rendered inside in-app browsers (Facebook, Instagram browser, etc.)
The Solidgate payment form (JS) strives to support the latest versions of all major browsers. For security reasons and to provide customization options to customers, we do not support browsers that do not receive security updates and are low usage.