> ## 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": [],
  "hideSave": "hideSave",
  "language": "",
  "len": "0",
  "merchantID": "",
  "payType": "",
  "paymentCanceled": false,
  "paymentFailed": false,
  "template": ""
}
```

**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 (z. B. `"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  | Steuert die Anzeige der Speichern-Option.                   |
| `freeFields`     | array   | Zusätzliche freie Felder.                                   |

**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 (z. B. `"AES"`).

```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 aus. Im beobachteten Zustand enthält die Variable den Text `"hideSave"`, wenn die Option ausgeblendet werden soll.

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

### \$wsComputopHosted.freeFields

Gibt zusätzliche freie Felder aus, die mit übermittelt werden.

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

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