Skip to main content
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, 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, paymentFailed, and 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
{{= $wsComputopHosted | json }}
JSON output
{
  "action": "",
  "data": "",
  "encryptionType": "AES",
  "error": "",
  "freeFields": [],
  "hideSave": "hideSave",
  "language": "",
  "len": "0",
  "merchantID": "",
  "payType": "",
  "paymentCanceled": false,
  "paymentFailed": false,
  "template": ""
}
Variables for building the form
VariableTypeDescription
actionstringURL of the Computop payment page (as the form’s action).
datastringEncrypted payment data.
lenstringLength of the encrypted data (for validation at Computop).
encryptionTypestringEncryption type (e.g. "AES").
merchantIDstringMerchant ID with Computop.
payTypestringPayment method (e.g. credit card).
languagestringLanguage code for the payment page (e.g. "de").
templatestringName of the Computop template.
hideSavestringControls the display of the save option.
freeFieldsarrayAdditional free fields.
Variables for evaluating the result
VariableTypeDescription
paymentCanceledbooltrue if the payment was canceled.
paymentFailedbooltrue if the payment failed.
errorstringError 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.
<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).
<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.
<input type="hidden" name="Len" value="{{= $wsComputopHosted.len }}">

$wsComputopHosted.encryptionType

Returns the encryption type (e.g. "AES").
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.
<input type="hidden" name="MerchantID" value="{{= $wsComputopHosted.merchantID }}">

$wsComputopHosted.payType

Returns the payment method (e.g. credit card).
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.
Language: {{= $wsComputopHosted.language }}

$wsComputopHosted.template

Returns the name of the Computop template used.
Template: {{= $wsComputopHosted.template }}

$wsComputopHosted.hideSave

Returns the value for controlling the save option. In the observed state, the variable contains the text "hideSave" when the option is to be hidden.
{{ if $wsComputopHosted.hideSave }}
  <!-- Hide save option -->
{{ /if }}

$wsComputopHosted.freeFields

Returns additional free fields that are submitted along.
{{= $wsComputopHosted.freeFields | json }}

$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.
{{ 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.
{{ 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.
{{ 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.
<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.
{{ 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.

  • Computop Hosted Payments (configuration) – sets up the Computop interface (merchant ID, keys, payment methods). A prerequisite for the module to be populated.
  • $wsCheckout – the checkout from which the redirect to the Computop payment page is initiated.