> ## 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- (Kreditkartendaten)

> Die Tags für gespeicherte Kreditkartendaten: die Karten im Kundenkonto verwalten, löschen und im Bestellprozess zur Auswahl anbieten.

Kreditkartendaten tauchen im Shop an zwei Stellen auf: im Bestellprozess, wo der Käufer eine Karte auswählt oder eingibt, und im Kundenkonto, wo er seine gespeicherten Karten verwaltet und löscht.

Die Tags mit dem Präfix `CC-` bedienen beide Stellen. Welches Tag wo zulässig ist, entscheidet sich am Template und, beim Verwaltungs-Template, zusätzlich am Zustand.

Wegweiser: Zahlungsart "Kreditkarte"

## Die drei Orte

| Ort | Template | Aufgabe |
| - | - | - |
| Bestellprozess | Bestellübersichtsseite (`ws_place_order.htm`) | Karte auswählen oder eingeben |
| Kartenverwaltung | `ws_creditcard_manage.htm` | gespeicherte Karten ansehen und löschen |
| Kundenkonto | Kontoübersicht | Einstieg in die Kartenverwaltung |

Das Verwaltungs-Template kennt zwei Zustände, und viele Tags gelten nur in einem davon.

| Zustand | Bedeutung |
| - | - |
| Overview | die Übersicht über die gespeicherten Karten |
| ConfirmDelete | die Rückfrage vor dem Löschen einer Karte |

> [!WARNING]
>
> Der Shop speichert nie die vollständige Kartennummer für die Anzeige. `CC-Number` gibt eine maskierte Nummer aus, bei der nur ein Teil der Ziffern sichtbar ist. Ein Template kann die volle Nummer nicht ausgeben, und das ist Absicht.

## Die Übersicht der gespeicherten Karten

### CC-Overview und CC-Data

`CC-Overview` klammert die Übersicht. `CC-Data` ist die Schleife über die gespeicherten Karten und gibt als Einzel-Tag deren Anzahl aus.

```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}
```

### Die Angaben zur einzelnen Karte

| Tag | Liefert |
| - | - |
| `CC-Position` | die laufende Nummer innerhalb der Schleife |
| `CC-UserDescr` | die Bezeichnung, die der Käufer der Karte gegeben hat |
| `CC-Type` | den Kartentyp im Klartext |
| `CC-Number` | die maskierte Kartennummer |
| `CC-ExpireMonth` | den Verfallsmonat |
| `CC-ExpireYear` | das Verfallsjahr |
| `CC-Holder` | den Karteninhaber |

`CC-UserDescr` ist die einzige Angabe, die der Käufer selbst vergibt, und für ihn die wichtigste. Wer drei Karten hinterlegt hat, unterscheidet sie an "privat" und "Firma" und nicht an vier sichtbaren Ziffern. `CC-UserDescr_input` liefert den HTML-Namen des zugehörigen Eingabefeldes.

### Die Beschriftungen aus der Shopkonfiguration

Zu jedem dieser Felder gibt es eine Variante mit dem Zusatz `_text`, die den in der Shopkonfiguration hinterlegten Beschriftungstext ausgibt.

| Tag | Liefert die Beschriftung zu |
| - | - |
| `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>
```

Der Umweg über die Shopkonfiguration lohnt sich bei mehrsprachigen Shops. Sonst steht die Beschriftung fest im Template und muss je Sprache gepflegt werden.

## Eine Karte löschen

Zwei Links führen zum Löschen, und sie unterscheiden sich in einem wichtigen Punkt.

| Tag | Wirkung |
| - | - |
| `CC-DeleteCCardConfirm` | führt zur Rückfrage, der Käufer bestätigt im Zustand ConfirmDelete |
| `CC-DeleteCCardNoConfirm` | löscht die Karte sofort |

> [!WARNING]
>
> `CC-DeleteCCardNoConfirm` löscht ohne Rückfrage. Verwenden Sie es nur als Bestätigungslink innerhalb des Zustands ConfirmDelete, nicht in der Übersicht. In der Übersicht gehört `CC-DeleteCCardConfirm` hin.

```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}
```

`CC-ConfirmDelete` klammert die Rückfrage und greift nur im Zustand ConfirmDelete. Die Quelle weist darauf hin, dass dieser Bereich für den Betrieb ohne JavaScript gedacht ist. Mit JavaScript im Shop übernimmt üblicherweise ein Dialog im Browser die Rückfrage.

`CC-OverviewLink` führt zurück zur Übersicht und ist ein reines Einzel-Tag. Alle von diesen Tags erzeugten Links sind vollständige Adressen über HTTPS, keine relativen Pfade.

## Im Bestellprozess

Auf der Bestellübersichtsseite entscheidet sich, ob der Käufer eine gespeicherte Karte auswählt oder eine neue eingibt.

| Tag | Bedeutung |
| - | - |
| `CC-MultipleDataInput` | greift, wenn die Eingabe mehrerer Kreditkartendaten gebraucht wird |
| `CC-MultipleDataInputSelection` | gibt die Auswahlliste der gespeicherten Karten aus |
| `CC-CardSelected` | greift, wenn der Käufer eine Karte aus der Liste gewählt hat |

```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}
```

`CC-MultipleDataInput` greift nur auf der Bestellübersichtsseite und nur, wenn als Zahlungsart tatsächlich Kreditkarte gewählt ist. Auf einer anderen Seite oder bei einer anderen Zahlungsart bleibt der Bereich leer, auch wenn Karten gespeichert sind.

### Die beiden Modi

Ob Kundendaten überhaupt mehrfach gespeichert werden, sagen zwei Tags des ST-Präfixes.

| Tag | Bedeutung |
| - | - |
| `ST-MultipleData` | der Modus für multiple Kundendaten ist aktiv |
| `ST-SingleData` | der Modus für einzelne Kundendaten ist aktiv, die Daten werden nicht gespeichert |

> [!WARNING]
>
> Im Modus ST-SingleData werden die eingegebenen Kartendaten nicht gespeichert. Eine Auswahlliste gespeicherter Karten gibt es dort nicht, und die Verwaltungsseite im Kundenkonto ist gegenstandslos.

### Die Schaltfläche zur Aktualisierung

[`BT-CCardSelection_OK`](https://dokumentation.websale.de/v8s/referenz/tags/bt/zahlungsarten#die-tags-im-uberblick) liefert den Namen der Schaltfläche, mit der die Kartenauswahl aktualisiert wird. Als Bereichs-Tag greift sie nur, wenn der Käufer angemeldet ist und gespeicherte Karten vorliegen.

```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}
```

Die Schaltfläche ist der Rückfallweg für abgeschaltetes JavaScript. Mit JavaScript löst die Auswahlliste die Aktualisierung selbst aus.

## Die Auswahl im Einzelnen

Neben der fertigen Auswahlliste aus `CC-MultipleDataInputSelection` gibt es eine Tag-Familie, mit der Sie die Auswahl selbst aufbauen.

| Tag | Liefert |
| - | - |
| `CC-CCSelection` | greift, wenn gespeicherte Kreditkartendaten vorliegen |
| `CC-CCSelection_input` | den HTML-Namen des Auswahlfeldes |
| `CC-CCSelection_code` | den technischen Wert dieser Karte |
| `CC-CCSelection_selected` | greift, wenn diese Karte gewählt ist |
| `CC-CCSelection_error` | eine Fehlerkennzeichnung, wenn die Auswahl beanstandet wurde |

> [!WARNING]
>
> Die vier Suffix-Tags funktionieren ausschließlich innerhalb des positiven Bereichs `{CC-CCSelection}`. Außerhalb sind sie ungültig. Das entspricht dem Muster, das Sie von der Auswahl der Bankverbindung kennen.

Stimmen Sie den Einsatz mit Ihrem WEBSALE-Ansprechpartner ab, bevor Sie darauf aufbauen.

## Ausgelagerte Kreditkartenzahlung

### CC-Hosted

Greift, wenn der Shop die Kreditkartenzahlung an einen Zahlungsdienstleister ausgelagert hat. Der Käufer gibt seine Kartendaten dann nicht im Shop ein, sondern beim Dienstleister.

```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}
```

Der Bereich greift bei allen ausgelagerten Verfahren, die der Shop kennt. Welches davon eingerichtet ist, spielt für das Template keine Rolle.

> [!WARNING]
>
> Im ausgelagerten Verfahren stehen Kartennummer und Prüfziffer dem Template zu keinem Zeitpunkt zur Verfügung. Planen Sie keine eigene Eingabemaske dafür, sie bekäme keine Daten.

## Der Hinweistext und der Einstieg

| Tag | Zweck | Template |
| - | - | - |
| `MSG-CreditCard_Notify` | Hinweise zur Kreditkarteneingabe und -verwaltung | Kartenverwaltung |
| `WS-CCardManageLink` | Link zur Übersicht der gespeicherten Karten | Kundenkonto |

```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}
```

Als Bereichs-Tag greift `WS-CCardManageLink` nur, wenn das Speichern von Kreditkartendaten überhaupt erlaubt ist. Die Klammerung ist deshalb Pflicht, sonst steht im Kundenkonto ein Link auf eine Seite ohne Inhalt.

## Die Tags im Überblick

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Schleifen-Tag |
| - | - | - | - | - |
| `CC-Data` | ja | ja | ja | ja |
| `CC-Overview` | – | ja | ja | – |
| `CC-OverviewLink` | ja | – | – | – |
| `CC-Position` | ja | – | – | – |
| `CC-UserDescr` | ja | ja | ja | – |
| `CC-UserDescr_input` | ja | ja | ja | – |
| `CC-UserDescr_text` | ja | ja | ja | – |
| `CC-Holder` | ja | ja | ja | – |
| `CC-Holder_text` | ja | ja | ja | – |
| `CC-Number` | ja | ja | ja | – |
| `CC-Number_text` | ja | ja | ja | – |
| `CC-ExpireMonth` | ja | ja | ja | – |
| `CC-ExpireMonth_text` | ja | ja | ja | – |
| `CC-ExpireYear` | ja | ja | ja | – |
| `CC-ExpireYear_text` | ja | ja | ja | – |
| `CC-Type` | ja | ja | ja | – |
| `CC-Type_text` | ja | ja | ja | – |
| `CC-ConfirmDelete` | – | ja | ja | – |
| `CC-DeleteCCardConfirm` | ja | ja | ja | – |
| `CC-DeleteCCardNoConfirm` | ja | ja | ja | – |
| `CC-CardSelected` | – | ja | ja | – |
| `CC-MultipleDataInput` | – | ja | ja | – |
| `CC-MultipleDataInputSelection` | ja | ja | ja | – |
| `CC-Hosted` | – | ja | ja | – |

### Zulässige Templates und Zustände

| Tag | Zulässig |
| - | - |
| `CC-Data`, `CC-Position`, `CC-DeleteCCardConfirm` | Kartenverwaltung, Zustand Overview |
| `CC-DeleteCCardNoConfirm` | Kartenverwaltung, Zustände Overview und ConfirmDelete |
| `CC-OverviewLink` | Kartenverwaltung, Zustand ConfirmDelete |
| `CC-Overview`, `CC-ConfirmDelete` | Kartenverwaltung |
| `CC-UserDescr`, `CC-Holder`, `CC-Number`, `CC-ExpireMonth`, `CC-ExpireYear`, `CC-Type` samt Zusätzen | Kartenverwaltung, Bestellübersichtsseite |
| `CC-Hosted` | Kartenverwaltung, Bestellübersichtsseite |
| `CC-CardSelected`, `CC-MultipleDataInput`, `CC-MultipleDataInputSelection` | Bestellübersichtsseite |

## Tags anderer Präfixe

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Zulässig |
| - | - | - | - | - |
| `BT-CCardSelection_OK` | ja | ja | ja | Bestellübersichtsseite |
| `MSG-CreditCard_Notify` | ja | ja | ja | Kartenverwaltung |
| `ST-MultipleData` | – | ja | ja | Bestellübersichtsseite |
| `ST-SingleData` | – | ja | ja | Bestellübersichtsseite |
| `WS-CCardManageLink` | ja | ja | ja | Kundenkonto |

## Verwandte Themen

* Wegweiser: Zahlungsart "Kreditkarte"
* Wegweiser: [Volltextsuche für multiple Kundendaten anbieten](https://dokumentation.websale.de/v8s/kundenkonto/volltextsuche-fuer-kundendaten-anbieten.md)
* Referenz: [BANK- (Bankdaten)](https://dokumentation.websale.de/v8s/referenz/tags/bank.md)
* Referenz: [Schaltflächen der Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/tags/bt/zahlungsarten.md)


## Related topics

- [Schaltflächen der Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/tags/bt/zahlungsarten.md)
- [Volltextsuche für Kundendaten anbieten](https://dokumentation.websale.de/v8s/kundenkonto/volltextsuche-fuer-kundendaten-anbieten.md)
- [FORM- (Formulare)](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md)
- [Styles für Kunde und Adressen](https://dokumentation.websale.de/v8s/referenz/styles/kunde-und-adressen.md)
- [accounts - Benutzerkonten](https://dokumentation.websale.de/konfiguration/accounts-benutzerkonten.md)


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