Skip to main content

Integration Details

Submitting the payment details​

To tokenize the payment details collected in the secure fields, you can use the submit method provided by the SecureFields SDK instance. This method will validate the form and, if valid, will return a token that can be used for processing the payment.

You need to pass the following parameters to the submit method:

  • expiryMonth: The expiration month of the card as entered in your custom input field.
  • expiryYear: The expiration year of the card as entered in your custom input field.
  • cardHolderName: The name of the cardholder as entered in your custom input field.
  • selectedNetwork: The selected card network (e.g., VISA, MASTERCARD) as chosen by the user.
  • saveToken: A boolean indicating whether to save the token for future use.
 const result = await hostedFields.submit({
     expiryMonth: 12,
     expiryYear: 25,
     cardHolderName: 'Joe Dawn',
     selectedNetwork: 'VISA',  
     saveToken: false
  });

Collecting non-sensitive card data​

You are responsible for collecting non-sensitive card details, such as the cardholder name and expiration date. Provide these values to the submit method.

Card brand selection​

Purse does not enforce how you display card brand selection in your checkout. Use the selectedNetwork parameter to pass the chosen brand to the submit method. You can also subscribe to the brandDetected event to automatically receive the detected card brand.

3DS authentication​

In case of 3DS authentication, the browser information must be provided in the payment creation request. It is mandatory to provide these details to ensure compliance with 3DS protocols and to facilitate a smooth authentication process.

{
    "user_agent": "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0",
    "referrer": "https://your_shop.com/order?id=1234",
    "accept_header": "text/html",
    "color_depth": 32,
    "java_enabled": true,
    "javascript_enabled": true,
    "locale": "fra",
    "screen_height": 1200,
    "screen_width": 1600,
    "utc_time_zone": 60
}