> For the complete documentation index, see [llms.txt](https://developer.esw.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.esw.com/salesforce-commerce-cloud/salesforce-commerce-cloud/checkout-integration/stored-payment-cards-integration.md).

# Stored Payment Cards Integration

Allow logged-in shoppers to store and reuse the stored payment cards.

The ESW Stored Payment Cards feature allows logged-in shoppers to securely save their payment card details, enabling a faster and smoother checkout experience on future purchases.

## Key Benefits

* **Accelerated Checkout Experience:** Shoppers can complete purchases quickly using previously saved cards, reducing friction at checkout.
* **Increased Conversion Rates:** Faster checkout is a proven method to boost shopper conversion, leading to higher revenue for retailers.
* **Enhanced Shopper Satisfaction:** Repeat shoppers benefit from a convenient experience, which builds brand loyalty and encourages repeat purchases.
* **Effortless Integration:** This is a plug-and-play feature built on the standard SFCC plugin, requiring minimal integration effort from the retailer.

## How it works

### Stored Payment Cards Integration

Workflow between the ESW-SFCC plugin/cartridge, ESW Checkout, and ESW Payments

<div data-with-frame="true"><img src="/files/21b8b3d389bb3ced32666d2bc416cbc7d375b55b" alt=""></div>

## Workflow Assumptions

The Stored Payment Cards feature operates under the following conditions:

* The shopper is already logged in to their account.
* The checkout process is executed in a secure (HTTPS) context.
* Both the retailer’s site and the ESW checkout are hosted under the same top-level domain (TLD) to ensure secure and seamless card storage and retrieval.

### Stored Payment Cards – Shopper Workflow

#### Shopper Adds Item to Cart

* The shopper adds a product to the cart and clicks the **Checkout** button.

#### Authentication Check

* If the shopper is not already logged in, they are presented with:
  * **Forced Login**, or
  * **Guest Checkout** (if enabled)

Note: Stored card functionality is only available to **logged-in shoppers**.

#### Order Creation in SFCC

* After login, the **ESW SFCC Plugin** creates a new order in SFCC.
* The order status is set to `Created`.

#### Pre-Order Request Assembly

* The plugin extracts the `registeredProfileId` and builds the **pre-order payload**.
* This payload is submitted to the **ESW Checkout API** to initiate the ESW checkout experience.

#### ESW Checkout API Response

* On success, the response returns:
  * A **Checkout URL** for shopper redirection.
  * A **shopper access token** (`shopperAccessToken`) to be stored as a browser cookie using the key:

    **`esw-shopper-access-token`**

#### Handling the Access Token in SFCC

* The plugin checks for the access token:
  * If present, it sets a **browser cookie** using the domain from the **ESW Top-Level Domain** preference.
  * If absent, the shopper is still redirected to the ESW Checkout URL.

#### ESW Checkout – Payment Panel Logic

* On reaching the **Payment Panel**, the ESW Checkout:
  * Reads the `esw-shopper-access-token` from the cookie.
  * Validates the token.
  * Makes a **server-to-server call** to the ESW Payment API to fetch stored cards.

#### Stored Card Selection

* If valid stored cards are returned:
  * The shopper sees a **dropdown menu** listing their saved payment methods.
  * The shopper can select a card and proceed to **complete the checkout**.

## Cookie Details – ESW-shopper-access-token

The ESW-shopper-access-token cookie is required to authenticate the shopper and enable the stored payment card feature on ESW Checkout.

### Cookie Attributes

| Attribute   | Description                                                          |
| ----------- | -------------------------------------------------------------------- |
| **Name**    | `esw-shopper-access-token`                                           |
| **Max-Age** | Inherits from the SFCC platform’s native session expiration settings |
| **Domain**  | `{your checkout domain}` (e.g. `mycheckoutdomain.com`)               |
| **Secure**  | `true` (must be set for HTTPS usage)                                 |

The domain can be configured using Business Manager → ESW Checkout Configuration → ESW Top Level Domain

### Sample HTTP Header

```pgsql
Set-Cookie: esw-shopper-access-token=abcdef; Secure; Domain=mycheckoutdomain.com; Max-Age=3600
```

## Cookie Creation Strategy

### Non-Headless Architecture (SFRA / SiteGenesis)

The cookie is automatically created by the ESW SFCC plugin during checkout flow.

### Headless Architecture

Headless storefront developers must manually implement cookie creation on the client side, using the values specified above.

> The ESW SFCC plugin cannot control client-side cookie creation in headless environments.

## First-time and Repeat Shopper Experience

First-time shoppers are prompted to save the cards for later use

### First-time experience

First-time shoppers are prompted to save the cards for later use

<div data-with-frame="true"><img src="/files/630c2b39058a4b0a603f8be02639aaf3c6ed367e" alt=""></div>

### Repeat experience

Returning shoppers are presented with saved cards

<div data-with-frame="true"><img src="/files/1ac130a899513fbf285e230dd519a36a52b842b8" alt=""></div>

## Options for Testing in Sandbox and Staging Environment

To test the Stored Payment Cards feature in a sandbox or staging environment, you have two options

### Matching Top-Level Domains

Ensure that the top-level domain is the same for both the SFCC testing instance and the ESW Checkout. This allows the esw-shopper-access-token cookie to be set and read correctly, enabling the stored cards feature without additional configuration.

### Manually Set Cookie (Mismatched Domains)

If the top-level domains differ between your SFCC instance and the ESW Checkout (e.g., .sfccsandbox.com vs. .eswcheckout.com), the cookie must be added manually for testing.

## Steps to Test with Manual Cookie Setup

Use the following steps when testing the Stored Payment Cards feature in a sandbox environment where top-level domains differ between SFCC and ESW Checkout:

{% stepper %}
{% step %}

#### Verify Cookie Creation in SFCC Domain

* Begin the checkout process as a **logged-in shopper**.
* After initiating checkout, open **Developer Tools** in your browser.
* Navigate to: Application → Storage → Cookies
* Confirm that the cookie **`esw-shopper-access-token`** has been created under your SFCC top-level domain.

Domain: `zyfl-001.dx.commercecloud.salesforce.com`
{% endstep %}

{% step %}

### Redirect to ESW Checkout

* Continue the checkout flow until the shopper is redirected to the **ESW Checkout** page.
  {% endstep %}

{% step %}

#### Manually Update Cookie Domain

* In **Developer Tools**, go to: Application → Storage → Cookies
* Locate and **copy** the `esw-shopper-access-token` value from the SFCC domain.
* Create a new cookie entry for the ESW Checkout domain (e.g., `.eshopworld.com`) using the following fields:

| **Field**     | **Value**                       |
| ------------- | ------------------------------- |
| **Name**      | `esw-shopper-access-token`      |
| **Value**     | *(paste the copied token)*      |
| **Domain**    | `.eshopworld.com`               |
| **Secure**    | `true`                          |
| **Max-Age**   | `3600` *(1 hour, or as needed)* |
| {% endstep %} |                                 |

{% step %}

#### Refresh the ESW Checkout Page

* Reload the **ESW Checkout** page in the browser.
* The **Stored Cards** payment option should now appear and be available for selection.

This manual setup is only needed for mismatched domains in non-production environments.
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.esw.com/salesforce-commerce-cloud/salesforce-commerce-cloud/checkout-integration/stored-payment-cards-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.