Web
...
Web Integrations
Web SDK

SaveCard Request

Creating a SaveCard Request with the Web SDK

If you do not want to perform a pre-authorisation check on a customer's account, use this call to tokenise the card information into an encrypted string.

Do you have a stored card wallet for existing customers? If validation is successful, a card token is returned as part of the response object.

This token can then be stored and used for a payments / preauths request in the future, using the Web SDK’s Token Payment functionality.

Prerequisites



Step One: Making a Save Card Request

  1. Define the saveCardConfiguration object.

Ensure the details used when creating the paymentSession match the values set in the saveCardConfiguration object.

Save Card Configuration Object


See below for more details on the parameters that create the saveCardConfiguration object:

Parameter

Description

judoId String Required

Unique ID supplied by Judopay.

Specific to a merchant and/or location.

Format:

  • 100100100
  • Maximum length 9 characters.
  • Do not include spaces or dashes.

yourConsumerReference String Required

Unique reference to anonymously identify your customer.

Advisable to use GUIDs.

Must be below 40 characters.

currency String Optional





The currency of the transaction.

Any ISO 4217 alphabetic currency code:

  • GBP
  • USD
  • EUR

cardHolderName String Optional

The card name of the consumer

If the cardHolderName field is displayed to the user in the payment form (isCardHolderNameVisible: true is set in the iFrame config), the value entered in the payment form will overwrite this value.

billingAddress Object Optional





Card holder's billing address.

Properties:

  • address1
  • address2 (optional)
  • town
  • state(only required if country is USA/Canada)
    • Format:
      • string
      • ISO Alpha-2 Code (e.g. California = "CA")
  • country
    • Format:
      • string
      • See here for the list of valid ISO 3166-1 format country codes.
  • postCode

If the billingAddress is provided, the postcode is required.

2. In a function, add the invokeSaveCard call. This will make a Save Card request using the paymentSession and saveCardConfiguration.

Invoke Save Card Call


3. To call the invokeSaveCard function (in step 2 above) to make the Save Card request, add the onclick attribute to the payment button <div>: <button id="submit-payment-button" onclick="handleSaveCardButtonClick()"> Save Card</button>

This is the same button that is used for payments, however you can update the button label to reflect it’s functionality. For example: Save Card instead of Pay Now.



Step Two: Handle the Response