[
{
"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"
}
]
Form events are essential checkpoints for monitoring user interactions in payments
By utilizing 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 facilitate 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
5
6
constform=PaymentFormSdk.init(data)form.on('event_type',(e)=>{constbody=e.data// The body of any available event as it described below.
// The code will be executed when the event is received.
})
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 and reliable customer experience.
PayPal
button.
1
2
3
4
interfaceMountedMessage{type:'mounted',entity:'applebtn'|'googlebtn'|'paypal'|'form'|'resign'// one of listed values
}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@mounted="mounted"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionmounted(event:SdkMessage[MessageType.Mounted]):void{// here your logic
}</script>
Submit
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 and reliable customer experience.
PayPal
button.
1
2
3
4
interfaceSubmitMessage{type:'submit',entity:'applebtn'|'googlebtn'|'paypal'|'form'|'resign'// one of listed values, indicates how payment was processed
}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@submit="submit"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionsubmit(event:SdkMessage[MessageType.Submit]):void{// here your logic
}</script>
Success
This event indicates that the payment has been successfully processed.
1
2
3
4
5
6
7
8
9
10
11
interfaceSuccessMessage{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
}}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@success="success"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionsuccess(event:SdkMessage[MessageType.Success]):void{// here your logic
}</script>
Fail
This event indicates that the payment had been declined.
1
2
3
4
5
6
7
8
9
10
11
12
13
interfaceFailMessage{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
}}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@fail="fail"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionfail(event:SdkMessage[MessageType.Fail]):void{// here your logic
}</script>
Verify
This event informs you that the payment is undergoing processing through the 3D flow.
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@verify="verify"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionverify(event:SdkMessage[MessageType.Verify]):void{// here your logic
}</script>
Form redirect
This event notifies you that the iframe is performing a redirect, either to a status page or to a 3D verification page.
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@redirect="redirect"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionredirect(event:SdkMessage[MessageType.Redirect]):void{// here your logic
}</script>
Interaction
This event information on the current state of the Solidgate Payment Form and the user’s interaction with the controls:
interfaceInteractionMessage{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: booleanisTouched: boolean}cardCvv:{isValid: booleanisTouched: boolean}cardExpiry:{isValid: booleanisTouched: boolean}// The rest of the fields are optional, including, but not limited to: the `cardHolder` field
}isValid: booleanisTouched: boolean}}
interfaceInteractionMessage{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: booleanisTouched: boolean}cardCvv:{isValid: booleanisTouched: boolean}cardExpiry:{isValid: booleanisTouched: boolean}// The rest of the fields are optional, including, but not limited to: the `cardHolder` field
}isValid: booleanisTouched: boolean}}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@interaction="interaction"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioninteraction(event:SdkMessage[MessageType.Interaction]):void{// here your logic
}</script>
Resize
This event is triggered when the Solidgate Payment Form is resized.
For example, it may resize after displaying a validation message.
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@resize="resize"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionresize(event:SdkMessage[MessageType.Resize]):void{// here your logic
}</script>
Custom styles appended
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).
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@custom-styles-appended="customStylesAppended"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioncustomStylesAppended(event:SdkMessage[MessageType.CustomStylesAppended]):void{// here your logic
}</script>
Error
This event indicates that something went wrong during form initialization.
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@error="error"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionerror(event:SdkMessage[MessageType.Error]):void{// here your logic
}</script>
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 backed 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
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
interfaceCardMessage{type:'card'card:{brand: string// one of the card brands in upper case ('VISA', 'MASTERCARD' etc) or 'unknown'
bin:'111222'// string with the card bin (first 6 symbols)
}}
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@card="card"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functioncard(event:SdkMessage[MessageType.Card]):void{// here your logic
}</script>
Order status
This event indicates that the order status was changed while processing. However, the event may not show all changes before the final
Guide
Understand payment states and types to implement correct business logic.
order status
: approved or declined.
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>
`})exportclassAppComponent{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
}}
<template><Payment:merchant-data="merchantData"@order-status="orderStatus"/></template><scriptlang="ts"setup>import{defineAsyncComponent}from'vue'import{InitConfig,SdkMessage,MessageType}from'@solidgate/vue-sdk'constPayment=defineAsyncComponent(()=>import('@solidgate/vue-sdk'))constmerchantData:InitConfig['merchantData']={merchant:'<<--YOUR MERCHANT ID-->>',signature:'<<--YOUR SIGNATURE OF THE REQUEST-->>',paymentIntent:'<<--YOUR PAYMENT INTENT-->>'}functionorderStatus(event:SdkMessage[MessageType.OrderStatus]):void{// here your logic
}</script>