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

Should be provided for Bizum or Cash App Pay button.

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

Specifies the payment processing flow using auth for a two-step payment.

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

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 retry payment.

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 first name.

Example

John

Description

Customer 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

Source of traffic.

Example

facebook

Description

Source of transactions on the merchant site.

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.

If this parameter is not provided, it is automatically inferred.

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

US-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 transaction took place.

Example

https://google.com

Description

Device of 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

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",    
  "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 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 (16bytes) and secret key is first 32bytes of merchant secret key.

Example

E5FKjxw5vRjjIZ….vmG2YFjg5xcvuedQ==

Description

Control non-mandatory parameters of the form (f.e. - Cardholder Name, 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.

Example

true

Default

false

Description

Mask cvv number as *** during input.

Example

true

Default

false

Description

Text on the header of the payment form.

Example

Enter your payment data

Default

Description

Text on the title of the payment form.

Example

Card info

Default

Description

Template of Payment Form.

• default
• card
• inline
• flat

Example

card

Default

default

Description

Visibility of the Powered by Solidgate logo.

Example

true

Default

false

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

Example

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

Default

[]

Description

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

Example

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

Default

[]

Description

Link to Google Font.

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

Example

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

Default

Description

Card form visibility.

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

Example

false

Default

true

Description

Determines, if it is possible to submit card form using enter key press or submit button click.

Usefully for implementing custom submit flow.

Example

false

Default

true

Description

Setting to disable form autofocus.

Example

false

Default

true

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 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 3 to 50 characters. The pattern ^[a-zA-Z]+ [a-zA-Z]+(?: [a-zA-Z]+)*$ 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.

Example

false

Default

true

Description

Identifier of container to place the Google Pay button.

Example

yourCustomContainerId

Default

Description

Color of the Google Pay button.

Supported colors:

• default A Google-selected default value. Currently 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.

Example

white

Default

black

Description

Type of the Google Pay button.

Supported types:

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

Not supported types:

• donate
• book

Example

plain

Default

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 work for both one-time payments and subscriptions.

Example

['PAN_ONLY']

Default

['PAN_ONLY', 'CRYPTOGRAM_3DS']

Description

Customize the Apple Pay button.

Description

Displays the Apple Pay button.

Example

false

Default

true

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.

Example

js

Default

css

Description

Identifier of container to place the Apple Pay button.

Example

yourCustomContainerId

Default

Description

Color of the Apple Pay button.

Supported colors:

• white-outline
• black
• white

Example

white-outline

Default

black

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

Example

check-out

Default

plain

Description

Customizes the Bizum button.

Description

Displays the Bizum button.

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

Example

false

Default

true

Description

Identifier of the container where the Bizum button is placed.

Example

bizum-button-container

Default

Button is displayed above the form.

Description

Customizes the Blik button.

Description

Displays the Blik button.

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

Example

true

Default

false

Description

Identifier of the container where the Blik button is placed.

Example

blik-button-container

Default

Button is displayed above the form.

Description

Theme of the Blik button.

• light
• dark

Example

light

Default

dark

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.

Example

false

Default

true

Description

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

Example

cashapp

Default

Button is displayed above the form.

Description

Customizes form container placement and sizes.

Description

Displays the PayPal button.

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

Example

true

Default

false

Description

Identifier of the container where the PayPal button is placed.

Example

paypal-button-container

Default

Button is displayed above the form.

Description

• gold
• blue
• silver
• black

Example

blue

Default

gold

Description

• pill
• rect
• sharp

Example

sharp

Default

rect

Description

• paypal
• checkout
• buynow
• pay

Example

checkout

Default

paypal

Description

Accepts a value in the range of 25 to 55.

Example

52

Default

Button adapts to the size of its container element.

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.

Example

true

Default

false

Description

Identifier of the container where the SmartPix button is placed.

Example

pix-button-container

Default

Button is displayed above the form.

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.

Example

100%

Default

Depending on form template:

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

Description

Custom containerId to place form.

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

Example

your-custom-container-id

Default

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 
  },
  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 the Solidgate support team 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 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

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

Source of traffic.

Example

facebook

Description

Source of transactions on the merchant site.

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 (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.

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"
    ]
  }
}