> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# CC- (credit card data)

> The tags for stored credit card data: manage and delete cards in the customer account and offer them for selection in the checkout process.

Credit card data appears in two places in the shop: in the checkout process, where the buyer selects or enters a card, and in the customer account, where they manage and delete their stored cards.

The tags with the prefix `CC-` serve both places. Which tag is permitted where depends on the template and, for the management template, also on the state.

Guide: Payment method "Credit card"

## The three places

| Place | Template | Task |
| - | - | - |
| Checkout process | Order overview page (`ws_place_order.htm`) | select or enter a card |
| Card management | `ws_creditcard_manage.htm` | view and delete stored cards |
| Customer account | Account overview | entry point to card management |

The management template has two states, and many tags only apply in one of them.

| State | Meaning |
| - | - |
| Overview | the overview of the stored cards |
| ConfirmDelete | the confirmation prompt before a card is deleted |

> [!WARNING]
>
> The shop never stores the complete card number for display. `CC-Number` outputs a masked number in which only some of the digits are visible. A template cannot output the full number, and this is intentional.

## The overview of stored cards

### CC-Overview and CC-Data

`CC-Overview` encloses the overview. `CC-Data` is the loop over the stored cards and, as a single tag, outputs their number.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CC-Overview}
   {CC-Data}
      Sie haben ~CC-Data~ Karten hinterlegt.

      <table>
         {@CC-Data}
            <tr>
               <td>~CC-Position~</td>
               <td>~CC-UserDescr~</td>
               <td>~CC-Type~</td>
               <td>~CC-Number~</td>
               <td>~CC-ExpireMonth~/~CC-ExpireYear~</td>
               <td>
                  <a href="~CC-DeleteCCardConfirm~">löschen</a>
               </td>
            </tr>
         {/@CC-Data}
      </table>
   {/CC-Data}

   {!CC-Data}
      Sie haben noch keine Kreditkarte hinterlegt.
   {/!CC-Data}
{/CC-Overview}
```

### The details of an individual card

| Tag | Returns |
| - | - |
| `CC-Position` | the sequential number within the loop |
| `CC-UserDescr` | the name the buyer has given the card |
| `CC-Type` | the card type in plain text |
| `CC-Number` | the masked card number |
| `CC-ExpireMonth` | the expiry month |
| `CC-ExpireYear` | the expiry year |
| `CC-Holder` | the cardholder |

> [!NOTE]
>
> `CC-UserDescr` is the only detail the buyer assigns themselves, and the most important one for them. Someone who has stored three cards tells them apart by "private" and "company", not by four visible digits. `CC-UserDescr_input` returns the HTML name of the corresponding input field.

### The labels from the shop configuration

For each of these fields there is a variant with the suffix `_text` that outputs the label text stored in the shop configuration.

| Tag | Returns the label for |
| - | - |
| `CC-Holder_text` | `CC-Holder` |
| `CC-Number_text` | `CC-Number` |
| `CC-ExpireMonth_text` | `CC-ExpireMonth` |
| `CC-ExpireYear_text` | `CC-ExpireYear` |
| `CC-Type_text` | `CC-Type` |
| `CC-UserDescr_text` | `CC-UserDescr` |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<tr>
   <th>~CC-Holder_text~</th>
   <td>~CC-Holder~</td>
</tr>
```

> [!NOTE]
>
> Going through the shop configuration pays off in multilingual shops. Otherwise the label is hard-coded in the template and has to be maintained for each language.

## Deleting a card

Two links lead to deletion, and they differ in one important respect.

| Tag | Effect |
| - | - |
| `CC-DeleteCCardConfirm` | leads to the confirmation prompt; the buyer confirms in the ConfirmDelete state |
| `CC-DeleteCCardNoConfirm` | deletes the card immediately |

> [!WARNING]
>
> `CC-DeleteCCardNoConfirm` deletes without a confirmation prompt. Only use it as the confirmation link within the ConfirmDelete state, not in the overview. `CC-DeleteCCardConfirm` belongs in the overview.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CC-ConfirmDelete}
   Möchten Sie die Karte ~CC-UserDescr~ wirklich löschen?

   <a href="~CC-DeleteCCardNoConfirm~">ja, löschen</a>
   <a href="~CC-OverviewLink~">abbrechen</a>
{/CC-ConfirmDelete}
```

> [!NOTE]
>
> `CC-ConfirmDelete` encloses the confirmation prompt and only applies in the ConfirmDelete state. The source notes that this area is intended for operation without JavaScript. With JavaScript in the shop, a dialog in the browser usually handles the confirmation prompt.

> [!NOTE]
>
> `CC-OverviewLink` leads back to the overview and is a pure single tag. All links generated by these tags are complete HTTPS addresses, not relative paths.

## In the checkout process

The order overview page is where it is decided whether the buyer selects a stored card or enters a new one.

| Tag | Meaning |
| - | - |
| `CC-MultipleDataInput` | applies if the input of multiple credit card data records is required |
| `CC-MultipleDataInputSelection` | outputs the selection list of stored cards |
| `CC-CardSelected` | applies if the buyer has chosen a card from the list |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CC-MultipleDataInput}
   ~CC-MultipleDataInputSelection~

   {CC-CardSelected}
      Gewählt: ~CC-UserDescr~, ~CC-Number~
   {/CC-CardSelected}

   {!CC-CardSelected}
      Bitte wählen Sie eine Karte aus.
   {/!CC-CardSelected}
{/CC-MultipleDataInput}
```

> [!NOTE]
>
> `CC-MultipleDataInput` only applies on the order overview page and only if credit card has actually been selected as the payment method. On another page or with a different payment method, the area remains empty, even if cards are stored.

### The two modes

Two tags of the ST prefix indicate whether customer data is stored multiple times at all.

| Tag | Meaning |
| - | - |
| `ST-MultipleData` | the mode for multiple customer data is active |
| `ST-SingleData` | the mode for single customer data is active; the data is not stored |

> [!WARNING]
>
> In ST-SingleData mode, the entered card data is not stored. There is no selection list of stored cards there, and the management page in the customer account is irrelevant.

### The update button

`BT-CCardSelection_OK` returns the name of the button used to update the card selection. As a range tag, it only applies if the buyer is logged in and stored cards are available.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{BT-CCardSelection_OK}
   <noscript>
      <input type="submit" name="~BT-CCardSelection_OK~" value="Auswahl übernehmen">
   </noscript>
{/BT-CCardSelection_OK}
```

> [!NOTE]
>
> The button is the fallback for disabled JavaScript. With JavaScript, the selection list triggers the update itself.

## The selection in detail

In addition to the ready-made selection list from `CC-MultipleDataInputSelection`, there is a tag family with which you build the selection yourself. It is not described in the previous documentation and has been derived here from the shop code.

| Tag | Returns |
| - | - |
| `CC-CCSelection` | applies if stored credit card data is available |
| `CC-CCSelection_input` | the HTML name of the selection field |
| `CC-CCSelection_code` | the technical value of this card |
| `CC-CCSelection_selected` | applies if this card is selected |
| `CC-CCSelection_error` | an error marker if the selection was rejected |

> [!WARNING]
>
> The four suffix tags only work within the positive range `{CC-CCSelection}`. Outside of it, they are invalid. This follows the pattern you know from selecting the bank details.

> [!NOTE]
>
> This information comes from the shop code, not from the previous documentation. Coordinate its use with your WEBSALE contact before you build on it.

## Outsourced credit card payment

### CC-Hosted

Applies if the shop has outsourced credit card payment to a payment service provider. The buyer then enters their card data not in the shop but with the service provider.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CC-Hosted}
   Ihre Kartendaten geben Sie im nächsten Schritt bei unserem Zahlungsdienstleister ein.
{/CC-Hosted}

{!CC-Hosted}
   <!-- Eingabe im Shop -->
{/!CC-Hosted}
```

> [!NOTE]
>
> The range applies to all outsourced procedures the shop knows. Which of them is set up makes no difference to the template.

> [!WARNING]
>
> In the outsourced procedure, the card number and security code are never available to the template. Do not plan your own input form for them; it would not receive any data.

## The notice text and the entry point

| Tag | Purpose | Template |
| - | - | - |
| `MSG-CreditCard_Notify` | notices on credit card entry and management | Card management |
| `WS-CCardManageLink` | link to the overview of stored cards | Customer account |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-CCardManageLink}
   <a href="~WS-CCardManageLink~">Meine Kreditkarten</a>
{/WS-CCardManageLink}
```

> [!NOTE]
>
> As a range tag, `WS-CCardManageLink` only applies if storing credit card data is permitted at all. Enclosing the link is therefore mandatory; otherwise the customer account shows a link to a page without content.

## The tags at a glance

| Tag | Single tag | Range tag | Negative range tag | Loop tag |
| - | - | - | - | - |
| `CC-Data` | yes | yes | yes | yes |
| `CC-Overview` | – | yes | yes | – |
| `CC-OverviewLink` | yes | – | – | – |
| `CC-Position` | yes | – | – | – |
| `CC-UserDescr` | yes | yes | yes | – |
| `CC-UserDescr_input` | yes | yes | yes | – |
| `CC-UserDescr_text` | yes | yes | yes | – |
| `CC-Holder` | yes | yes | yes | – |
| `CC-Holder_text` | yes | yes | yes | – |
| `CC-Number` | yes | yes | yes | – |
| `CC-Number_text` | yes | yes | yes | – |
| `CC-ExpireMonth` | yes | yes | yes | – |
| `CC-ExpireMonth_text` | yes | yes | yes | – |
| `CC-ExpireYear` | yes | yes | yes | – |
| `CC-ExpireYear_text` | yes | yes | yes | – |
| `CC-Type` | yes | yes | yes | – |
| `CC-Type_text` | yes | yes | yes | – |
| `CC-ConfirmDelete` | – | yes | yes | – |
| `CC-DeleteCCardConfirm` | yes | yes | yes | – |
| `CC-DeleteCCardNoConfirm` | yes | yes | yes | – |
| `CC-CardSelected` | – | yes | yes | – |
| `CC-MultipleDataInput` | – | yes | yes | – |
| `CC-MultipleDataInputSelection` | yes | yes | yes | – |
| `CC-Hosted` | – | yes | yes | – |

### Permitted templates and states

| Tag | Permitted in |
| - | - |
| `CC-Data`, `CC-Position`, `CC-DeleteCCardConfirm` | Card management, Overview state |
| `CC-DeleteCCardNoConfirm` | Card management, Overview and ConfirmDelete states |
| `CC-OverviewLink` | Card management, ConfirmDelete state |
| `CC-Overview`, `CC-ConfirmDelete` | Card management |
| `CC-UserDescr`, `CC-Holder`, `CC-Number`, `CC-ExpireMonth`, `CC-ExpireYear`, `CC-Type` including suffixes | Card management, order overview page |
| `CC-Hosted` | Card management, order overview page |
| `CC-CardSelected`, `CC-MultipleDataInput`, `CC-MultipleDataInputSelection` | Order overview page |

## Tags of other prefixes

| Tag | Single tag | Range tag | Negative range tag | Permitted in |
| - | - | - | - | - |
| `BT-CCardSelection_OK` | yes | yes | yes | Order overview page |
| `MSG-CreditCard_Notify` | yes | yes | yes | Card management |
| `ST-MultipleData` | – | yes | yes | Order overview page |
| `ST-SingleData` | – | yes | yes | Order overview page |
| `WS-CCardManageLink` | yes | yes | yes | Customer account |

## Related topics

* Guide: Payment method "Credit card"
* Guide: Offering full-text search for multiple customer data
* Reference: BANK- (Bank data)
* Reference: Buttons of the payment methods


## Related topics

- [Buttons for payment methods](https://dokumentation.websale.de/en/v8s/referenz/tags/bt/zahlungsarten.md)
- [Styles for customer and addresses](https://dokumentation.websale.de/en/v8s/referenz/styles/kunde-und-adressen.md)
- [Data migration](https://dokumentation.websale.de/en/migration/daten-migration.md)
- [$wsAccount - Account & address data](https://dokumentation.websale.de/en/frontend/referenz/module/wsAccount.md)
- [accounts - User accounts](https://dokumentation.websale.de/en/konfiguration/accounts-benutzerkonten.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.