> ## 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.

# $wsComputopHosted - Computop (gehostete Bezahlseite)

> Daten für die Weiterleitung zur gehosteten Computop-Bezahlseite bereitstellen und Rückkehr sowie Zahlungsergebnis im Frontend auswerten.

Mit dem `$wsComputopHosted`-Modul wickeln Sie Zahlungen über die gehostete Computop-Bezahlseite ab. Das Modul liefert alle Daten, die Sie brauchen, um den Kunden per Formular zur Computop-Bezahlseite weiterzuleiten, und meldet nach der Rückkehr, ob die Zahlung erfolgreich war.

Auf dieser Seite geht es um das Bereitstellen der Formulardaten und das Auswerten des Ergebnisses. Die eigentliche Zahlungsabwicklung läuft auf der Computop-Seite, die Konfiguration der Schnittstelle (Händler-ID, Schlüssel) erfolgt in der Zahlungs-Konfiguration.

***

## Grundkonzept

Bei einer gehosteten Bezahlseite findet die Zahlung nicht im Shop statt, sondern auf einer Seite des Zahlungsdienstleisters. `$wsComputopHosted` liefert die Daten, mit denen Sie den Kunden dorthin weiterleiten.

Der Ablauf ist immer derselbe: Formular bauen → absenden → Computop wickelt ab → Rückkehr auswerten.

1. Sie bauen ein HTML-Formular, dessen `action` auf [`$wsComputopHosted.action`](#wscomputophosted-action) zeigt, und legen die übrigen Werte (`data`, `len`, `merchantID`, `encryptionType` …) als versteckte Felder ab.
2. Der Kunde sendet das Formular ab und gelangt auf die Computop-Bezahlseite.
3. Computop wickelt die Zahlung ab und leitet den Kunden zurück in den Shop.
4. Nach der Rückkehr werten Sie [`paymentCanceled`](#wscomputophosted-paymentcanceled), [`paymentFailed`](#wscomputophosted-paymentfailed) und [`error`](#wscomputophosted-error) aus, um dem Kunden eine passende Rückmeldung zu geben.

### Verschlüsselte Daten unverändert durchreichen

Die Felder `data`, `len` und `encryptionType` bilden die verschlüsselten Zahlungsdaten. Sie berechnen daran nichts selbst und verändern sie nicht, sie reichen die Werte unverändert an Computop weiter.

***

## Modulübersicht

**Beispiel / Ausschnitt über** `$wsComputopHosted`

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{= $wsComputopHosted | json }}
```

**JSON-Ausgabe**

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "action": "",
  "data": "",
  "encryptionType": "AES",
  "error": "",
  "freeFields": [],
  "language": "",
  "len": "0",
  "merchantID": "",
  "payType": "",
  "paymentCanceled": false,
  "paymentFailed": false,
  "template": ""
}
```

**Anmerkung:** Konditionale Variablen erscheinen nur, wenn sie gesetzt sind: `hideSave`, `prefill` sowie die Daten einer gespeicherten Kreditkarte (`PCNr`, `PCNrBrand`, `PCNrYear`, `PCNrMonth`, `holder`).

**Variablen zum Aufbau des Formulars**

| **Variable**     | **Typ** | **Beschreibung**                                                                              |
| ---------------- | ------- | --------------------------------------------------------------------------------------------- |
| `action`         | string  | URL der Computop-Bezahlseite (als `action` des Formulars).                                    |
| `data`           | string  | Verschlüsselte Zahlungsdaten.                                                                 |
| `len`            | string  | Länge der verschlüsselten Daten (zur Prüfung bei Computop).                                   |
| `encryptionType` | string  | Verschlüsselungstyp: `"Blowfish"` oder `"AES"`.                                               |
| `merchantID`     | string  | Händler-ID bei Computop.                                                                      |
| `payType`        | string  | Zahlungsart (z. B. Kreditkarte).                                                              |
| `language`       | string  | Sprachcode für die Bezahlseite (z. B. `"de"`).                                                |
| `template`       | string  | Name des Computop-Templates.                                                                  |
| `hideSave`       | string  | Enthält `"hideSave"`, wenn die Speichern-Option ausgeblendet werden soll. Nur dann vorhanden. |
| `prefill`        | string  | Enthält `"on"`, wenn die Speichern-Option vorbelegt (angehakt) sein soll. Nur dann vorhanden. |
| `freeFields`     | array   | Freie Checkout-Felder, die an Computop übermittelt werden (Struktur siehe unten).             |

**Variablen einer gespeicherten Kreditkarte** (nur vorhanden, wenn eine gespeicherte Pseudo-Kreditkarte gewählt ist)

| **Variable** | **Typ** | **Beschreibung**                                     |
| ------------ | ------- | ---------------------------------------------------- |
| `PCNr`       | string  | Pseudo-Kartennummer (Token) der gespeicherten Karte. |
| `PCNrBrand`  | string  | Kartenmarke (z. B. Visa).                            |
| `PCNrYear`   | string  | Ablaufjahr der Karte.                                |
| `PCNrMonth`  | string  | Ablaufmonat der Karte.                               |
| `holder`     | string  | Karteninhaber.                                       |

**Variablen zum Auswerten des Ergebnisses**

| **Variable**      | **Typ** | **Beschreibung**                             |
| ----------------- | ------- | -------------------------------------------- |
| `paymentCanceled` | bool    | `true`, wenn die Zahlung abgebrochen wurde.  |
| `paymentFailed`   | bool    | `true`, wenn die Zahlung fehlgeschlagen ist. |
| `error`           | string  | Fehlermeldung bei einem Zahlungsproblem.     |

***

## Templates

Das Weiterleitungsformular wird typischerweise im Checkout eingebunden, also auf der Seite, von der aus der Kunde zur Zahlung weitergeleitet wird. Die Ergebnis-Variablen werten Sie auf der Seite aus, auf die Computop nach der Zahlung zurückleitet.

***

## Variablen

### \$wsComputopHosted.action

Gibt die URL der Computop-Bezahlseite aus. Sie verwenden sie als `action`-Attribut des Formulars, mit dem der Kunde zur Zahlung weitergeleitet wird.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form method="post" action="{{= $wsComputopHosted.action }}">
  ...
</form>
```

### \$wsComputopHosted.data

Gibt die verschlüsselten Zahlungsdaten aus. Sie übermitteln sie als verstecktes Formularfeld – unverändert (siehe [Grundkonzept](#verschlüsselte-daten-unverändert-durchreichen)).

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="hidden" name="Data" value="{{= $wsComputopHosted.data }}">
```

### \$wsComputopHosted.len

Gibt die Länge der verschlüsselten Daten aus. Computop benötigt diesen Wert, um die übermittelten Daten zu prüfen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="hidden" name="Len" value="{{= $wsComputopHosted.len }}">
```

### \$wsComputopHosted.encryptionType

Gibt den Verschlüsselungstyp aus, mit dem `data` verschlüsselt wurde: `"Blowfish"` oder `"AES"` - je nachdem, was in der Computop-Konfiguration eingestellt ist (Standard: Blowfish).

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Verschlüsselung: {{= $wsComputopHosted.encryptionType }}
```

### \$wsComputopHosted.merchantID

Gibt die Händler-ID bei Computop aus. Sie wird mit dem Formular übermittelt, damit Computop die Zahlung dem richtigen Händlerkonto zuordnet.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="hidden" name="MerchantID" value="{{= $wsComputopHosted.merchantID }}">
```

### \$wsComputopHosted.payType

Gibt die Zahlungsart aus (z. B. Kreditkarte).

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Zahlungsart: {{= $wsComputopHosted.payType }}
```

### \$wsComputopHosted.language

Gibt den Sprachcode für die Bezahlseite aus. Damit erscheint die Computop-Seite in der Sprache des Kunden.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Sprache: {{= $wsComputopHosted.language }}
```

### \$wsComputopHosted.template

Gibt den Namen des verwendeten Computop-Templates aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Template: {{= $wsComputopHosted.template }}
```

### \$wsComputopHosted.hideSave

Gibt den Wert zur Steuerung der Speichern-Option auf der Computop-Bezahlseite aus. Die Variable enthält den Text `"hideSave"` und ist **nur vorhanden, wenn die Option ausgeblendet werden soll** - in zwei Fällen:

* Der Kunde bezahlt mit einer bereits gespeicherten Kreditkarte (siehe [`PCNr`](#wscomputophosted-pcnr-pcnrbrand-pcnryear-pcnrmonth-holder)) - erneutes Speichern ist dann überflüssig.
* Das Speichern ist nicht möglich, weil der Kunde nicht eingeloggt ist oder das Speichern von Pseudo-Kreditkartendaten für den Shop nicht aktiviert ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.hideSave }}
  <!-- Speichern-Option ausblenden -->
{{ /if }}
```

### \$wsComputopHosted.prefill

Enthält den Wert `"on"`, wenn die Speichern-Option auf der Computop-Bezahlseite standardmäßig angehakt sein soll (in der Computop-Konfiguration einstellbar). Nur dann vorhanden.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.prefill }}
  <input type="hidden" name="Prefill" value="{{= $wsComputopHosted.prefill }}">
{{ /if }}
```

### \$wsComputopHosted.PCNr / PCNrBrand / PCNrYear / PCNrMonth / holder

Geben die Daten einer **gespeicherten Pseudo-Kreditkarte** aus, damit der Kunde nicht erneut seine Kartendaten eingeben muss. Die Variablen sind nur vorhanden, wenn alle Voraussetzungen erfüllt sind:

* Der Kunde ist eingeloggt,
* das Speichern von Pseudo-Kreditkartendaten ist für den Shop aktiviert,
* und der Kunde hat im Checkout eine gespeicherte Karte gewählt (siehe [`$wsCheckout.selectedPseudoCC`](/frontend/referenz/module/wscheckout#wscheckout-selectedpseudocc)).

`PCNr` (Pseudo-Kartennummer) ist dabei immer gesetzt; die übrigen Variablen erscheinen nur, wenn der jeweilige Wert bei der Karte hinterlegt ist. Ist `PCNr` vorhanden, wird zugleich [`hideSave`](#wscomputophosted-hidesave) gesetzt, da die Karte bereits gespeichert ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.PCNr }}
  Gespeicherte Karte: {{= $wsComputopHosted.PCNrBrand }} ({{= $wsComputopHosted.holder }}),
  gültig bis {{= $wsComputopHosted.PCNrMonth }}/{{= $wsComputopHosted.PCNrYear }}
{{ /if }}
```

### \$wsComputopHosted.freeFields

Gibt die freien Checkout-Felder aus, die an Computop übermittelt werden. Übermittelt werden nur die [freien Checkout-Felder](/frontend/referenz/module/wscheckout#wscheckout-freefields), deren ID in der Computop-Zahlungskonfiguration unter `freeFields` eingetragen ist.

#### Eigenschaften eines freien Feldes

| **Eigenschaft** | **Typ** | **Beschreibung**                     |
| --------------- | ------- | ------------------------------------ |
| `id`            | string  | ID des freien Checkout-Feldes.       |
| `value`         | string  | Aktueller Wert des Feldes.           |
| `type`          | string  | Feldtyp: `"text"` oder `"checkbox"`. |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ foreach $field in $wsComputopHosted.freeFields }}
  {{= $field.id }}: {{= $field.value }} ({{= $field.type }})
{{ /foreach }}
```

### \$wsComputopHosted.error

Gibt eine Fehlermeldung aus, falls bei der Zahlung ein Problem aufgetreten ist. Werten Sie sie nach der Rückkehr auf die Bezahlseite aus, um dem Kunden den Grund zu nennen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.error }}
  {{= $wsComputopHosted.error }}
{{ /if }}
```

### \$wsComputopHosted.paymentCanceled

Gibt `true` zurück, wenn der Kunde die Zahlung abgebrochen hat. Nutzen Sie es, um nach dem Abbruch zur Zahlungsauswahl zurückzuführen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.paymentCanceled }}
  Sie haben die Zahlung abgebrochen.
{{ /if }}
```

### \$wsComputopHosted.paymentFailed

Gibt `true` zurück, wenn die Zahlung fehlgeschlagen ist. Im Unterschied zum Abbruch hat der Kunde die Zahlung versucht, sie wurde aber nicht erfolgreich abgeschlossen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.paymentFailed }}
  Die Zahlung ist fehlgeschlagen. Bitte versuchen Sie es erneut.
{{ /if }}
```

***

## Methoden

Für `$wsComputopHosted` stehen keine Methoden zur Verfügung.

***

## Aktionen

Für `$wsComputopHosted` stehen keine Aktionen zur Verfügung.

***

## Beispiele

### Weiterleitung zur Computop-Bezahlseite

Dieses Beispiel baut das vollständige Weiterleitungs-Formular: Es zeigt auf `action` und legt die verschlüsselten Daten sowie die Händler-ID als versteckte Felder ab. Beim Absenden gelangt der Kunde zur Computop-Bezahlseite.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form method="post" action="{{= $wsComputopHosted.action }}">
  <input type="hidden" name="MerchantID" value="{{= $wsComputopHosted.merchantID }}">
  <input type="hidden" name="Len" value="{{= $wsComputopHosted.len }}">
  <input type="hidden" name="Data" value="{{= $wsComputopHosted.data }}">
  <button type="submit">Jetzt bezahlen</button>
</form>
```

**Ergebnis** \
Beim Absenden wird der Kunde zur Computop-Bezahlseite weitergeleitet.

### Zahlungsergebnis nach der Rückkehr auswerten

Nachdem Computop den Kunden zurückgeleitet hat, prüfen Sie das Ergebnis und zeigen die passende Meldung.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.paymentCanceled }}
  Sie haben die Zahlung abgebrochen.
{{ elseif $wsComputopHosted.paymentFailed }}
  Die Zahlung ist fehlgeschlagen.
  {{ if $wsComputopHosted.error }}
    Grund: {{= $wsComputopHosted.error }}
  {{ /if }}
{{ else }}
  Vielen Dank für Ihre Zahlung.
{{ /if }}
```

**Ergebnis** \
Je nach Ausgang sieht der Kunde eine Abbruch-, Fehler- oder Erfolgsmeldung.

***

## Weiterführende Links

* [Computop Hosted Payments (Konfiguration)](/konfiguration/payment-zahlungsmethoden#2-payment-computophosted-computop-hosted-payments) – richtet die Computop-Schnittstelle ein (Händler-ID, Schlüssel, Zahlungsarten). Voraussetzung, damit das Modul gefüllt ist.
* [\$wsCheckout](/frontend/referenz/module/wscheckout) – der Checkout, aus dem heraus zur Computop-Bezahlseite weitergeleitet wird; liefert mit `selectedPseudoCC` die gewählte gespeicherte Karte.


## Related topics

- [payment - Zahlungsmethoden](/konfiguration/payment-zahlungsmethoden.md)
- [Module - Übersicht](/frontend/referenz/module.md)
- [Konfigurations-Deeplinks](/admin-interface/konfigurations-deeplinks.md)
- [LogManager (Logs)](/admin-interface/logmanager-logs.md)
- [$wsCheckout - Checkout](/frontend/referenz/module/wscheckout.md)