[
{
"title":"Testing",
"link":"https://docs.solidgate.com/payments/testing/",
"text":"Simulate payments to test your integration before launching in production.",
"imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-customizable.svg"
}
,
{
"title":"Create your payment form",
"link":"https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/",
"text":"Understand how to integrate the payment form into your product.",
"imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-payments.svg"
}
,
{
"title":"Subscriptions",
"link":"https://docs.solidgate.com/subscriptions/",
"text":"Create and maintain a stable and healthy business subscription model.",
"imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-global.svg"
}
]
The Solidgate Payment Form is designed for seamless user interaction, providing extensive customization and validation features.
This includes dynamic adaptation to card information, multiple language support, and compatibility with secure browser versions.
First payment flow
Initiating a transaction involves using the paymentIntent object within the Payment Form. This process is the first step in the payment flow, setting the groundwork for a seamless transaction.
The system prevents double charging for first payments by ensuring a single payment form processes only one payment regardless of multiple Pay button clicks.
Order status updates
Merchants are notified of any status changes in their orders. Constant order status tracking is facilitated by specifying
Guide
Subscribe for events on your Solidgate account so your integration can automatically trigger actions.
webhooks
, which serve as destinations for these notifications.
Status requests: Merchants can also opt to receive the
current status
Webhook
of an order at their convenience, ensuring flexibility in monitoring transaction progress.
Event listening: This
Guide
Form events are essential checkpoints for monitoring user interactions in payments.
event
allows merchants to actively engage with the Payment Form, enabling real-time communication and response to various form events.
Transaction status communication
The Payment Form allows immediate redirection of customers to designated pages, indicating successful or unsuccessful transactions, through the use of success_url and fail_url.
Handling
unsuccessful
payments: In cases of unsuccessful payments, it’s crucial to inform customers about the status and provide clear explanations for the decline. This transparency aids in maintaining customer trust and enables them to take further necessary actions.
Confirming
successful
transactions: For successful transactions, customers should be promptly informed with a clear message, such as “Payment successful! Thank you for your Payment. You have paid $XXX.XX” It’s important to include details like the payment descriptor, which will appear on the customer’s bank statement, enhancing clarity and trust. This descriptor, along with other transaction details, is communicated through notifications and upon request for order status.
Iframe and HTTP limitations
The Payment Form is optimized for secure environments and is not suitable for embedding within merchant’s iframes or on HTTP web pages.
Specifically,
Guide
Optimize your payment form with Apple Pay integration, providing a secure and efficient checkout for Apple device users.
Apple Pay
transactions are restricted in third-party iframes and cannot be initiated from documents with different security origins or insecure HTTP pages. While
Guide
Enable Google Pay button to give your customers more payment options.
Google Pay
may function in iframes, its performance cannot be guaranteed under these conditions.
Common initialization errors
When integrating the Solidgate
Payment Form
SDK
, be mindful of common errors:
Feature-Policy violation: Arises in third-party iframes without proper permissions.
Apple Pay security origin issue: Occurs when starting Apple Pay sessions from a document with a differing security origin than its top-level frame.
Insecure document error: Triggered by attempting Apple Pay transactions on non-HTTPS web pages.
Additional fields
The 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 six 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
india_pan
. 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 Brazil
Country Code (ISO 3166-1) BRA
Field Title Mobile phone number
Country Cameroon
Country Code (ISO 3166-1) CMR
Field Title CNI
Field title Name on card
Description This field is used to enter the name of the cardholder as it appears on the card. It is required for transactions from specific countries.
Supported countries Argentina ARG, Bangladesh BGD, Bolivia BOL, Brazil BRA, Cameroon CMR, Chile CHL, China CHN, Colombia COL, Costa Rica CRI, Dominican Republic DOM, Ecuador ECU, Egypt EGY, El Salvador SLV, Ghana GHA, Guatemala GTM, India IND, Indonesia IDN, Japan JPN, Kenya KEN, Malaysia MYS, Mexico MEX, Morocco MAR, Nigeria NGA, Panama PAN, Paraguay PRY, Peru PER, Philippines PHL, Senegal SEN, South Africa ZAF, Tanzania TZA, Thailand THA, Turkey TUR, Uganda UGA, Uruguay URY, and Vietnam VNM.
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 ZIP Code
Country India
Country Code (ISO 3166-1) IND
Field Title Mobile phone number
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
Styling additional fields
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
The card_holder field is specifically required for transactions from certain countries.
Supported countries include Argentina ARG, Bangladesh BGD, Bolivia BOL, Brazil BRA, Cameroon CMR, Chile CHL, China CHN, Colombia COL, Costa Rica CRI, Dominican Republic DOM, Ecuador ECU, Egypt EGY, El Salvador SLV, Ghana GHA, Guatemala GTM, India IND, Indonesia IDN, Japan JPN, Kenya KEN, Malaysia MYS, Mexico MEX, Morocco MAR, Nigeria NGA, Panama PAN, Paraguay PRY, Peru PER, Philippines PHL, Senegal SEN, South Africa ZAF, Tanzania TZA, Thailand THA, Turkey TUR, Uganda UGA, Uruguay URY, and Vietnam VNM.
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.
Only the three most recent major versions are supported for all browsers.
Supported translations
The Solidgate Payment Form is translated automatically by detecting the location of the customer’s browser.
Afrikaans
af
Arabic
ar
Bengali
bn
Chinese
zh
Czech
cs
Danish
da
Dutch
nl
English
en
Finnish
fi
French
fr
German
de
Hebrew
he
Hindi
hi
Indonesian
id
Italian
it
Japanese
ja
Korean
ko
Malay
ms
Norwegian
no
Polish
pl
Portuguese
pt
Romanian
ro
Spanish
es
Swedish
sv
Thai
th
Turkish
tr
Ukrainian
uk
Vietnamese
vi
Localization can also be configured by passing a subset of
IETF language tags
WIKI
by passing in into PaymentIntent
Guide
Begin by setting up your backend, a vital step for successful implementation.
object
.
If your preferred language is not listed above, our payment button will be displayed in English en
by default.
If you have any questions or require assistance, please do not hesitate to contact our Solidgate support team.