Payment form events

Subscribe to payment form lifecycle events to track user interactions, validate input, handle errors, and respond to payment completion

Using the Solidgate Payment Form, you can establish comprehensive customer action tracking through the events it generates.

These events provide valuable touchpoints for monitoring and analyzing customer interactions. They handle the tracking of successful payments, resolution of form initialization issues, and analysis of customer interactions with form controls, offering comprehensive insights into the payment workflow.

React

1
2
3
4


<Payment
    {...restParams}
    onEventName={callback}
/>

Vanilla JS

1
2
3
4
5
6


const form = PaymentFormSdk.init(data)

form.on('event_type', (e) => {
  const body = e.data // The body of any available event as it described below.
  // The code will be run when the event is received.
})

Vue

1
2
3


<Payment
    @event-name="callback"
/>

Angular

1
2
3


<ngx-solid-payment
    (eventName)="callback($event)"
/>

Use

form.unsubscribeAll() to remove all existing event subscriptions
form.unsubscribe("eventName") to remove a subscription for a specific event, where eventName is the name of the event you want to stop listening to

Form lifecycle

These events track the major stages of the payment form, from initialization to submission, and provide feedback on whether the payment process was successful or failed.

Mounted

When the Payment Form, Guide
Add a Google Pay button to your embedded payment form for one-tap checkout on Android devices and Chrome browsers with token security. Google Pay, Guide
Add an Apple Pay button to your embedded payment form for one-tap checkout with biometric authentication on supported Apple devices. Apple Pay , or APM buttons are initialized, rendered, and displayed.

Type

1
2
3
4


interface MountedMessage {
  type: 'mounted',
  entity: 'applebtn' | 'googlebtn' | 'form' | 'resign' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr' // one of listed values
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleMounted = useCallback((event: SdkMessage[MessageType.Mounted]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onMounted={handleMounted}
  />)
}

Vanilla JS

1
2
3


form.on('mounted', e => {
  const data = e.data // MountedMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @mounted="mounted"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 mounted(event: SdkMessage[MessageType.Mounted]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onMounted(event: SdkMessage[MessageType.Mounted]): void {
    // here your logic
  }
}

Submit

When the payment is successfully submitted by the customer, the event can be triggered for Payment Form, Guide
Add a Google Pay button to your embedded payment form for one-tap checkout on Android devices and Chrome browsers with token security. Google Pay, Guide
Add an Apple Pay button to your embedded payment form for one-tap checkout with biometric authentication on supported Apple devices. Apple Pay , or APM buttons.

Type

1
2
3
4


interface SubmitMessage {
  type: 'submit',
  entity: 'applebtn' | 'googlebtn' | 'form' | 'resign' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr' // one of listed values, indicates how payment was processed
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleSubmit = useCallback((event: SdkMessage[MessageType.Submit]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onSubmit={handleSubmit}
  />)
}

Vanilla JS

1
2
3


form.on('submit', e => {
  const data = e.data // SubmitMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @submit="submit"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 submit(event: SdkMessage[MessageType.Submit]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onSubmit(event: SdkMessage[MessageType.Submit]): void {
    // here your logic
  }
}

Card

The card event fires on every valid card number and returns BIN level metadata such as brand, bin, cardType, cardCategory, bank, and binCountry before submit, without ever exposing the PAN, CVV, expiry, or cardholder name.

Use it to adapt UI and pricing, prevent declines on risky binCountry mismatches, hint acquirer routing, and segment customers by issuer and tier before authorization.

Type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


interface CardMessage {
  type: 'card'
  card: {
    brand: "AMERICAN EXPRESS", // card scheme in upper case: 'VISA', 'MASTERCARD', 'AMERICAN EXPRESS', 'DISCOVER', 'JCB', 'DINERS CLUB', 'UNIONPAY', 'MAESTRO', etc., or 'unknown'
    bin: "377400", // first 6 digits of the PAN as a string
    cardType: "DEBIT", // funding type in upper case: 'CREDIT', 'CREDIT/DEBIT', 'DEBIT', 'PREPAID', 'CHARGE CARD', 'DEFERRED DEBIT', or 'unknown'
    cardCategory: "BUSINESS", // scheme product tier in upper case: 'STANDARD', 'CLASSIC', 'CONSUMER', 'BUSINESS', 'CORPORATE', 'PLATINUM', 'WORLD', 'INFINITE', 'ELECTRON', etc.
    bank: "BANK OF AMERICA", // issuing bank name in upper case (e.g. 'BANK OF AMERICA', 'CITIBANK'); empty when not resolved
    binCountry: "USA" // ISO 3-letter country code of the issuing bank (e.g. 'USA', 'GBR', 'DEU')
  }
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleCard = useCallback((event: SdkMessage[MessageType.Card]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onCard={handleCard}
  />)
}

Vanilla JS

1
2
3


form.on('card', e => {
  const data = e.data // CardMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @card="card"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 card(event: SdkMessage[MessageType.Card]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onCard(event: SdkMessage[MessageType.Card]): void {
    // here your logic
  }
}

Interaction

Tracks customer interactions with form elements, including buttons and input fields.

Monitors interaction types click, change, focus, blur, enterKeyDown, pageClose, and resetRequested. Provides real-time field-level and form-level validation states isValid, isTouched for both regular and resign payment forms.

For wallet and Guide
Add alternative payment method buttons to your payment form with customizable styling, placement, and method-specific display conditions. APM buttons, interactions can indicate both button clicks and modal close/page close actions.

Event distinction

pageClose fires when the customer clicks the modal’s close ✕ button before form submission.
resetRequested fires when the customer clicks the modal’s close ✕ button after form submission, but only when the APM button was initialized with resetEnabled: true.

This event does not automatically close the modal or cancel the order. It is your responsibility to handle it by destroying the SDK instance and re-initializing with a new order/intent.

Regular payment type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


interface InteractionMessage {
  type: 'interaction'
  target: { // Indicates source of interaction
    type: 'button' | 'input' // one of the listed
    name: 'submit' | 'applePay' | 'googlePay' | 'clicktopay' | 'cashapp' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr' | 'cardNumber' | 'cardCvv' | 'cardExpiryDate' | 'cardHolder' | 'email' | 'zipCode' | 'resignCvv'
    // Additional field names are also possible, e.g.:
    // 'brazilCpf', 'brazilCustomerPhone', 'brazilZip', 'billingAddress', 'billingCity', 'billingState',
    // 'pakistanCnic', 'blikCode', 'firstName', 'lastName', 'customerPhone', etc.
    interaction: 'click' | 'change' | 'focus' | 'blur' | 'enterKeyDown' | 'pageClose' | 'resetRequested' // one of the listed
  }
  cardForm: { // Indicates current card form state
    fields:  {
      cardNumber: {
        isValid: boolean
        isTouched: boolean
      }
      cardCvv: {
        isValid: boolean
        isTouched: boolean
      }
      cardExpiryDate: {
        isValid: boolean
        isTouched: boolean
      }
      // The rest of the fields are optional, including, but not limited to: the `cardHolder` field  
    }
    isValid: boolean
    isTouched: boolean
  }
}

Resign payment type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


interface InteractionMessage {
  type: 'interaction'
  target: { // Indicates source of interaction
    type: 'button' | 'input' // one of the listed
    name: 'submit' | 'resignCvv' // It could be one of the listed; furthermore, Solidgate might extend the list.
    interaction: 'click' | 'change' | 'focus' | 'blur' | 'enterKeyDown' // one of the listed
  }
  resignForm: { // Indicates current resign form state
    fields:  {
      resignCvv: {
        isValid: boolean
        isTouched: boolean
      }
    }
    isValid: boolean
    isTouched: boolean
  }
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleInteraction = useCallback((event: SdkMessage[MessageType.Interaction]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onInteraction={handleInteraction}
  />)
}

Vanilla JS

1
2
3


form.on('interaction', e => {
  const data = e.data // InteractionMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @interaction="interaction"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 interaction(event: SdkMessage[MessageType.Interaction]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onInteraction(event: SdkMessage[MessageType.Interaction]): void {
    // here your logic
  }
}

Form redirect

Indicates when the form redirects the customer to another page, status, or 3D verification page.

Type

1
2
3


interface FormRedirectMessage {
  type: 'formRedirect'
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleRedirect = useCallback((event: SdkMessage[MessageType.Redirect]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onRedirect={handleRedirect}
  />)
}

Vanilla JS

1
2
3


form.on('formRedirect', e => {
  const data = e.data // FormRedirectMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @redirect="redirect"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 redirect(event: SdkMessage[MessageType.Redirect]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onRedirect(event: SdkMessage[MessageType.Redirect]): void {
    // here your logic
  }
}

Custom styles appended

If custom styles are in place, this event indicates that the form has become visible to the customer, making it helpful for hiding preloaders.

Type

1
2
3


interface CustomStylesAppendedMessage {
  type: 'customStylesAppended'
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleCustomStylesAppended = useCallback((event: SdkMessage[MessageType.CustomStylesAppended]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onCustomStylesAppended={handleCustomStylesAppended}
  />)
}

Vanilla JS

1
2
3


form.on('customStylesAppended', e => {
  const data = e.data // CustomStylesAppendedMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @custom-styles-appended="customStylesAppended"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 customStylesAppended(event: SdkMessage[MessageType.CustomStylesAppended]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onCustomStylesAppended(event: SdkMessage[MessageType.CustomStylesAppended]): void {
    // here your logic
  }
}

Payment processing

These events provide insights into the payment process, including 3DS verification, the order status, and details about the payment, like pricing and taxes.

Success

This event indicates that the payment has been successfully processed.

Type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


interface SuccessMessage {
  type: 'success',
  entity: 'applebtn' | 'googlebtn' | 'form' | 'resign' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr' // one of listed values, indicates how payment was processed
  order: { // an optional order object
    status: string // an optional order status field
    currency: string  // an optional order currency field
    amount: number  // an optional order amount field
    subscription_id: string  // an optional subscription id field
    order_id: string  // an optional order id field
  }
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleSuccess = useCallback((event: SdkMessage[MessageType.Success]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onSuccess={handleSuccess}
  />)
}

Vanilla JS

1
2
3


form.on('success', e => {
  const data = e.data // SuccessMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @success="success"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 success(event: SdkMessage[MessageType.Success]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onSuccess(event: SdkMessage[MessageType.Success]): void {
    // here your logic
  }
}

Verify

This event informs you that the payment is undergoing processing through the 3D flow.

Type

1
2
3


interface VerifyMessage {
  type: 'verify'
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleVerify = useCallback((event: SdkMessage[MessageType.Verify]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onVerify={handleVerify}
  />)
}

Vanilla JS

1
2
3


form.on('verify', e => {
  const data = e.data // VerifyMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @verify="verify"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 verify(event: SdkMessage[MessageType.Verify]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onVerify(event: SdkMessage[MessageType.Verify]): void {
    // here your logic
  }
}

Fail

This event indicates that the payment had been declined.

Type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


interface FailMessage {
  type: 'fail'
  entity: 'applebtn' | 'googlebtn' | 'form' | 'resign' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr' // one of listed values, indicates how payment was processed
  code: string // an optional error code from https://docs.solidgate.com/payments/payments-insights/error-codes/
  message: string // an optional error message field
  order: { // an optional order object
    status: string // an optional order status field
    currency: string  // an optional order currency field
    amount: number  // an optional order amount field
    subscription_id: string  // an optional subscription id field
    order_id: string  // an optional order id field
  }
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleFail = useCallback((event: SdkMessage[MessageType.Fail]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onFail={handleFail}
  />)
}

Vanilla JS

1
2
3


form.on('fail', e => {
  const data = e.data // FailMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @fail="fail"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 fail(event: SdkMessage[MessageType.Fail]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onFail(event: SdkMessage[MessageType.Fail]): void {
    // here your logic
  }
}

Order status

This event indicates that the order status was changed while processing. However, the event may not show all changes before the final order Guide
An order is a customer’s request to purchase goods or services, progressing through various states based on payment status. status approved or declined .

The response can be either the updated card order Webhook or the updated alternative order Webhook , depending on which payment method was used during payment.

Type

1
2
3
4
5


interface OrderStatusMessage {
  type: 'orderStatus',
  entity: 'applebtn' | 'googlebtn' | 'form' | 'resign' | 'bizum' | 'blik' | 'mbway' | 'paypal' | 'pix' | 'pix-qr', // one of listed values, indicates how payment was processed
  response: object // Partial order status response.
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleOrderStatus = useCallback((event: SdkMessage[MessageType.OrderStatus]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onOrderStatus={handleOrderStatus}
  />)
}

Vanilla JS

1
2
3


form.on('orderStatus', e => {
  const data = e.data // OrderStatusMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @order-status="orderStatus"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 orderStatus(event: SdkMessage[MessageType.OrderStatus]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onOrderStatus(event: SdkMessage[MessageType.OrderStatus]): void {
    // here your logic
  }
}

Payment details

This event informs of updates or changes to payment details, including price, Guide
Streamline tax management for your international business operations with Solidgate. taxes, and other relevant information, enabling comprehensive tracking of customer actions through the events generated.

Type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


interface PaymentDetailsMessage {
  type: 'paymentDetails';
  payment: {
    priceBreakdown: PriceBreakdown;
  };
}

interface PriceBreakdown {
  productPrice: {
    amount: string;
    currency: string;
    currencyIcon: string;
  }; // Base price
  discountPrice?: {
    amount: string;
    currency: string;
    currencyIcon: string;
  }; // Optional, after discount
  trialPrice?: {
    amount: string;
    currency: string;
    currencyIcon: string;
  }; // Optional, price without discount (if available)
  price: {
    source: "productPrice" | "discountPrice" | "trialPrice";
    amount: string; // Final price amount based on the selected source (e.g., "100.00")
    taxAmount: string; // Tax amount applied (2% of taxableAmount, e.g., "2.00")
    taxRate: number; // Fixed tax rate (2.0)
    taxableAmount: string; // Amount subject to tax (e.g., "100.00")
    currency: string; // ISO 4217 currency code (e.g., "USD")
    currencyIcon: string; // Currency symbol (e.g., "$")
  };
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handlePaymentDetails = useCallback((event: SdkMessage[MessageType.PaymentDetails]) => {
    // Validate the event structure and handle the payment details logic
  }, [])
  
  return (<Payment
    {...props}
    onPaymentDetails={handlePaymentDetails}
  />)
}

Vanilla JS

1
2
3
4


form.on('paymentDetails', e => {
  const data = e.data // PaymentDetailsMessage
  // Add validation logic for data if needed
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @payment-details="paymentDetails"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 paymentDetails(event: SdkMessage[MessageType.PaymentDetails]): void {
  // Validate event structure and handle payment details here
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onPaymentDetails(event: SdkMessage[MessageType.PaymentDetails]): void {
    // Validate and handle payment details here
  }
}

Technical

Technical events track form resizing and errors, ensuring proper adaptation and aiding in debugging.

Resize

When the Payment Form is resized.

For example, it may resize after displaying a validation message.

Type

1
2
3
4
5


interface ResizeMessage {
  type: 'resize'
  width: number
  height: number
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleResize = useCallback((event: SdkMessage[MessageType.Resize]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onResize={handleResize}
  />)
}

Vanilla JS

1
2
3


form.on('resize', e => {
  const data = e.data // ResizeMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @resize="resize"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 resize(event: SdkMessage[MessageType.Resize]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onResize(event: SdkMessage[MessageType.Resize]): void {
    // here your logic
  }
}

Error

Indicates an error during form initialization or processing. The following Error classes are provided:

ConnectionError - happens when the customer experiences problems with their internet connection.
InitPaymentError - happens when an error with payment intent occurs during initialization.
The message contains a strict object with code and an explanation of the particular error. Additionally, it includes a details field, allowing you to create different handlers for different errors. The following error codes are supported (details.code):
GatewayError - occurs when Solidgate cannot parse the response from its backend, please contact support.
Guide
Cardholder authentication was not successful to complete the payment. 1.01 - Invalid credentials or signature generated.
Guide
“Invalid data” code message is used for validation errors, with the reason for the validation triggering specified in the body (object error) of the response. 2.01 - Invalid data in payment intent.
It could be a non-existing product ID or other properties, which is described in a message. Provides detailed description in details.message by pair key from payment intent with corresponding error message.
Guide
An unrecognized decline code was received during the transaction. 6.01 - Something went wrong on the backend side, please contact support.

Type

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


interface ErrorMessage {
  type: 'error'
  value: {
    name: string; // "ConnectionError" | "InitPaymentError" | "GatewayError"
    message: string;
  }
  details?: {
    code: string; // 1.01, 2.01, 6.01 from https://docs.solidgate.com/payments/payments-insights/error-codes/
    message: {
      [key: string]: string
    } | string; // Object for 2.01, otherwise string
  }
}

React

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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

export const MyPayment: FC<{
  merchantData: InitConfig['merchantData']
  styles?: InitConfig['styles']
  formParams?: InitConfig['formParams']
  width?: string
}> = (props) => {
  const handleError = useCallback((event: SdkMessage[MessageType.Error]) => {
    // here logic
  }, [])
  
  return (<Payment
    {...props}
    onError={handleError}
  />)
}

Vanilla JS

1
2
3


form.on('error', e => {
  const data = e.data // ErrorMessage
})

Vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<template>
  <Payment
      :merchant-data="merchantData"
      @error="error"
  />
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
import { InitConfig, SdkMessage, MessageType } 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 error(event: SdkMessage[MessageType.Error]): void {
  // here your logic
}
</script>

Angular

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import {Component} from '@angular/core';

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

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

  onError(event: SdkMessage[MessageType.Error]): void {
    // here your logic
  }
}

Looking for help? Contact us

Stay informed with Changelog