[
{
"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"
}
]
Efficiently integrate a resign payment form with saved card details
Solidgate’s introduction of a Resign Form marks a significant advancement in payment processing, offering clients the convenience of 1-click payments by securely utilizing stored card details.
This is especially beneficial for returning customers, as it allows the reuse of card information, significantly streamlining the payment process. After a customer’s initial transaction, their card details are securely saved. For future purchases, these details are quickly accessible, enabling effortless 1-click transactions.
This efficient approach not only saves time but also eliminates the common hassle of repeatedly entering payment information, thus enhancing the shopping experience and potentially boosting conversion rates.
Initial payment The customer makes the
Guide
This guide simplifies the process of adding the Solidgate Payment Form to your website. It covers the preparation of the back end, SDK installation, API instance creation, and merchant data setup.
first
payment.
Token storage Solidgate tokenizes card data and returns a secure recurring token that you store.
Recognition of regular customers You identify your regular customers on subsequent visits and suggest paying with a previous payment method.
Resign Form initialization You can initialize our Resign Form with the recurring token you stored.
New payment completed The customer fills out the Resign Form only with the CVV field.
Back end setup
Begin by ensuring that the back end is adequately prepared. In the provided example code, the function formMerchantData is called with the necessary fields.
Solidgate
SDK
includes an SDK method that requires a resign intent payload. This payload is similar to the payment intent but also includes a token field for the tokenized PAN number.
resignIntent object
Expand all
Description
Order ID, which must be unique, is specified in the merchant system.
Example
123456
Description
Token associated with a card method that could be used for subsequent payments. This token is essential for processing recurring transactions without requiring the customer to enter their card details again.
Order amount - integer without fractional component (i.e. cents). For instance, 1020 means 10 USD and 20 cents.
However, if the type is auth, amount can be 0, for zero-amount flow. For type as charge, an amount of 0 triggers an error.
Required, for one-time payment workflows.
Example
1020
Description
Currency amount is represented in a three-letter currency code as per the ISO-4217 standard.
Required, for one-time payment workflow.
Example
USD
Description
Order description in your system and for bank processing.
To improve the clarity of payment processing, it is advised to keep the description brief, ideally not exceeding 100 characters
Example
Premium package
Description
Order items in UTF-8 code.
Example
item1, item2
Description
Date of order creation in format YYYY-MM-DD-HH-MM-SS.
Example
2020-12-21 11:21:30
Description
Number of payments by the customer.
Example
1
Description
Process this payment as an authorization auth or charge charge.
It is mandatory to select auth auth for authorization. Should it not be specified, charge will automatically become the default.
Example
auth
Description
The delay applied before transaction settlement indicates the hours to wait before settling and should be provided together with type:auth. The maximum value:
for Visa customer-initiated payments: 240 hours = 10 days
for Visa merchant-initiated payments: 120 hours = 5 days
for all other card brands: 144 hours = 6 days
Example
48
Description
Number of retry payment.
Example
1
Description
Routing payments flag for 3DS flow (enabled by Solidgate account manager).
Example
true
Description
Customer birthdate in format YYYY-MM-DD.
Example
2000-11-21
Description
Customer email.
If no parameter is received, it will be collected automatically on payment form.
The public IP address of the customer. Both IPv4 and IPv6 are supported.
Private IPs (10.0.0.0-10.255.255.255, 172.16.0.0-172.31.255.255, 192.168.0.0-192.168.255.255) will result in an ‘Invalid IP’ error.
Example
8.8.8.8
Description
Source of traffic.
Example
facebook
Description
Source of transactions on the merchant site.
Example
main_menu
Description
Country where the goods are purchased or where the seller is based is identified using the ISO-3166 alpha-3 country code.
If you are registered with international payment systems as a marketplace, this parameter is required. Being registered as a marketplace, in the context of international payment systems, typically implies that you operate a platform where numerous sellers can offer their goods or services.
If this parameter is not provided, it will be automatically inferred from the header.
Example
WEB
Description
Customer’s user agent.
Example
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (HTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Description
Metadata is useful for storing additional, structured information about an object, consisting of up to 10 key-value pairs with a validation limit of 380 characters per field.
The callback notification returns an order_metadata from the order in each state.
Example
“coupon_code”: “NY2018", “partner_id”: “123989"
Description
URL to redirect a customer after successful payment.
Additionally, when setting up the resignIntent object for the resign process, an extra parameter recurring_token is sent.
Step 1 Form resign intent data
Start by generating the resign intent data, incorporating the previously obtained payment token. This is a crucial step in preparing for the transaction.
Invoke the formMerchantData function within your API instance.
Ensure to include the recurring_token in the resignIntent fields.
Step 2 Pass generated data to front end
Pass the encrypted resignIntent string to your front end.
This is typically done during the form initialization phase.
This action creates the FormInitDTO object, which is pivotal for the charge creation. The recurring_token is instrumental in associating this new transaction with the payment method used previously.
Resign form initialization
After completing all necessary steps and adjusting the required parameters for the Resign Form, you can initiate the
Solidgate
SDK
in a manner similar to the regular payment setup, but tailored for the resign process.
To create Resign Form, you need to call the PaymentFormSdk.resign(resignRequest: ResignRequest, formConfig?: ResignFormConfig) method from the PaymentFormSdk.
1
2
3
4
5
6
7
8
9
10
constsetupResignPaymentForm=async()=>{try{constform=awaitPaymentFormSdk.resign(resignRequest,formConfig);// Now you can call payment form methods such as form.on, form.submit etc...
}catch(error){// Error will be thrown if payment form initialization fails.
// You can handle it here.
}};
import{Resign,ResignFormConfig,ResignRequest,ClientSdkInstance}from'@solidgate/react-sdk'functionCheckoutPage() {constresignRequest: ResignRequest={merchant:'<--YOUR DATA-->',signature:'<--YOUR DATA-->',resignIntent:'<--YOUR DATA-->'}constappearance: ResignFormConfig["appearance"]={submitButtonText:"Pay",allowSubmit: true,resignCvvLabel:"CVV",resignCvvPlaceholder:"123",hideCvvNumbers: true}constcontainer: ResignFormConfig["container"]={width:"500px"}conststyles: ResignFormConfig["styles"]={"resign-submit-button":{'background-color':'green','font-size':'16px','font-weight':'bold',':hover':{'background-color':'green'},}}consthandleInitFailed=(error: Error)=>{// you can handle init failure here
}consthandleReadyResignInstance=(formInstance: ClientSdkInstance)=>{// you can receive ClientSDKInstance here to perform additional actions such as manual form submission, form updates, etc.
}consthandleSuccess=()=>{// you can handle successful payment here
// complete list of the available events can be found in the 'Form Events' section of this documentation
}return(<ResignresignRequest={resignRequest}appearance={appearance}container={container}styles={styles}onReadyResignInstance={handleReadyResignInstance}onResignInitFailed={handleInitFailed}onSuccess={handleSuccess}/>)}
<scriptsetuplang="ts">import{Resign,ResignRequest,ResignFormConfig,ClientSdkInstance}from"@solidgate/vue-sdk";constresignRequest:ResignRequest={merchant:'<--YOUR DATA-->',signature:'<--YOUR DATA-->',resignIntent:'<--YOUR DATA-->',}constappearance:ResignFormConfig["appearance"]={submitButtonText:"Pay",allowSubmit:true,resignCvvLabel:"CVV",resignCvvPlaceholder:"123",hideCvvNumbers:true}constcontainer:ResignFormConfig["container"]={width:"500px"}conststyles:ResignFormConfig["styles"]={"resign-submit-button":{'background-color':'green','font-size':'16px','font-weight':'bold',':hover':{'background-color':'green'},}}functionhandleReadyResignInstance(formInstance:ClientSdkInstance){// you can receive ClientSDKInstance here to perform additional actions such as manual form submission, form updates, etc.
}functionhandleInitFailed(error:Error){// you can handle init failure here
}functionhandleSuccess(){// you can handle successful payment here
// complete list of the available events can be found in the 'Form Events' section of this documentation
}</script><template><Resign:resign-request="resignRequest":appearance="appearance":container="container":styles="styles"@readyResignInstance="handleReadyResignInstance"@resignInitFailed="handleInitFailed"@success="handleSuccess"/></template>
//app.component.ts
import{Component}from'@angular/core';import{ClientSdkInstance,ResignFormConfig,ResignRequest,SolidResignModule}from'@solidgate/angular-sdk'@Component({selector:'app-root',standalone:true,imports:[SolidResignModule],template:`
<ngx-solid-resign
[resignRequest]="resignRequest"
[appearance]="appearance"
[container]="container"
[styles]="styles"
(readyResignInstance)="handleReadyResignInstance($event)"
(resignInitFailed)="handleInitFailed($event)"
(success)="handleSuccess()"
></ngx-solid-resign>
`})exportclassAppComponent{resignRequest:ResignRequest={merchant:'<--YOUR DATA-->',signature:'<--YOUR DATA-->',resignIntent:'<--YOUR DATA-->',}appearance:ResignFormConfig["appearance"]={submitButtonText:"Pay",allowSubmit:true,resignCvvLabel:"CVV",resignCvvPlaceholder:"123",hideCvvNumbers:true}container:ResignFormConfig["container"]={width:"500px"}styles:ResignFormConfig["styles"]={"resign-submit-button":{'background-color':'green','font-size':'16px','font-weight':'bold',':hover':{'background-color':'green'},}}resignFormConfig:ResignFormConfig={appearance:{submitButtonText:"Pay",allowSubmit:true,googleFontLink:"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap",resignCvvLabel:"CVV",resignCvvPlaceholder:"123",hideCvvNumbers:true},container:{width:"500px"},}handleReadyResignInstance(formInstance:ClientSdkInstance){// you can receive ClientSDKInstance here to perform additional actions such as manual form submission, form updates, etc.
}handleInitFailed(error:Error){// you can handle init failure here
}handleSuccess(){// you can handle successful payment here
// complete list of the available events can be found in the 'Form Events' section of this documentation
}}
The resignRequest: ResignRequest object contains all the necessary information for the resign initialization.
It
is
required
and should contain the:
following properties
Expand all
Description
Unique merchant identification.
Shall be shared at the moment of registration.
Example
api_pk_7b197...ba108f842
Description
Signature of request.
It allows verifying whether the request from the merchant is genuine on the payment gateway server.
Example
MjNiYjVj…ZhYmMxMzNiZDY=
Description
Encrypted aes-cbc-256 string of JSON request data with random IV (16bytes) and secret key is first 32bytes of merchant secret key.
The formConfig: ResignFormConfig object allows you to customize the resign form.
It
is
optional
and can contain the:
following properties
Expand all
Description
Set a custom ID for the payment form iframe and define iframe dimensions.
Description
Custom id of the iframe where the resign form will be rendered. If not set, form will be displayed in element with id solid-payment-form-container.
Example
resign-payment-form-container
Description
Parameter that overrides the width of the resign form’s iframe. You can set the value in either percentage (e.g., 100%) or pixels (e.g., 320px).
Please note that the minimum form width is 320px. This requirement is related to the 3D Secure (3DS) window provided by Visa and Mastercard, and it should be adhered to in order to ensure a secure and proper display of the form during user authentication.
Examples
500px
Description
Customize the resign form elements, such as CVV label and placeholder texts, and decide whether to autofocus the form on show, and more.
Description
If set to true, the resign form will automatically focus on an unfilled form field after the form is rendered.
When the focus of the tab containing a resign form changes, the resign form will refocus on the unfilled field.
Examples
true
Default
true
Description
Override the default text of the submit button.
Example
Pay for the product
Default
not set
Description
Determines whether the submit button is shown and whether it’s possible to submit the card form using the Enter key press or submit button click.
Will override the CVV placeholder on the resign form.
Example
123
Default
not set
Description
Mask the CVV number to be ••• instead of the actual CVV number.
Examples
true
Default
false
Description
Manage the styles of your payment form.
The key is the classname of the corresponding resign form element or container, and the value is its styles object.
Description
Add custom styles to the top-level resign form container, including the submit button.
Tip
Here, you can specify form paddings.
Description
Add custom styles to the resign form content container, including the card brand, masked card number, card brand icon, and input fields.
Tip
Here, you can specify flexbox flow types - columns or rows - to create inlined or columned resign forms.
Description
Add custom styles to resign form content container, including the card brand, card last four numbers, card brand icon, and input fields.
Description
Add custom styles to card brand icon in the resign form associated with a tokenized card.
Description
Add custom styles to resign form unknown card brand icon in case we can’t map the card brand to a known one.
Description
Add custom styles to resign form card preview container that includes the card brand name and the last four numbers associated with the tokenized card.
Description
Add custom styles to last four numbers of the card in the resign form, which are associated with the tokenized card.
Description
Add custom styles to top-level containers of the input fields in the resign form.
Description
Add custom styles to resign form inputs containers that includes inputs itself, errors labels and input labels.
Additionally, this container will have the additional class error when the field has an error, the class not-empty when the field is not empty, and the class valid when the field is filled correctly.
Description
Add custom styles to labels of the input fields in the resign form.
Description
Add custom styles for the resign CVV input group (element with class resign-input-group).
Description
Add custom styles to inputs that can have dotted placeholders, for example, CVV codes
Description
Add custom styles to elements which are tooltip icons.
Description
Add custom styles to elements which are resign tooltips.
In the case of failed initialization, you will receive an error with the following schema:
1
interfaceInitResignErrorextendsError{}
Customization
To tailor your resignation form, implement custom styles within ResignFormConfig.styles. This is done by supplying an object-like structure, where each top-level key corresponds to a form element’s classname, and its value comprises an object with specific styling rules.
The value can include:
classnames, like .error or .not-empty, with each holding a distinct styles object.
CSS selectors, for instance, .error > input, also each possessing a unique styles object.
direct CSS style rule names along with their respective values, such as "color": "purple".
This structure ensures a coherent and logical approach to customizing the resignation form, providing flexibility in styling while maintaining technical accuracy.
The complete list of permitted top-level classnames is provided above in the ResignFormConfigsection.
Note that unknown top-level classnames will be ignored. Refer to the supported list in the ResignFormConfig section for valid classnames.
Be aware that all CSS rules, selectors, and classnames nested within top-level classnames will not undergo validation.
constformConfig={styles:{"resign-input-group":{// top-level classname for an form elements
".valid":{//
"input":{"background-color":"#e2ffe8"}},".error":{"input":{// more fine-grain styling with nesting
"background-color":"#ff8686"}}},"resign-submit-button":{"background-color":"#5b7742"},"resign-cvv":{" input::placeholder":{// pseudo-class selectors
"color":"#000"}}}}
UI flow
A specific parameter to control the UI flow (column or inline) is not provided within ResignFormConfig.
However, the UI flow can be manipulated via the ResignFormConfig.styles object. For instance, setting "flex-direction": "row" for the resign-form-content element alters the default column layout, but this can be counterbalanced by styling additional form elements to achieve the desired appearance.
For those seeking immediate application with minimal customization, two default styling options are available for both column and inline layouts.
The column layout is embedded in the build. To make the form look inline, please include styles from the section below to your ResignFormConfig.styles object.
By default, we provide the most mobile-friendly form layout variant - the column layout - which is also suitable for desktop integrations.
Nothing else is needed.
If you want to set the CVV label to be visible (it is hidden by default), you can add the following styles to your ResignFormConfig.styles
Note that the optimal width for the inline form starts from 500px; it’s better to set this size or higher inside ResignFormConfig.container.width.
Limitations
The complete list of allowed top-level classnames is available in the ResignFormConfig section. Unknown top-level classnames will be ignored.
CSS rules, selectors, and classnames nested within top-level classnames are not subject to validation.
The ResignFormConfig does not inherently control the UI flow (column or inline display). However, you can adjust the UI flow through the ResignFormConfig.styles object.
The default column layout is mobile-friendly and suitable for desktops. For an inline layout, additional styles must be added to the ResignFormConfig.styles object.
The resignation form currently does not support PaymentFormSdk.update and PaymentFormSdk.applyCoupon methods. Attempts to use these will result in errors captured by form.on("error", (err) => { ... }).
Error insights
These insights help merchants understand common issues and optimize their strategies for successful resign transactions, enhancing customer experience and potentially boosting conversion rates.
Top errors for successful resigns:
Errors like
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) and
Guide
The card issuer bank blocked the card for payments.
3.01
(Card is Blocked) are common and relate to incorrect card data entry.
Errors
Guide
3DS URL was not displayed to the cardholder during 3D Secure authentication attempts.
2.10
(Invalid 3DS Flow on Merchant Side),
Guide
The user went through a payment flow, but the bank did not initiate 3DS authorization.
2.11
(Invalid 3DS Flow on Bank Side), and
Guide
Indicates an authentication failure during the 3D Secure process; advise the customer to retry the transaction and check for potential fraud.
5.01
(3D Secure Verification Failed) pertain to issues with 3D Secure authentication.
Enhanced success rate in resigns:
Resigns are frequently successful following a
Guide
The customer’s card balance has insufficient funds.
3.02
(Insufficient Funds) error.
Errors like
Guide
The card has been declined for an unknown reason.
3.08
(Do Not Honor) and
Guide
The issuing bank blocked the transaction due to possible fraud.
3.10
(Suspected fraud) often lead to successful resigns as well.