Form events

[ { "title":"Testing", "link":"https://docs.solidgate.com/payments/testing/", "text":"Simulate payments to test your integration before launching in production.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-customizable.svg" } , { "title":"Create your payment form", "link":"https://docs.solidgate.com/payments/integrate/payment-form/create-your-payment-form/", "text":"Understand how to integrate the payment form into your product.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-payments.svg" } , { "title":"Subscriptions", "link":"https://docs.solidgate.com/subscriptions/", "text":"Create and maintain a stable and healthy business subscription model.", "imgSrc":"https://solidgate.com/wp-content/uploads/2022/06/icon-global.svg" } ]

Get in touch
Sign in
Form events
Form events are essential checkpoints for monitoring user interactions in payments

By using the Solidgate Payment Form, you gain the capability to establish comprehensive user action tracking through the events it generates.

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

1
2
3
4

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

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 executed when the event is received.
})

1
2
3

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

1
2
3

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

Mounted
anchor

This event indicates that the Solidgate SDK displayed the Solidgate Payment Form, Guide
Enable Google Pay button to give your customers more payment options. Google Pay , Guide
Optimize your payment form with Apple Pay integration, providing a secure and efficient checkout for Apple device users. Apple Pay or an Guide
Activate and customize the PayPal button on your payment form to ensure a smooth customer experience. PayPal button.

1
2
3
4

interface MountedMessage {
  type: 'mounted',
  entity: 'applebtn' | 'googlebtn' | 'paypal' | 'form' | 'resign'  // one of listed values
}

 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}
  />)
}

1
2
3

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

 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>

 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
anchor

This event indicates that the user has successfully submitted the payment. It is triggered when valid data is entered within the form and the payment process is initiated.

The event could be triggered for one of the variations: the Solidgate Payment Form, Guide
Enable Google Pay button to give your customers more payment options. Google Pay , Guide
Optimize your payment form with Apple Pay integration, providing a secure and efficient checkout for Apple device users. Apple Pay or an Guide
Activate and customize the PayPal button on your payment form to ensure a smooth customer experience. PayPal button.

1
2
3
4

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

 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}
  />)
}

1
2
3

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

 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>

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

Success
anchor

This event indicates that the payment has been successfully processed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

interface SuccessMessage {
  type: 'success',
  entity: 'applebtn' | 'googlebtn' | 'paypal' | 'form' | 'resign' // 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
  }
}

 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}
  />)
}

1
2
3

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

 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>

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

Fail
anchor

This event indicates that the payment had been declined.

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

interface FailMessage {
  type: 'fail'
  entity: 'applebtn' | 'googlebtn' | 'paypal' | 'form' | 'resign'  // 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
  }
}

 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}
  />)
}

1
2
3

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

 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>

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

Verify
anchor

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

1
2
3

interface VerifyMessage {
  type: 'verify'
}

 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}
  />)
}

1
2
3

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

 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>

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

Form redirect
anchor

This event notifies you that the iframe is performing a redirect, either to a status page or to a 3D verification page.

1
2
3

interface FormRedirectMessage {
  type: 'formRedirect'
}

 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}
  />)
}

1
2
3

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

 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>

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

Interaction
anchor

This event information on the current state of the Solidgate Payment Form and the user’s interaction with the controls:

  • isTouched - external interaction with the field
  • isValid - validity check
 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

interface InteractionMessage {
  type: 'interaction'
  target: { // Indicates source of interaction
    type: 'button' | 'input' // one of the listed
    name: 'submit' | 'applePay' | 'googlePay' | 'paypal' | 'cardNumber' | 'cardCvv' | 'cardExpiry' | 'cardHolder'  // It could be one of the listed; furthermore, Solidgate might extend the list.
    interaction: 'click' | 'change' | 'focus' | 'blur' | 'enterKeyDown' // one of the listed
  }
  cardForm: { // Indicates current card form state
    fields:  {
      cardNumber: {
        isValid: boolean
        isTouched: boolean
      }
      cardCvv: {
        isValid: boolean
        isTouched: boolean
      }
      cardExpiry: {
        isValid: boolean
        isTouched: boolean
      }
      // The rest of the fields are optional, including, but not limited to: the `cardHolder` field  
    }
    isValid: boolean
    isTouched: boolean
  }
}

 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

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:  {
      cardNumber: {
        isValid: boolean
        isTouched: boolean
      }
      cardCvv: {
        isValid: boolean
        isTouched: boolean
      }
      cardExpiry: {
        isValid: boolean
        isTouched: boolean
      }
      // The rest of the fields are optional, including, but not limited to: the `cardHolder` field  
    }
    isValid: boolean
    isTouched: boolean
  }
}

 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}
  />)
}

1
2
3

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

 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>

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

Resize
anchor

This event is triggered when the Solidgate Payment Form is resized.

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

1
2
3
4
5

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

 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}
  />)
}

1
2
3

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

 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>

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

Custom styles appended
anchor

This event indicates that your styles have been applied to the Solidgate Payment Form.

This event is helpful for cases when you want to draw your preloader over the Solidgate Payment Form (at this point, you may remove it).
1
2
3

interface CustomStylesAppendedMessage {
  type: 'customStylesAppended'
}

 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}
  />)
}

1
2
3

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

 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>

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

Error
anchor

This event indicates that something went wrong during form initialization.

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

 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}
  />)
}

1
2
3

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

 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>

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

The following Error classes are provided:

  • ConnectionError - happens when the user experiences problems with their internet connection.
  • InitPaymentError - happens when an error with payment intent occurs during initialization. The message will contain a strict object with code and an explanation of the particular error. Additionally, it will include a details field, allowing you to create different handlers for different errors. The following error codes are supported (details.code):
  • Guide
    Cardholder authentication was not successful.     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 will be described in a message. Provides detailed description in details.message by pair key from payment intent with corresponding error message.
  • Guide
    An unrecognised decline code was received during the transaction.     6.01     - Something went wrong on our back-end side, please contact support.
  • GatewayError - occurs when Solidgate cannot parse the response from its back end. Please contact support in case of such errors.

Card
anchor

This event is triggered when the customer enters their card number and provides information about the card brand when the card number is successfully validated.

1
2
3
4
5
6
7
8

interface CardMessage {
  type: 'card'
  card: {
    brand: string // one of the card brands in upper case  like 'VISA', 'MASTERCARD' or 'unknown'
    bin: '111222' // string with the card bin (first 6 symbols)
    cardType: string // one of the card types in upper case like 'CREDIT', 'DEBIT', 'PREPAID' or 'unknown'
  }
}

 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}
  />)
}

1
2
3

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

 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>

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

Order status
anchor

This event indicates that the order status was changed while processing. However, the event may not show all changes before the final Guide
Orders can also go through various other states, such as 3ds_verify, approved, declined, refunded, and so on. order status : approved or declined.

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

1
2
3
4

interface OrderStatusMessage {
  type: 'orderStatus'
  response: object // Partial order status response.
}

 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}
  />)
}

1
2
3

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

 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>

 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
anchor

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 user actions through the events generated.

This is important for providing end customers with transparent pricing information.

 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; // Example: "12.00"
    taxAmount: string; // Example: "2.00"
    taxRate: number; // Example: 2.0
    taxableAmount: string; // Example: "10.00"
    currency: string; // Example: "USD"
    currencyIcon: string; // Example: "$"
  };
}

 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}
  />)
}

1
2
3
4

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

 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>

 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
  }
}
Looking for help? Contact us
Stay informed with Changelog