Help Center

The Solidgate Payment Form allows for the tokenization of sensitive data, manages 3D Secure authentication, and supports multiple payment methods.

Integration steps

This guide simplifies the process of adding the Payment Form to your website. It covers the preparation of the backend, SDK installation, API instance creation, and merchant data setup. Furthermore, it outlines the initialization of the form using various JavaScript frameworks and how to customize its appearance through parameters and styles.

Backend setup

Begin by setting up your backend, a crucial step for successful implementation. Use the Solidgate SDK to integrate the Payment Form seamlessly into your platforms. This SDK offers intuitive features for transactions and payment form customization. To initiate a charge, supply transaction-specific information through paymentIntent object fields.

Description

Order ID, which must be unique, is specified in the merchant system.

Example

123456

Description

Identifier of the predefined product must be passed in UUID v4 format.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

Price ID of the predefined product.

To get product_price_id, use get product prices.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

ID of the coupon, which corresponds to the specific product discount, must be passed in UUID v4 format.

The coupon flow is only activated when a product_id is supplied of the subscription workflow.

Example

eb4c6e93-4c53-447a-b215-5d5786af9844

Description

Customer ID in the merchant’s system.

Example

4dad42f878

Description

Order amount - integer without a fractional component like cents. For instance, 1020 means 10 USD and 20 cents.

However, amount can be 0, for zero-amount authorization flow.

Example

1020

Description

Currency amount is represented in a three-letter currency code as per the ISO-4217 Wiki standard.

Example

USD

Description

Defines the usage of stored payment credentials.

Description

Type of the token usage scenario.

• one-time no token created, for one-off use

Description

Order description in your system and for bank processing.

Example

Premium package

Description

Order items in UTF-8 code.

Example

item1, item2

Description

Date of order creation following the ^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$ pattern.

Example

2025-12-21 11:21:30

Description

Number of payments by the customer.

Example

1

Description

Initiates a two-step payment flow.

Example

auth

Description

Delay before transaction settlement in hours:

• Visa customer-initiated payments: 240 hours = 10 days
• Visa merchant-initiated payments: 120 hours = 5 days
• All other card brands: 144 hours = 6 days

PSP limits:

• Stripe: 113 hours
• Bamboo: 96 hours
• Ebanx: 95 hours
• Razorpay: 72 hours
• Braintree: 72 hours
• JPMorgan: 72 hours

Example

48

Description

Authorization type that defines the transaction flow and capabilities.

• final - standard authorization, no increments allowed
Default value.
• estimated - initial authorization with possible amount changes

Unavailable if estimated is provided

• Auto-settle flow type auth with settle_interval
• Zero-amount authorization type auth with amount 0
• One-time product and subscription payment flow

Example

final

Description

Number of payment retries.

Example

1

Description

Routing payments flag for 3DS flow.

Example

true

Description

Merchant ID parameter you receive on Google’s side.

Example

10911390523550288022

Description

Merchant name, which can be displayed to the customers when paying via Google.

Example

Solidgate

Description

Merchant name, which can be displayed to the customers when paying via Apple.

Example

Test

Description

Customer birthdate following the date format that matches the ^\d{4}-\d{2}-\d{2} pattern.

Example

2000-11-21

Description

Customer email.

If not provided, it is collected on the payment form.

Example

test@solidgate.com

Description

Customer’s first name.

Example

John

Description

Customer’s last name.

Example

Snow

Description

Customer’s phone number.

Should be provided in international format E.164 Wiki , starting with the plus + sign.

Recommended format ^\+[1-9]\d{1,14}$

Example

+14155552671

Description

Public IP address of the customer. Both IPv4 and IPv6 are supported.

Example

8.8.8.8

Description

Identifies the marketing or acquisition channel that brought the customer to the transaction.

Example

facebook

Description

Identifies the internal system or flow that triggered the transaction.

Example

main_menu

Description

Country where the goods are purchased or where the seller is based is identified using the ISO-3166 Wiki alpha-3 country code.

Example

CHN

Description

Customer country subject to ISO-3166 Wiki alpha-3.

Example

GBR

Description

Customer city.

Example

New Castle

Description

Billing address details.

Description

First and second line of the billing address.

Example

221B Baker Street

Description

ISO-3166 Wiki country code of the billing address.

Example

USA

Description

ISO 3166-2 Wiki address state code of the billing address.

Example

NY

Description

City name associated with the billing address.

Example

Brooklyn

Description

Address zip/postal code.

Example

11201

Description

Customer language settings for the translation of Payment Form fields and the language of email receipts sent for successful payments.

Example

en

Description

Website from which the transaction took place.

Example

https://google.com

Description

Device of the customer.

Example

iPhone 8 iOS 12.0

Description

Device sessions containing the unique session ID of the device and the associated third-party provider.

Description

Unique session identifier generated by the application.

Parameter for tracking customer sessions in payments and for risk analytics. Ensure that you handle this field in compliance with regional data privacy regulations (for example, GDPR Reference in the EU).

Example

dsid_3a20_f9c1_4cd8_89d3_1c5

Description

Specifies the third-party provider associated with the device session.

Identifies the integration type for the merchant, allowing multiple such integrations if needed.

Example

checkout

Description

Customer platform at the moment of payment.

• WEB - desktop
• MOB - mobile version
• APP - application

Example

WEB

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

Description

Additional customer data to process payments in specific locations.

Description

CPF (Cadastro de Pessoas Físicas) Brazilian individual taxpayer registry identification.

Example

12345678901

Description

Metadata is useful for storing additional, structured information about an object, consisting of up to 10 key-value pairs with a validation limit of 380 characters per field.

The callback notification returns an order_metadata from the order in each state.

Example

“coupon_code”: “NY2025", “partner_id”: “123989"

Description

Provide this URL if you want to redirect a customer to your own Success Screen.

Example

https://merchant.example/success

Description

Provide this URL if you want to redirect a customer to your own Fail Screen.

Example

https://merchant.example/fail

Description

A customer was detected on the merchant end to be a suspicious one.

Example

true

{
  "order_id": "123456",
  "amount": 1020,
  "currency": "USD",
  "future_usage": {
    "payment_type": "one-time"
  },
  "order_description": "Premium package",
  "order_items": "item1, item2",
  "order_date": "2025-12-21 11:21:30",
  "order_number": 1,
  "type": "auth",
  "settle_interval": 48,
  "authorization_type": "final",
  "retry_attempt": 1,
  "force3ds": true,
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "apple_pay_merchant_name": "Solidgate",
  "customer_date_of_birth": "2000-11-21",
  "customer_email": "test@solidgate.com",
  "customer_first_name": "John",
  "customer_last_name": "Snow",
  "customer_phone": "+14155552671",
  "ip_address": "8.8.8.8",
  "traffic_source": "facebook",
  "transaction_source": "main_menu",
  "purchase_country": "CHN",
  "geo_country": "GBR",
  "geo_city": "New Castle",
  "billing_address": {
    "address": "Street 3D, Apartment 343",
    "country": "United States",
    "state": "Delaware",
    "city": "New Castle",
    "zip_code": "03127"
  },
  "language": "en",
  "website": "https://google.com",
  "device": "iPhone 8 iOS 12.0",
  "device_sessions": [
    {
      "id": "dsid_3a20_f9c1_4cd8_89d3_1c5",
      "provider": "checkout"
    },
    {
      "id": "a0d24c8a-2b67-4b4b-bd39-d2efbe92a7f0",
      "provider": "adyen"
    }
  ],
  "platform": "WEB",
  "user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (HTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36",
  "payment_type_data": {
    "brazil_cpf": "12345678901"
  },
  "order_metadata": {
    "coupon_code": "NY2025",
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

{
  "order_id": "123456",
  "product_price_id": "faf3b86a-1fe6-4ae5-84d4-ab0651d75db2",
  "coupon_id": "eb4c6e93-4c53-447a-b215-5d5786af9844",
  "customer_account_id": "4dad42f808",
  "currency": "USD",
  "order_description": "Premium package",
  "order_items": "item1, item2",
  "order_date": "2025-12-21 11:21:30",
  "order_number": 1,
  "type": "auth",
  "settle_interval": 48,
  "authorization_type": "final",
  "retry_attempt": 1,
  "force3ds": true,
  "google_pay_merchant_id": "10911390523550288022",
  "google_pay_merchant_name": "Solidgate",
  "apple_pay_merchant_name": "Solidgate",
  "customer_date_of_birth": "2000-11-21",
  "customer_email": "test@solidgate.com",
  "customer_first_name": "John",
  "customer_last_name": "Snow",
  "customer_phone": "+14155552671",
  "ip_address": "8.8.8.8",
  "traffic_source": "facebook",
  "transaction_source": "main_menu",
  "purchase_country": "CHN",
  "geo_country": "GBR",
  "geo_city": "New Castle",
  "billing_address": {
    "address": "Street 3D, Apartment 343",
    "country": "United States",
    "state": "Delaware",
    "city": "New Castle",
    "zip_code": "03127"
  },
  "language": "en",
  "website": "https://google.com",
  "device": "iPhone 8 iOS 12.0",
  "device_sessions": [
    {
      "id": "dsid_3a20_f9c1_4cd8_89d3_1c5",
      "provider": "checkout"
    },
    {
      "id": "a0d24c8a-2b67-4b4b-bd39-d2efbe92a7f0",
      "provider": "adyen"
    }
  ],
  "platform": "WEB",
  "user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (HTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36",
  "order_metadata": {
    "coupon_code": "NY2025",
    "partner_id": "123989"
  },
  "success_url": "https://merchant.example/success",
  "fail_url": "https://merchant.example/fail"
}

With SDK

Step 1. Install SDK

Install the Solidgate SDK in your environment:

composer require solidgate/php-sdk

npm install @solidgate/node-sdk

go get github.com/solidgate-tech/go-sdk

pip3 install solidgate-card-sdk

Step 2. Create SDK instance

To interact with the Solidgate API, create an API instance by calling the API constructor function, passing your Public public_key and Secret secret_key keys as arguments.

<?php

use SolidGate\API\Api;

$api = new Api('public_key', 'secret_key');

const solidGate = require('@solidgate/node-sdk');

let api = new solidGate.Api("public_key", "private_key");

solidgateSdk := solidgate.NewSolidGateApi("public_key", "secret_key")

val api = Api(HttpClient(), Credentials("public_key", "secret_key"))

from solidgate import ApiClient

client = ApiClient("public_key", "secret_key")

Step 3. Form intent data

To create a charge, you must provide transaction-related information. This information is contained in a FormInitDTO object, which is created by invoking the formMerchantData function on your API instance. In the example code, this function is called with the paymentIntent object fields.

<?php

use SolidGate\API\Api;

$api = new Api('public_key', 'secret_key');

$response = $api->formMerchantData(['JSON payment intent // fill as described in documentation']);

const solidGate = require('@solidgate/node-sdk');

let api = new solidGate.Api("public_key", "private_key");

let paymentIntentData = {
    /// fill it as described in documentation
}
let merchantData = api.formMerchantData(paymentIntentData);

const dataToFront = merchantData.toObject()

package main

import (
    "encoding/json"
    "fmt"

    solidgate "github.com/solidgate-tech/go-sdk"
)

func main() {
    solidgateSdk := NewSolidGateApi("public_key", "secret_key")
    paymentIntent = PaymentIntent{} // fill as described in documentation
    paymentIntentBytes, err := json.Marshal(paymentIntent)

    if err != nil {
        fmt.Print(err)
    }

    formInitDto, err := solidgateSdk.FormMerchantData(paymentIntentBytes)

    if err != nil {
        fmt.Print(err)
    }

    // ...  
}

val api = Api(HttpClient(), Credentials("public_key", "secret_key"))

val attributes = Attributes(mapOf(
    "amount" to 123,
    "currency" to "USD",
    "customer_email" to "test@example.com",
    "ip_address" to "8.8.8.8",
    "order_description" to "Test subscription",
    "order_id" to "order12345",
    "platform" to "WEB"
))

val response = api.formMerchantData(attributes)

from solidgate import ApiClient

client = ApiClient("public_key", "secret_key")

responseDTO = client.form_merchant_data({
    payment_intent_dict  // fill as described in documentation
})

Step 4. Pass generated data to frontend

After you have set up the FormInitDTO and turned it into a simple object, you can effortlessly integrate it into your frontend code by transmitting the paymentIntent encrypted String (during form initialization).

Without SDK

An alternative option for integrating the payment form exists without using the Solidgate SDK.

1. Prepare server-side code in your preferred programming language and libraries to communicate with the Solidgate API.
2. Create and encrypt a JSON object with the required fields for a payment transaction.
3. Once the paymentIntent is encrypted, pass it to the frontend for further processing, such as form initialization.
4. Integrate the signature parameter process with the encryption steps for initializing the form, the flow for paymentIntent encrypted String
   • The customer starts the transaction by providing the necessary payment data.
   • A secure random IV is created with the required size for encryption.
   • The system extracts the required size from the secret key and formats it for encryption.
   • A cipher object is set up with the selected encryption algorithm, mode, and padding, and initialized with the key and IV for encryption.
   • The input data is converted into bytes and encrypted using the initialized cipher.
   • The IV and encrypted data become combined into a single byte array for secure transmission, ensuring compatibility and security, such as using the pycryptodome Reference library in Python 3 environments.
   • The combined IV and encrypted data become encoded into a Base64 string for safe transmission over the network.

<?php

class PaymentIntentGenerator
{
    private string $secretKey;

    public function __construct(string $secretKey)
    {
        $this->secretKey = $secretKey;
    }

    private function generateEncryptedFormData(array $attributes): string
    {
        $attributes = json_encode($attributes);
        $secretKey = substr($this->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);

        return $this->base64UrlEncode($iv . $encrypt);
    }

    private function base64UrlEncode($data): string
    {
        return str_replace(['+', '/'], ['-', '_'], base64_encode($data));
    }

    public function testGenerateEncryptedFormData(): void
    {
        $attributes = [
            "order_id"          => "order_id",
            "amount"            => 1100,
            "currency"          => "USD",
            "order_description" => "description",
            "customer_email"    => "test@yourdomain.com",
            "ip_address"        => "8.8.8.8",
            "platform"          => "WEB",
        ];

        $encryptedFormData = $this->generateEncryptedFormData($attributes);
        echo "Encrypted Form Data: " . $encryptedFormData . PHP_EOL;
    }
}

$yourClassInstance = new PaymentIntentGenerator("api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx");
$yourClassInstance->testGenerateEncryptedFormData();

const crypto = require('crypto');

class PaymentIntentGenerator {
    constructor() {
        this.secretKey = "api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx";
    }

    generateIntent() {
        const intent = '{"order_id":"order_id","amount":1100,"currency":"USD","order_description":"description","customer_email":"test@solidgate.com","ip_address":"8.8.8.8","platform":"WEB"}';
        const paymentIntent = this.encryptPaymentIntent(intent, this.secretKey);

        console.log("Generated Payment Intent:");
        console.log(paymentIntent);
    }

    encryptPaymentIntent(value, secretKey) {
        const iv = crypto.randomBytes(16);
        const aesKey = Buffer.from(secretKey.substring(0, 32), 'utf-8');
        const cipher = crypto.createCipheriv("aes-256-cbc", aesKey, iv);

        let encryptedBytes = cipher.update(value, 'utf-8', 'base64');
        encryptedBytes += cipher.final('base64');

        const encryptedWithIV = Buffer.concat([iv, Buffer.from(encryptedBytes, 'base64')]);

        const base64Encoded = encryptedWithIV.toString('base64')
            .replace(/\+/g, '-')
            .replace(/\//g, '_');

        return base64Encoded;
    }
}

const generator = new PaymentIntentGenerator();
generator.generateIntent();

import java.nio.charset.StandardCharsets;
import java.security.SecureRandom;
import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.util.Base64;

public class PaymentIntentGenerator {
  private final String secretKey = "api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx";

  public void generateIntent() throws Exception {
    String intent = "{\"order_id\":\"order_id\",\"amount\":1100,\"currency\":\"USD\",\"order_description\":\"description\",\"customer_email\":\"test@solidgate.com\",\"ip_address\":\"8.8.8.8\",\"platform\":\"WEB\"}";
    String paymentIntent = encryptPaymentIntent(intent, secretKey);

    System.out.println("Generated Payment Intent:");
    System.out.println(paymentIntent);
  }

  public String encryptPaymentIntent(String value, String secretKey) throws Exception {
    byte[] iv = new byte[16];
    new SecureRandom().nextBytes(iv);

    SecretKeySpec aesKey = new SecretKeySpec(secretKey.substring(0, 32).getBytes(StandardCharsets.UTF_8), "AES");
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.ENCRYPT_MODE, aesKey, new IvParameterSpec(iv));

    byte[] encryptedBytes = cipher.doFinal(value.getBytes(StandardCharsets.UTF_8));
    byte[] encryptedWithIV = new byte[iv.length + encryptedBytes.length];
    System.arraycopy(iv, 0, encryptedWithIV, 0, iv.length);
    System.arraycopy(encryptedBytes, 0, encryptedWithIV, iv.length, encryptedBytes.length);

    return Base64.getEncoder().encodeToString(encryptedWithIV)
        .replace("+", "-")
        .replace("/", "_");
  }

  public static void main(String[] args) throws Exception {
    PaymentIntentGenerator generator = new PaymentIntentGenerator();
    generator.generateIntent();
  }
}

using System;
using System.Security.Cryptography;
using System.Text;

class PaymentIntentGenerator
{
    private string secretKey = "api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx";

    public void GenerateIntent()
    {
        string intent = "{\"order_id\":\"order_id\",\"amount\":1100,\"currency\":\"USD\",\"order_description\":\"description\",\"customer_email\":\"test@solidgate.com\",\"ip_address\":\"8.8.8.8\",\"platform\":\"WEB\"}";
        string paymentIntent = EncryptPaymentIntent(intent, secretKey);

        Console.WriteLine("Generated Payment Intent:");
        Console.WriteLine(paymentIntent);
    }

    public static string EncryptPaymentIntent(string value, string secretKey)
    {
        byte[] iv = new byte[16];
        new Random().NextBytes(iv);

        using (RijndaelManaged aesAlg = new RijndaelManaged())
        {
            aesAlg.Key = Encoding.UTF8.GetBytes(secretKey.Substring(0, 32));
            aesAlg.Mode = CipherMode.CBC;
            aesAlg.Padding = PaddingMode.PKCS7;

            using (ICryptoTransform encryptor = aesAlg.CreateEncryptor(aesAlg.Key, iv))
            {
                byte[] valueBytes = Encoding.UTF8.GetBytes(value);
                byte[] encryptedBytes = encryptor.TransformFinalBlock(valueBytes, 0, valueBytes.Length);
                 
                byte[] encryptedWithIV = new byte[iv.Length + encryptedBytes.Length];
                Array.Copy(iv, 0, encryptedWithIV, 0, iv.Length);
                Array.Copy(encryptedBytes, 0, encryptedWithIV, iv.Length, encryptedBytes.Length);
                string base64Encoded = Convert.ToBase64String(encryptedWithIV).Replace("+", "-").Replace("/", "_");
                return base64Encoded;
            }
        }
    }

    static void Main()
    {
        PaymentIntentGenerator generator = new PaymentIntentGenerator();
        generator.GenerateIntent();
    }
}

package main

import (
    "bytes"
    "crypto/aes"
    "crypto/cipher"
    "crypto/rand"
    "encoding/base64"
    "encoding/json"
    "fmt"
    "io"
)

type PaymentIntentGenerator struct {
    key []byte
}

func NewPaymentIntentGenerator(secretKey string) *PaymentIntentGenerator {
    return &PaymentIntentGenerator{
        key: []byte(secretKey)[:32],
    }
}

func (p *PaymentIntentGenerator) GenerateIntent() (string, error) {
    intent := map[string]interface{}{
        "order_id":          "order_id",
        "amount":            1100,
        "currency":          "USD",
        "order_description": "description",
        "customer_email":    "test@solidgate.com",
        "ip_address":        "8.8.8.8",
        "platform":          "WEB",
    }

    intentBytes, err := json.Marshal(intent)
    if err != nil {
        return "", fmt.Errorf("marshal: %w", err)
    }

    paymentIntent, err := p.encrypt(intentBytes)
    if err != nil {
        return "", fmt.Errorf("encrypt: %w", err)
    }

    return base64.URLEncoding.EncodeToString(paymentIntent), nil
}

func (p *PaymentIntentGenerator) encrypt(raw []byte) ([]byte, error) {
    data := p.pad(raw)

    block, err := aes.NewCipher(p.key)

    if err != nil {
        return []byte(nil), fmt.Errorf("new cipher: %w", err)
    }

    cipherText := make([]byte, aes.BlockSize+len(data))
    iv := cipherText[:aes.BlockSize]
    if _, err := io.ReadFull(rand.Reader, iv); err != nil {
        return nil, fmt.Errorf("io read: %w", err)
    }

    mode := cipher.NewCBCEncrypter(block, iv)
    mode.CryptBlocks(cipherText[aes.BlockSize:], data)

    return cipherText, nil
}

func (p *PaymentIntentGenerator) pad(data []byte) []byte {
    n := aes.BlockSize - (len(data) % aes.BlockSize)
    pb := make([]byte, len(data)+n)

    copy(pb, data)
    copy(pb[len(data):], bytes.Repeat([]byte{byte(n)}, n))

    return pb
}

func main() {
    generator := NewPaymentIntentGenerator("api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx")
    intent, err := generator.GenerateIntent()
    if err != nil {
        fmt.Println(err)
    } else {
        fmt.Printf("Generated Payment Intent: %s", intent)
    }
}

import java.security.SecureRandom
import javax.crypto.Cipher
import javax.crypto.spec.IvParameterSpec
import javax.crypto.spec.SecretKeySpec
import java.util.Base64

class PaymentIntentGenerator {
    private val secretKey = "api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx"

    fun generateIntent() {
        val intent = "{\"order_id\":\"order_id\",\"amount\":1100,\"currency\":\"USD\",\"order_description\":\"description\",\"customer_email\":\"test@solidgate.com\",\"ip_address\":\"8.8.8.8\",\"platform\":\"WEB\"}"
        val paymentIntent = encryptPaymentIntent(intent, secretKey)

        println("Generated Payment Intent:")
        println(paymentIntent)
    }

    fun encryptPaymentIntent(value: String, secretKey: String): String {
        val iv = ByteArray(16)
        SecureRandom().nextBytes(iv)

        val aesKey = SecretKeySpec(secretKey.substring(0, 32).toByteArray(charset("UTF-8")), "AES")
        val cipher = Cipher.getInstance("AES/CBC/PKCS5Padding")
        cipher.init(Cipher.ENCRYPT_MODE, aesKey, IvParameterSpec(iv))

        val encryptedBytes = cipher.doFinal(value.toByteArray(charset("UTF-8")))
        val encryptedWithIV = ByteArray(iv.size + encryptedBytes.size)
        System.arraycopy(iv, 0, encryptedWithIV, 0, iv.size)
        System.arraycopy(encryptedBytes, 0, encryptedWithIV, iv.size, encryptedBytes.size)

        val base64Encoded = Base64.getEncoder().encodeToString(encryptedWithIV)
            .replace("+", "-")
            .replace("/", "_")

        return base64Encoded
    }
}

fun main() {
    val generator = PaymentIntentGenerator()
    generator.generateIntent()
}

from Crypto.Cipher import AES
from Crypto.Util.Padding import pad
from Crypto.Random import get_random_bytes
import base64
import json


class PaymentIntentGenerator:
    def __init__(self):
        self.__key = b'api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx'[:32]
        self.__block_size = 16

    def generate_intent(self):
        intent = {
            "order_id": "order_id",
            "amount": 1100,
            "currency": "USD",
            "order_description": "description",
            "customer_email": "test@solidgate.com",
            "ip_address": "8.8.8.8",
            "platform": "WEB"
        }
        intent_str = json.dumps(intent)
        payment_intent = self.encrypt(intent_str)

        print("Generated Payment Intent:")
        print(payment_intent)

    def encrypt(self, raw):
        raw = pad(raw.encode(), self.__block_size, style='pkcs7')
        iv = get_random_bytes(self.__block_size)
        cipher = AES.new(self.__key, AES.MODE_CBC, iv)
        return base64.urlsafe_b64encode(iv + cipher.encrypt(raw)).decode('utf-8')


if __name__ == "__main__":
    generator = PaymentIntentGenerator()
    generator.generate_intent()

require 'openssl'
require 'base64'
require 'json'

class PaymentIntentGenerator
  IV_LENGTH = 16
  KEY_LENGTH = 32

  def initialize
    @secret_key = 'api_sk_xxxxaxxxxbdf47a2aea17eb3xxxxxxxx'[0, KEY_LENGTH]
  end

  def generate_intent
    intent = {
      order_id: 'order_id',
      amount: 1100,
      currency: 'USD',
      order_description: 'description',
      customer_email: 'test@solidgate.com',
      ip_address: '8.8.8.8',
      platform: 'WEB'
    }

    intent_str = intent.to_json
    payment_intent = encrypt_payload(intent_str)

    puts 'Generated Payment Intent:'
    puts payment_intent
  end

  private

  def encrypt_payload(attributes)
    key = @secret_key
    iv = OpenSSL::Random.random_bytes(IV_LENGTH)
    cipher = OpenSSL::Cipher.new('aes-256-cbc')
    cipher.encrypt
    cipher.key = key
    cipher.iv = iv
    encrypted = cipher.update(attributes) + cipher.final

    base64_encoded = Base64.urlsafe_encode64(iv + encrypted)
    base64_encoded.gsub('+', '-').gsub('/', '_')
  end
end

generator = PaymentIntentGenerator.new
generator.generate_intent

Frontend SDK setup

The Solidgate SDK provides a pre-built interface component for payments. It assists in tokenizing customer data, ensuring that card information never interacts with the merchant’s website.

When starting with the Payment Form, you can use Solidgate official payment form SDK wrapper for different JavaScript frameworks:

• React SDK
• Vue.js SDK
• Angular SDK

These integrations automatically load solid-form.js and offer a convenient interface for form operation. 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. Use the Solidgate CDN-hosted form for easy integration, ensuring the latest version and preventing potential issues from script modification.

<script src="https://cdn.solidgate.com/js/solid-form.js"></script>

Next, create a container for the payment form on your page and assign it a custom ID, as demonstrated below. Avoid setting height or display properties for elements inside the container, including the container itself, to prevent form appearance issues due to CSS conflicts.

The following example specifies a container with the default id of Solidgate SDK.

<div id="solid-payment-form-container"></div>

Alternatively, use your own container, passing its id to iframeParams as shown in the example below.

const data = {
  iframeParams: {
    containerId: 'your-custom-container-id'
  }
}   

Form initialization

After completing all the steps and modifying the required parameters, initiate the Solidgate SDK

import React, { FC } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
    return (<Payment 
         merchantData={props.merchantData}
         styles={props.styles}
         formParams={props.formParams}
         width={props.width}
    />)
}

const form = PaymentFormSdk.init(data);

<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'] = {}
</script>

/// in app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SolidPaymentModule } from '@solidgate/angular-sdk';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SolidPaymentModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/// in app.component.ts
import {Component} from '@angular/core';

import {FormType, 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'] = {
    formTypeClass: FormType.Default
  }
}

Object data (or InitConfig interface in case of frameworks usage) should contain the:

Description

Main object required to init the form.

Contains all the information for creating payment on the 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

Encrypted aes-cbc-256 string of JSON request data with random IV (16 bytes) and secret key is the first 32 bytes of the merchant secret key.

Example

E5FKjxw5vRjjIZ….vmG2YFjg5xcvuedQ==

Description

Control non-mandatory parameters of the form (like Cardholder name and templates).

Description

Type of payment button: with continue text or default one with pay text.

Example

continue

Default

pay

Description

Override the default text of the submit button.

Example

Pay Now

Default

Description

Defines should cardholder field be always visible.

Otherwise, it could be shown simultaneously during additional fields request.

Default

false

Example

true

Description

Mask cvv number as *** during input.

Default

false

Example

true

Description

Text on the header of the payment form.

Default

Example

Enter your payment data

Description

Text on the title of the payment form.

Default

Example

Card info

Description

Template of Payment Form.

• default
• card
• inline
• flat

Default

default

Example

card

Description

Visibility of the Powered by Solidgate logo.

Default

false

Example

true

Description

An array with a list of card brands that could be displayed on the payment form.

• american-express
• aura
• bajaj
• bancontact
• bc-card
• cartes-bancaires
• dankort
• diners-club
• discover
• elo
• gpn-card
• hipercard
• interac
• jcb
• maestro
• mada
• mastercard
• paypal
• rupay
• thai-payment-network
• troy
• unionpay
• verve
• visa

Default

[]

Example

['american-express','diners-club','discover','maestro', 'mastercard', 'paypal','visa']

Description

An array with a list of card brands that could be displayed on the payment form.

Default

[]

Example

['visa-secure', 'mcc-id-check', 'ssl', 'pci-dss', 'norton', 'mc-affee']

Description

Link to Google Font.

Please, avoid using large font sets to keep form loading fast.

Default

Example

//fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap

Description

Card form visibility.

Set false to show only Google/Apple Pay buttons and status page.

Default

true

Example

false

Description

Controls whether customers can submit the card form by pressing Enter or clicking the Submit button.

Usefully for implementing custom submit flow.

Default

true

Example

false

Description

Setting to disable form autofocus.

Default

true

Example

false

Description

Manage the styles of your payment form.

This class targets all input fields within the form, enabling you to apply consistent styling.

To view changes, directly modify the input_group class in your CSS. Activation occurs automatically as the form renders.

Defines the style for the payment form’s header.

Adjustments to the header class become visible upon a form load and are particularly useful for aligning with your brand identity.

Responsible for the overall container of the form, allowing for adjustments in font, color, or spacing.

The form_body becomes visible when the form is initialized and can be tailored to fit seamlessly within your site’s design.

Customize the subtitle of your payment form, enhancing readability and focus.

Changes are immediately visible, providing a quick way to align form instructions with customer expectations.

Controls the styling of the form’s submit button.

To hide the button, set the display property to none in your styles. This class becomes crucial when you prefer a custom button or need to follow the specific design systems.

Wraps fields like CVV and Expiry Date in the default form template, enabling a two-column layout for a compact and organized look.

Alterations to this class are seen as soon as the form is rendered.

Edit the card template, such as changing the background color with a property like card_view: { 'background': '#3D4251'}.

This class is particularly impactful for branding purposes and customer engagement.

Modifies the display of card brand logos, ensuring they fit well within your form’s design.

The size and position can be adjusted to meet visual design standards.

Controls the appearance of the expiry date field.

Customizing this field can ensure consistency with other form elements and can trigger when the field is in focus or an error state.

Description

Defines the style for the cardholder’s name field, which is a crucial element for transactions.

A string parameter ranging from 2 to 50 characters. The pattern ^\w.{0,48}\w$ is used to validate the format.

Customize the error messages associated with the card and flat templates, ensuring that any validation errors are communicated effectively and clearly.

Description

Customize the Google Pay button.

Description

Displays the Google Pay button.

Default

false

Example

true

Description

Identifier of container to place the Google Pay button.

Default

Example

yourCustomContainerId

Description

Color of the Google Pay button.

Supported colors:

• default A Google-selected default value. Currently, it is black, but it may change over time.
• black A black button suitable for use on white or light backgrounds.
• white A white button suitable for use on colorful backgrounds.

Default

black

Example

white

Description

Type of the Google Pay button.

Supported types:

• buy
• checkout
• order
• pay
• plain
• subscribe

Not supported types:

• donate
• book

Default

Example

plain

Description

Authentication method of the card transaction.

• PAN_ONLY: This authentication method is associated with payment cards stored on file with the customer’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 3D Secure (3DS) cryptogram generated on the device.

The capability to transmit only PAN_ONLY or CRYPTOGRAM_3DS is also available, and such transmission works for both one-time payments and subscriptions.

Default

['PAN_ONLY', 'CRYPTOGRAM_3DS']

Example

['PAN_ONLY']

Description

Customize the Apple Pay button.

Description

Displays the Apple Pay button.

Default

true

Example

false

Description

Defines the type of Apple Pay button integration.

In Safari browsers, both css and js integration types are supported. In non-Safari browsers, Apple Pay can only be displayed when using the js integration type, which enables QR code scanning with iOS 18 or later.

Default

css

Example

js

Description

Identifier of container to place the Apple Pay button.

Default

Example

yourCustomContainerId

Description

Color of the Apple Pay button.

Supported colors:

• white-outline
• black
• white

Default

black

Example

white-outline

Description

Type of the Apple Pay button.

Supported types:

• check-out
• add-money
• buy
• order
• plain
• reload
• set-up
• subscribe
• top-up
• continue
• pay

Not supported types:

• donate
• support
• rent
• contribute
• tip

Default

plain

Example

check-out

Description

Customizes the Bizum button.

Description

Displays the Bizum button.

If you do not pass this field with true, the Bizum button is hidden.

Default

true

Example

false

Description

Identifier of the container where the Bizum button is placed.

Default

Button is displayed above the form.

Example

bizum-button-container

Description

Customizes the MB WAY button.

Description

Displays the MB WAY button.

If you do not pass this field with true, the MB WAY button is hidden.

Default

false

Example

true

Description

Identifier of the container where the MB WAY button is placed.

Default

Button is displayed above the form.

Example

mbway-button-container

Description

Customizes the Blik button.

Description

Displays the Blik button.

If you do not pass this field with true, the Blik button is hidden.

Default

false

Example

true

Description

Identifier of the container where the Blik button is placed.

Default

Button is displayed above the form.

Example

blik-button-container

Description

Theme of the Blik button.

• light
• dark

Default

dark

Example

light

Description

Customizes the Cash App Pay button.

Description

Displays the Cash App Pay button.

If you do not pass this field with true, the Cash App Pay button is hidden.

Default

true

Example

false

Description

Identifier of the container where the Cash App Pay button is placed.

Default

Button is displayed above the form.

Example

cashapp-button-container

Description

Customizes the PayPal button.

Description

Displays the PayPal button.

If you do not pass this field with true, the PayPal button is hidden.

Default

false

Example

true

Description

Identifier of the container where the PayPal button is placed.

Default

Button is displayed above the form.

Example

paypal-button-container

Description

• gold
• blue
• silver
• black

Default

gold

Example

blue

Description

• pill
• rect
• sharp

Default

rect

Example

sharp

Description

• paypal
• checkout
• buynow
• pay

Default

paypal

Example

checkout

Description

Accepts a value in the range of 25 to 55.

Default

Button adapts to the size of its container element.

Example

52

Description

Removes the default maximum width constraint of 750px, allowing the PayPal button to expand to the full width of its container.

Example

true

Default

false

Description

Controls the display and placement of the Smart Pix button.

Description

Displays the SmartPix button.

If you do not pass this field with true , the SmartPix button is hidden.

Default

false

Example

true

Description

Identifier of the container where the SmartPix button is placed.

Default

Button is displayed above the form.

Example

pix-button-container

Description

Controls the display and placement of the Pix QR button.

Description

Displays the Pix QR button.

If you do not pass this field with true , the Pix QR button is hidden.

Default

false

Example

true

Description

Identifier of the container where the Pix QR button is placed.

Default

Button is displayed above the form.

Example

pix-qr-button-container

Description

Customize form container placement and sizes.

Description

Parameter allows the overriding of the form width. You can set the value in either percentage, such as 100%, or pixels, like 320px.

Default

Depending on the form template:

• default: 300px
• card: 352px
• inline: 300px
• flat: 320px

Example

100%

Description

Custom containerId to place form.

If not set, it is displayed in the element with id solid-payment-form-container

Default

Example

your-custom-container-id

const data = {
  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 
  },
  mbWayButtonParams: {
    enabled: true,
    containerId: 'mbway-button-container'
  },
  styles: {
    submit_button: {
      'background-color': 'red',
      'font-size': '16px',
      'font-weight': 'bold',
      ':hover': {
        'background-color': 'green'
      },
      form_body: {
        'font-family': 'DM Sans'
      }
    }
  }
}

Form cleanup

You can use form.destroy() to clean up the form instance fully. This method ensures that all associated resources are properly destroyed, including cleaning up the DOM tree and removing any residual event listeners or states that may persist.

this.form.destroy()

Handle initialization errors

There might be errors when setting up the Payment Form, and if you encounter them:

• Verify that paymentIntent contains the required parameters.
• Confirm that the ip_address added is not private.
• Verify that the ip_address added matches the selected region if using a VPN.
• Ensure that the form styles do not have the opacity property set to 0 .
• Inspect form styles for any elements that could be covering the form area.
• Ensure that you generate a new order_id for each transaction attempt.

You can test payments to make sure everything works as expected. If the outlined steps do not resolve the issue, please contact us for further assistance. When contacting, share the details of the issue and the steps you have taken to resolve it.

Form update

There is no need to call the payment form repeatedly when using multiple tariffs. Request the form once and modify the amount , currency , product_id , or any parameter of the partialIntent object using the form instance’s update method.

To update a Payment Form parameter, generate the signature parameter on your backend. This signature verifies the merchant’s request authenticity on the payment gateway server and originates from the partialIntent encrypted String

Backend setup

Firstly, ensure that the backend is prepared. In the example code, the formMerchantData function is called with fields.

Description

Identifier of the predefined product must be passed in UUID v4 format.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

Price ID of the predefined product.

To get product_price_id, use get product prices.

Example

faf3b86a-1fe6-4ae5-84d4-ab0651d75db2

Description

Customer ID in the merchant’s system.

Example

4dad42f878

Description

Order amount - integer without the fractional component like cents. For instance, 1020 means 10 USD and 20 cents.

However, amount can be 0, for zero-amount authorization flow.

Example

1020

Description

Currency amount is represented in a three-letter currency code as per the ISO-4217 Wiki standard.

Example

USD

Description

Order description in your system and for bank processing.

Example

Premium package

Description

Order items in UTF-8 code.

Example

item1, item2

Description

Date of order creation following the ^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$ pattern.

Example

2025-12-21 11:21:30

Description

Number of payments by the customer.

Example

1

Description

Delay before transaction settlement in hours:

• Visa customer-initiated payments: 240 hours = 10 days
• Visa merchant-initiated payments: 120 hours = 5 days
• All other card brands: 144 hours = 6 days

PSP limits:

• Stripe: 113 hours
• Bamboo: 96 hours
• Ebanx: 95 hours
• Razorpay: 72 hours
• Braintree: 72 hours
• JPMorgan: 72 hours

Example

48

Description

Routing payments flag for 3DS flow.

Example

true

Description

Customer email.

If email on the initialization payment form was:

• non-empty, you cannot change it to an empty email
• non-empty, and you provide a new email, the new value is passed
• empty and you provide a new email, the form uses that email as a prefilled value The customer has the option to change it or to confirm it by submission.
  

Example

test@solidgate.com

Description

Identifies the marketing or acquisition channel that brought the customer to the transaction.

Example

facebook

Description

Identifies the internal system or flow that triggered the transaction.

Example

main_menu

Description

Metadata is useful for storing additional, structured information about an object, consisting of up to 10 key-value pairs with a validation limit of 380 characters per field.

The callback notification returns an order_metadata from the order in each state.

Example

“coupon_code”: “NY2025", “partner_id”: “123989"

Description

Provide this URL if you want to redirect a customer to your own Success Screen.

Example

http://merchant.example/success

Description

Provide this URL if you want to redirect a customer to your own Fail Screen.

Example

http://merchant.example/fail

{
  "amount": 1020,
  "currency": "EUR",
  "order_description": "Premium package",
  "order_items": "item5",
  "order_date": "2025-02-21 11:21:30",
  "order_number": "4",
  "settle_interval": 48,
  "force3ds": true,
  "customer_email": "user-one@mail.com",
  "traffic_source": "Instagram",
  "transaction_source": "Main menu",
  "order_metadata": {
    "coupon_code": "NY2025",
    "partner_id": "123989"
  },
  "success_url": "http://merchant.example/success",
  "fail_url": "http://merchant.example/fail"
}

{
  "product_price_id": "faf3b86a-1fe6-4ae5-84d4-ab0651d75db2",
  "customer_account_id": "4dad42f808",
  "currency": "EUR",
  "order_description": "Premium package",
  "order_items": "item5",
  "order_date": "2025-02-21 11:21:30",
  "order_number": "4",
  "settle_interval": 48,
  "force3ds": true,
  "customer_email": "user-one@mail.com",
  "traffic_source": "Instagram",
  "transaction_source": "Main menu",
  "order_metadata": {
    "coupon_code": "NY2025",
    "partner_id": "123989"
  },
  "success_url": "http://merchant.example/success",
  "fail_url": "http://merchant.example/fail"
}

Step 1. Form partial intent data

For updating, provide transaction-related information. This information resides in a FormUpdateDTO object, created by invoking the formUpdate function on your API instance.

<?php

use SolidGate\API\Api;

$api = new Api('public_key', 'secret_key');

$formUpdateDTO = $api->formUpdate(['JSON payment intent // fill as described in documentation']);

const solidGate = require('@solidgate/node-sdk');

let api = new solidGate.Api("public_key", "secret_key");

let partialIntentData = {
    /// fill it as described in documentation
}
let formUpdateDTO = api.formUpdate(partialIntentData);

const dataToFront = formUpdateDTO.toObject()

/// This values should be applied on front end in the following way

const form.update(dataToFront)

package main

import (
    "encoding/json"
    "fmt"

    solidgate "github.com/solidgate-tech/go-sdk"
)

type UpdateParams struct {
    ...
}

func main() {
    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)

    if err != nil {
        fmt.Print(err)
    }

    formUpdateDto, err := solidgateSdk.FormUpdate(partialIntentBytes)

    if err != nil {
        fmt.Print(err)
    }

    // ...  
}

val api = Api(HttpClient(), Credentials("public_key", "secret_key"))

val attributes = Attributes(mapOf(
    // fill as described in documentation
))

val formUpdateDTO = api.formUpdate(attributes)

from solidgate import ApiClient

client = ApiClient("public_key", "secret_key")

responseDTO = client.form_update({
    partial_intent_dict  // fill as described in documentation
})

Step 2. Pass generated data to frontend

The FormUpdateDTO object, returned by the FormUpdateDTO function, is a class instance. Convert it to a plain object for use in frontend code. This conversion is accomplished by calling the toObject function on the FormUpdateDTO object, resulting in a plain JavaScript object.

After forming the merchant data and converting it to a plain object, use it in frontend code to update with the partialIntent encrypted String

Partial form update

Description

Encrypted aes-cbc-256 string of JSON request data with random IV (16 bytes) and secret key is the first 32 bytes of the 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.

Example

MjNiYjVj…ZhYmMxMzNiZDY=

import React, { FC, useRef, useCallback, useEffect } from 'react'
import ReactDOM from 'react-dom';
import Payment, { InitConfig, ClientSdkInstance } from "@solidgate/react-sdk"

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  update?: {
    partialIntent: string;
    signature: string;
  }
}> = (props) => {
  const formResolve = useRef<(form: ClientSdkInstance) => void>(() => {})
  const formPromise = useRef<Promise<ClientSdkInstance>>()

  const handleOnReadyPaymentInstance = useCallback((form: ClientSdkInstance) => {
    formResolve.current(form)
  }, [])
  
  useEffect(() => {
    formPromise.current = new Promise<ClientSdkInstance>((resolve) => {
      formResolve.current = resolve
    })
  }, [])

  useEffect(() => {
    if (props.update && formPromise.current) {
      formPromise.current.then((form) => form
        .update(props.update)
        .then(callbackForSuccessUpdate)
        .catch(callbackForFailedUpdate)
      )
    }
  }, [props.update])
  
  return (
    <Payment
      merchantData={props.merchantData}
      onReadyPaymentInstance={handleOnReadyPaymentInstance}
  />)
}

form
  .update({ partialIntent, signature })
  .then(callbackForSuccessUpdate)
  .catch(callbackForFailedUpdate);

<template>
  <Payment 
    :merchant-data="merchantData"
      @ready-payment-instance="onReadyPaymentInstance"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } 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-->>'
}

function onReadyPaymentInstance(form: ClientSdkInstance): void {
  form
      .update({ partialIntent, signature })
      .then(callbackForSuccessUpdate)
      .catch(callbackForFailedUpdate)
}
</script>

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"
      (readyPaymentInstance)="formSubject$.next($event)"
    ></ngx-solid-payment>
  `
})
export class AppComponent {
  formSubject$ = new BehaviorSubject<ClientSdkInstance | null>(null)

  form$ = this.formSubject$.pipe(filter(Boolean))
  
  merchantData: InitConfig['merchantData'] = {
    merchant: '<<--YOUR MERCHANT ID-->>',
    signature: '<<--YOUR SIGNATURE OF THE REQUEST-->>',
    paymentIntent: '<<--YOUR PAYMENT INTENT-->>'
  }

  update(payload: {
    partialIntent: string;
    signature: string;
  }): void {
    this.form$.subscribe(form => form
      .update(payload)
      .then(callbackForSuccessUpdate)
      .catch(callbackForFailedUpdate))
  }
}

If an invalid parameter exists in the updateIntent request, such as a non-unique product_id, an error occurs.

{
  "error": {
    "code": "2.01",
    "message": [
      "Invalid Data"
    ]
  }
}