***

title: Update a customer's payment details
icon: money-check
intro: Use Hosted Fields to update a customer's payment details.
published: true
---------------------

For clean Markdown of any page, append .md to the page URL. For a complete documentation index, see https://docs.payroc.com/full-stack-guides/take-payments/hosted-fields/extend-your-integration/llms.txt. For full documentation content, see https://docs.payroc.com/full-stack-guides/take-payments/hosted-fields/extend-your-integration/llms-full.txt.

If a customer uses Hosted Fields to change their payment details, our gateway returns a single-use token that represents the updated payment details. To update the customer’s saved payment details, send the single-use token to our gateway to update the secure token.

You can use a single-use token to update only the payment details linked to a secure token. To update the customer's contact details or the merchant-initiated transaction (MIT) agreement, go to Update a secure token.

## Before you begin

Make sure that you’ve set up your integration to [save payment details](/guides/take-payments/hosted-fields/save-a-customers-payment-details).

### Headers

To create the header of each POST request, you must include the following parameters:

* **Content-Type:** Include application/json as the value for this parameter.
* **Authorization:** Include your Bearer token in this parameter.
* **Idempotency-Key:** Include a UUID v4 to make the request idempotent.

```curl
-H "Content-Type: application/json"
-H "Authorization: <Bearer token>"
-H "Idempotency-Key: <UUID v4>"
```

To create the header of each GET request, include the Authorization header parameter.

```curl
-H "Authorization: <Bearer token>"
```

### Errors

Make sure that your integration can handle errors. If a request is unsuccessful, we return an error that follows the [RFC 7807 format](https://www.rfc-editor.org/rfc/rfc7807). For more information about errors, go to [Errors](/api/errors).

## Integration steps

1. List secure tokens.
2. Generate a session token.
3. Update the JavaScript library.
4. Update the secure token.

## Step 1. List secure tokens

Before you update the customer’s payment details, you need the secureTokenId of the secure token that represents the customer's payments details.

To search for the secureTokenId, use our List Secure Tokens method to view all the secure tokens associated with the processing terminal. You can use query parameters to filter your search, for example, you can filter by the customer’s name or email address.

To view the secure tokens associated with the processing terminal, send a GET request to our Secure Tokens endpoint.

| Endpoint   | Prefix     | URL                                                                                                                                                                                  |
| :--------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Test       | `api.uat.` | [https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens](https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens) |
| Production | `api.`     | [https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens](https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens)         |

### Request parameters

To create your request, use the following parameters:

<EndpointSchemaSnippet endpoint="GET /processing-terminals/{processingTerminalId}/secure-tokens" selector="request" />

### Example request

<EndpointRequestSnippet endpoint="GET /processing-terminals/{processingTerminalId}/secure-tokens" />

### Response fields

If your request is successful, we return a list of secure tokens associated with the processing terminal. The response contains the following fields:

<EndpointSchemaSnippet endpoint="GET /processing-terminals/{processingTerminalId}/secure-tokens" selector="response.body" />

### Example response

<EndpointResponseSnippet endpoint="GET /processing-terminals/{processingTerminalId}/secure-tokens" />

## Step 2. Generate a session token

When you generate the session token, you need to include the secureTokenId of the secure token that you want to update.

To generate a session token, send a POST request to our Processing Terminals endpoint.

| Endpoint   | Prefix     | URL                                                                                                                                                                                                    |
| :--------- | :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Test       | `api.uat.` | [https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/hosted-fields-sessions](https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/hosted-fields-sessions) |
| Production | `api.`     | [https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/hosted-fields-sessions](https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/hosted-fields-sessions)         |

### Request parameters

To create the body of your request, use the following parameters:

<EndpointSchemaSnippet endpoint="POST /processing-terminals/{processingTerminalId}/hosted-fields-sessions" selector="request.body" />

### Example request

<EndpointRequestSnippet endpoint="POST /processing-terminals/{processingTerminalId}/hosted-fields-sessions" />

### Response fields

If your request is successful, our gateway generates a session token. The response contains the following fields:

<EndpointSchemaSnippet endpoint="POST /processing-terminals/{processingTerminalId}/hosted-fields-sessions" selector="response.body" />

### Example response

<EndpointResponseSnippet endpoint="POST /processing-terminals/{processingTerminalId}/hosted-fields-sessions" example="createSessionResponse" />

## Step 3. Update the JavaScript library

In the JavaScript configuration, change the value for the mode parameter from payment to `tokenization`.

<CodeBlocks>
  ```js title="Card"
  <script
    src="https://cdn.uat.payroc.com/js/hosted-fields/hosted-fields-1.7.0.261457.js"
    integrity="sha384-m1A0nfFYa8sAfpDN0d60o4ztd/aCPC2xDVaOT31Urrmn4xypfHqgHQMayZeIK1PM"
    crossorigin="anonymous"
  ></script>

  <script>
    const cardForm = new Payroc.hostedFields({
      sessionToken: YOUR_SESSION_TOKEN,
      mode: "tokenization",
      fields: {
        card: {
          cardholderName: {
            target: ".card-holder-name",
            errorTarget: ".card-holder-name-error",
            placeholder: "Cardholder Name",
          },
          cardNumber: {
            target: ".card-number",
            errorTarget: ".card-number-error",
            placeholder: "1234 5678 1234 1211",
          },
          cvv: {
            wrapperTarget: ".card-cvv-wrapper",
            target: ".card-cvv",
            errorTarget: ".card-cvv-error",
            placeholder: "CVV",
          },
          expiryDate: {
            target: ".card-expiry",
            errorTarget: ".card-expiry-error",
            placeholder: "MM/YY",
          },
          submit: {
            target: ".submit-button",
            value: "Submit",
          },
        },
      },
    });
  </script>
  ```

  ```js title="ACH"
  <script
    src="https://cdn.uat.payroc.com/js/hosted-fields/hosted-fields-1.7.0.261457.js"
    integrity="sha384-m1A0nfFYa8sAfpDN0d60o4ztd/aCPC2xDVaOT31Urrmn4xypfHqgHQMayZeIK1PM"
    crossorigin="anonymous"
  ></script>

  <script>
    const achForm = new Payroc.hostedFields({
      sessionToken: YOUR_SESSION_TOKEN,
      mode: "tokenization",
      fields: {
        ach: {
          nameOnAccount: {
            target: ".ach-account-holder",
            errorTarget: ".ach-account-holder-error",
            placeholder: "Accountholder Name",
          },
          accountType: {
            target: ".ach-account-type",
            errorTarget: ".ach-account-type-error",
          },
          achAccountNumber: {
            target: ".ach-account-number",
            errorTarget: ".ach-account-number-error",
            placeholder: "Account Number",
          },
          routingNumber: {
            target: ".ach-routing-number",
            errorTarget: ".ach-routing-number-error",
            placeholder: "Routing Number",
          },
          submit: {
            target: ".submit-button",
            value: "Submit",
          },
        },
      },
    });
  </script>
  ```

  ```js title="PAD"
  <script
    src="https://cdn.uat.payroc.com/js/hosted-fields/hosted-fields-1.7.0.261457.js"
    integrity="sha384-m1A0nfFYa8sAfpDN0d60o4ztd/aCPC2xDVaOT31Urrmn4xypfHqgHQMayZeIK1PM"
    crossorigin="anonymous"
  ></script>

  <script>
    const padForm = new Payroc.hostedFields({
      sessionToken: YOUR_SESSION_TOKEN,
      mode: "tokenization",
      fields: {
        pad: {
          nameOnAccount: {
            target: ".pad-account-holder",
            errorTarget: ".pad-account-holder-error",
            placeholder: "Accountholder Name",
          },
          padAccountNumber: {
            target: ".pad-account-number",
            errorTarget: ".pad-account-number-error",
            placeholder: "Account Number",
          },
          institutionNumber: {
            target: ".pad-institution-number",
            errorTarget: ".pad-institution-number-error",
            placeholder: "Institution Number",
          },
          transitNumber: {
            target: ".pad-transit-number",
            errorTarget: ".pad-transit-number-error",
            placeholder: "Transit Number",
          },
          submit: {
            target: ".submit-button",
            value: "Submit",
          },
        },
      },
    });
  </script>
  ```
</CodeBlocks>

## Step 4. Update the secure token

After the customer submits their new payment details and you receive the single-use token from the submissionSuccess event, send the single-use token to our gateway to update the secure token.

To send the single-use token to our gateway, send a POST request to our Secure Tokens endpoint.

| Endpoint   | Prefix     | URL                                                                                                                                                                                                                                                  |
| :--------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Test       | `api.uat.` | [https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens/\{secureTokenId}/update-account](https://api.uat.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens/\{secureTokenId}/update-account) |
| Production | `api.`     | [https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens/\{secureTokenId}/update-account](https://api.payroc.com/v1/processing-terminals/\{processingTerminalId}/secure-tokens/\{secureTokenId}/update-account)         |

### Request parameters

To create the body of your request, use the following parameters:

<EndpointSchemaSnippet endpoint="POST /processing-terminals/{processingTerminalId}/secure-tokens/{secureTokenId}/update-account" selector="request.body" />

### Example request

<EndpointRequestSnippet endpoint="POST /processing-terminals/{processingTerminalId}/secure-tokens/{secureTokenId}/update-account" />

### Response fields

If your request is successful, we update the payment details associated with the secure token. The response contains the following fields:

<EndpointSchemaSnippet endpoint="POST /processing-terminals/{processingTerminalId}/secure-tokens/{secureTokenId}/update-account" selector="response.body" />

### Example response

<EndpointResponseSnippet endpoint="POST /processing-terminals/{processingTerminalId}/secure-tokens/{secureTokenId}/update-account" />