> ## 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 (hosted payment page)

> Provide data for redirecting to the hosted Computop payment page and evaluate the customer return and the payment result in the frontend.

With the `$wsComputopHosted` module, you process payments via the hosted Computop payment page. The module provides all the data you need to redirect the customer to the Computop payment page via form, and reports after the return whether the payment was successful.

This page covers providing the form data and evaluating the result. The actual payment processing runs on the Computop side; the configuration of the interface (merchant ID, keys) is done in the payment configuration.

***

## Basic concept

With a hosted payment page, the payment does not take place in the shop but on a page of the payment provider. `$wsComputopHosted` provides the data with which you redirect the customer there.

The flow is always the same: build the form → submit → Computop processes → evaluate the return.

1. You build an HTML form whose `action` points to [`$wsComputopHosted.action`](#wscomputophosted-action), and place the remaining values (`data`, `len`, `merchantID`, `encryptionType` …) as hidden fields.
2. The customer submits the form and is taken to the Computop payment page.
3. Computop processes the payment and redirects the customer back to the shop.
4. After the return, you evaluate [`paymentCanceled`](#wscomputophosted-paymentcanceled), [`paymentFailed`](#wscomputophosted-paymentfailed), and [`error`](#wscomputophosted-error) to give the customer appropriate feedback.

### Pass encrypted data through unchanged

The fields `data`, `len`, and `encryptionType` form the encrypted payment data. You do not calculate anything yourself and do not modify them; you pass the values on to Computop unchanged.

***

## Module overview

**Example / excerpt of** `$wsComputopHosted`

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

**JSON output**

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

**Note:** Conditional variables only appear when they are set: `hideSave`, `prefill`, and the data of a stored credit card (`PCNr`, `PCNrBrand`, `PCNrYear`, `PCNrMonth`, `holder`).

**Variables for building the form**

| **Variable**     | **Type** | **Description**                                                                                   |
| ---------------- | -------- | ------------------------------------------------------------------------------------------------- |
| `action`         | string   | URL of the Computop payment page (as the form's `action`).                                        |
| `data`           | string   | Encrypted payment data.                                                                           |
| `len`            | string   | Length of the encrypted data (for validation at Computop).                                        |
| `encryptionType` | string   | Encryption type: `"Blowfish"` or `"AES"`.                                                         |
| `merchantID`     | string   | Merchant ID with Computop.                                                                        |
| `payType`        | string   | Payment method (e.g. credit card).                                                                |
| `language`       | string   | Language code for the payment page (e.g. `"de"`).                                                 |
| `template`       | string   | Name of the Computop template.                                                                    |
| `hideSave`       | string   | Contains `"hideSave"` when the save option is to be hidden. Only present in that case.            |
| `prefill`        | string   | Contains `"on"` when the save option should be pre-selected (checked). Only present in that case. |
| `freeFields`     | array    | Free checkout fields transmitted to Computop (structure see below).                               |

**Variables of a stored credit card** (only present when a stored pseudo credit card is selected)

| **Variable** | **Type** | **Description**                                |
| ------------ | -------- | ---------------------------------------------- |
| `PCNr`       | string   | Pseudo card number (token) of the stored card. |
| `PCNrBrand`  | string   | Card brand (e.g. Visa).                        |
| `PCNrYear`   | string   | Expiry year of the card.                       |
| `PCNrMonth`  | string   | Expiry month of the card.                      |
| `holder`     | string   | Cardholder.                                    |

**Variables for evaluating the result**

| **Variable**      | **Type** | **Description**                                  |
| ----------------- | -------- | ------------------------------------------------ |
| `paymentCanceled` | bool     | `true` if the payment was canceled.              |
| `paymentFailed`   | bool     | `true` if the payment failed.                    |
| `error`           | string   | Error message in the event of a payment problem. |

***

## Templates

The redirect form is typically embedded in the checkout, i.e. on the page from which the customer is redirected to the payment. You evaluate the result variables on the page to which Computop redirects after the payment.

***

## Variables

### \$wsComputopHosted.action

Returns the URL of the Computop payment page. You use it as the `action` attribute of the form with which the customer is redirected to the payment.

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

### \$wsComputopHosted.data

Returns the encrypted payment data. You submit it as a hidden form field – unchanged (see [Basic concept](#pass-encrypted-data-through-unchanged)).

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

### \$wsComputopHosted.len

Returns the length of the encrypted data. Computop needs this value to validate the submitted data.

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

### \$wsComputopHosted.encryptionType

Returns the encryption type used to encrypt `data`: `"Blowfish"` or `"AES"` — depending on what is configured in the Computop settings (default: Blowfish).

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

### \$wsComputopHosted.merchantID

Returns the merchant ID with Computop. It is submitted with the form so that Computop can assign the payment to the correct merchant account.

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

### \$wsComputopHosted.payType

Returns the payment method (e.g. credit card).

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

### \$wsComputopHosted.language

Returns the language code for the payment page. With it, the Computop page appears in the customer's language.

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

### \$wsComputopHosted.template

Returns the name of the Computop template used.

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

### \$wsComputopHosted.hideSave

Returns the value for controlling the save option on the Computop payment page. The variable contains the text `"hideSave"` and is **only present when the option is to be hidden** — in two cases:

* The customer is paying with an already stored credit card (see [`PCNr`](#wscomputophosted-pcnr-pcnrbrand-pcnryear-pcnrmonth-holder)) — saving again is unnecessary.
* Saving is not possible because the customer is not logged in or because saving pseudo credit card data is not enabled for the shop.

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

### \$wsComputopHosted.prefill

Contains the value `"on"` when the save option on the Computop payment page should be checked by default (configurable in the Computop configuration). Only present in that case.

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

Return the data of a **stored pseudo credit card** so that the customer does not have to re-enter their card data. The variables are only present when all preconditions are met:

* The customer is logged in,
* saving pseudo credit card data is enabled for the shop,
* and the customer has selected a stored card during checkout (see [`$wsCheckout.selectedPseudoCC`](/en/frontend/referenz/module/wscheckout#wscheckout-selectedpseudocc)).

`PCNr` (pseudo card number) is always set; the other variables only appear when the corresponding value is stored on the card. If `PCNr` is present, [`hideSave`](#wscomputophosted-hidesave) is also set, since the card has already been saved.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.PCNr }}
  Stored card: {{= $wsComputopHosted.PCNrBrand }} ({{= $wsComputopHosted.holder }}),
  valid until {{= $wsComputopHosted.PCNrMonth }}/{{= $wsComputopHosted.PCNrYear }}
{{ /if }}
```

### \$wsComputopHosted.freeFields

Returns the free checkout fields that are submitted to Computop. Only the [free checkout fields](/en/frontend/referenz/module/wscheckout#wscheckout-freefields) whose ID is listed under `freeFields` in the Computop payment configuration are transmitted.

#### Properties of a free field

| **Property** | **Type** | **Description**                       |
| ------------ | -------- | ------------------------------------- |
| `id`         | string   | ID of the free checkout field.        |
| `value`      | string   | Current value of the field.           |
| `type`       | string   | Field type: `"text"` or `"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

Returns an error message if a problem occurred during the payment. Evaluate it after the return to the payment page to tell the customer the reason.

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

### \$wsComputopHosted.paymentCanceled

Returns `true` if the customer canceled the payment. Use it to return to the payment selection after a cancellation.

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

### \$wsComputopHosted.paymentFailed

Returns `true` if the payment failed. In contrast to a cancellation, the customer attempted the payment, but it was not completed successfully.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.paymentFailed }}
  The payment failed. Please try again.
{{ /if }}
```

***

## Methods

No methods are available for `$wsComputopHosted`.

***

## Actions

No actions are available for `$wsComputopHosted`.

***

## Examples

### Redirect to the Computop payment page

This example builds the complete redirect form: it points to `action` and stores the encrypted data and the merchant ID as hidden fields. On submission, the customer is taken to the Computop payment page.

```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">Pay now</button>
</form>
```

**Result** \
On submission, the customer is redirected to the Computop payment page.

### Evaluate the payment result after the return

After Computop has redirected the customer back, check the result and display the appropriate message.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{{ if $wsComputopHosted.paymentCanceled }}
  You canceled the payment.
{{ elseif $wsComputopHosted.paymentFailed }}
  The payment failed.
  {{ if $wsComputopHosted.error }}
    Reason: {{= $wsComputopHosted.error }}
  {{ /if }}
{{ else }}
  Thank you for your payment.
{{ /if }}
```

**Result** \
Depending on the outcome, the customer sees a cancellation, error, or success message.

***

## Related links

* [Computop Hosted Payments (configuration)](/en/konfiguration/payment-zahlungsmethoden#2-payment-computophosted-computop-hosted-payments) – sets up the Computop interface (merchant ID, keys, payment methods). A prerequisite for the module to be populated.
* [\$wsCheckout](/en/frontend/referenz/module/wscheckout) – the checkout from which the redirect to the Computop payment page is initiated; provides the selected stored card via `selectedPseudoCC`.