---
title: SaveCard Request
slug: savecard-request
docTags:
createdAt: 2024-08-19T12:39:03.088Z
---
# 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](docId\:vOoL6A4NSy9S0gyJpmBst) functionality.
### Prerequisites
- Make sure you are using Web SDK Version **0.0.43** (or higher).
- Make sure you have implemented the following:
- From the **Web SDK integration** guide, you have completed the following:
- [Step One: Create a paymentSession](docId:40dWE6LBub7vdKza1QYDC)
- You do not need to include the amount or currency fields in your request body.
- [Step Two: Add the Payment Form to your Website](docId:40dWE6LBub7vdKza1QYDC)
***
## Step One: Making a Save Card Request
1. Define the** saveCardConfiguration** object.
:::hint{type="info"}
Ensure the details used when creating the **paymentSession **match the values set in the **saveCardConfiguration **object.
:::
:::CodeblockTabs
Save Card Configuration Object
```json
const saveCardConfiguration = {
judoId: "yourJudoId",
yourConsumerReference: "yourConsumerReference",
currency: "GBP"
billingAddress: {
address1: "My house",
address2: "My street",
town: "My town",
state: "My state", //Mandatory for US and Canada
postCode: "TR14 8PA",
cardHolderName: "Consumer Name",
country: "826"
}
}
```
:::
See below for more details on the parameters that create the **saveCardConfiguration **object:
:::hint{type="warning"}
**\*Mastercard Recommends:**
These fields are recommended rather than mandatory. Transactions will continue to be processed if not supplied.
See, [Mastercard Recommended 3D Secure 2 Fields](docId\:WpFMF662qaIGEGrpU_Mow).
:::
| 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 Recommended * | 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` (Recommended)*
* `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](docId\:XZE369mFK5UVOSaNzM8UO) 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**.
:::CodeblockTabs
Invoke Save Card Call
```json
function handleSaveCardButtonClick() {
judo.invokeSaveCard(paymentSession, saveCardConfiguration)
.then(handleSuccess)
.catch(handleError)
}
```
:::
3\. To call the **invokeSaveCard **function (in step 2 above) to make the Save Card request,
add the **onclick **attribute to the payment 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
Once the Save Card request is complete you will receive either:
**Fulfilled**
- You will receive a JSON object response (a Judopay receipt object).
- For more information and schema on the JSON object, see [API Transaction Response](https://docs.judopay.com/api-reference/index.html#/Payments/post_transactions_payments).
- Depending on the result the consumer should be redirected to the appropriate outcome page.
- For example, if the result = SUCCESS redirect the consumer to the Success Page.
- This page should display the necessary transaction information (found in the Judopay receipt object).
**Rejected**
- You will receive an error object
- For more information on error responses returned, see [Web SDK Error Responses](docId\:qfxaWPAQl_-2EVfP8y94d).
- The consumer should be redirected to an Error Page.
:::CodeblockTabs
Save Card Response Example
```json
const handleSuccess = (response) => {
//If the save card request was successful:
//If the result value in the response object is 'Success', you could store the card token.
//The card token can be used in the future for Token Payments
}
const handleError = (error) => {
//Inform the user that their card could not be saved.
}
```
:::
For more information on the response codes, see [Codes](docId:_zrsihomUEW-XnRQ4PBtJ).