Corporate PayPage and templates

Corporate PayPage

Paygate forms are framed as standard in white and grey. Merchants can customise the layout of the forms with the help of layout parameters. The simplest way to change the layout is to set the parameters for the background colour (BGColor), background image (BGImage) and the font (FFace). You can use XSL-templates to change the layout further:

In the case of credit card payments you can change the parameter Template to create an individual layout for your PaySSL form which exactly matches the shop layout. To this end your graphic designer can design an HTML-template in the shop-design based on XSLT (Extensible Stylesheet Language Transformation). Computop Helpdesk copies this XSLT-template to our Computop Paygate Server. If you enter the name of your XSLT-file in the Template parameter, the Computop Paygate form will appear in your layout.

For general information about XSLT see www.w3.org.

Please note, that the Corporate Paypage is a fee-based additional service. Please ask Computop Sales  thereun.

Computop provides a programming example for creating a responsive credit card form online at https://www.computop.com/de/xslt. The template files to be created – XSL and XML – afterwards are transformed automatically for the various browsers. Please ensure before sending to Computop that both files can be loaded into the browser correctly. The complete code must be able to be displayed and no error message are allowed. If an error message occurs the code and used tags have to be revised. Please note that new versions must be available not later then 3:30 pm in order to to be processed on the same day.

The subsequent conventions apply for the use of the Corporate Paypage with XSLT:

File names

A XSL file designed by you defines your individual layout. The associated XML file contains the texts that are to be displayed on the form. Hence, multilingualism is easy. Always use your MerchantID in the names of the file.

In order not to receive safety notices, please ensure that external image sources are retrieved via SSL.

In order to call the individual layout, use the ‘template’ parameter with your MerchantID and attach it unencrypted to the call of the Computop payment page, for example: https://www.computop-paygate.com/payssl.aspx?MerchantID=IhreMID&Len=123&Data=AGSDJ…ASDF&template=IhreMerchantID

Field names of the form

When implementing the text field for the credit card number, use the following values for the parameters ‘name’ and ‘id’:

A text field for the input of the credit card number is then implemented as follows:

<input type="text" name="cardNumber" id= "cardNumber" value=""></input>

Hidden Fields

The following hidden fields must be implemented so that the values can be passed on when sending the form:

Language selection

The language selection in form PaySSL.aspx is automatically based on the parameter Language. Other language areas are filtered out. If you wish to access the field of another language area e.g. with JavaScript, you can do so via the following path: /language/@name.

XML structure

The ‘language’ parameter controls which section of the XML text file is read out. German ‘de’ is always used as standard.

The XML file should have the following basic structure:

<?xml version="1.0" encoding="windows-1252"?>
       </languages>
             <language name="de">
             </language>
             <language name="en">
             </language>
       </languages>

With <xsl:variablename=““ select=“/language/@name”/> you can directly address an XML language section from the XSL file.

For an overview of which parameters are additionally rendered by the PaySSL, please examine the following structure (XSL file is rendered against the following XML string):

strXML = "<?xml version='1.0' encoding='windows-1252'?>" & _
       "<paygate pay='ssl'>" & _
                    "<merchantID>"..."</merchantID>" & _
                    "<len>"..."</len>" & _
                    "<data>"..."</data>" & _
                    "<Background>"..."</Background>" & _
                    "<BGImage>"..."</BGImage>" & _
                    "<BGColor>"..."</BGColor>" & _
                    "<FFace>"..."</FFace>" & _
                    "<FSize>"..."</FSize>" & _
                    "<FColor>"..."</FColor>" & _
                    "<center>"..."</center>" & _
                    "<CCard>"..."</CCard>" & _
                    "<Year>"..."</Year>" & _
                    "<URLBack>"..."</URLBack>" & _
                    "<twidth>"..."</twidth>" & _
                    "<theight>"..."</theight>" & _
                    “<brands><brand>”…”</brand></brands>” &_
                    “<cvc>”…”</cvc>” &_
                    "<ccexpiryyear>" … "</ccexpiryyear>" & _
                    "<ccbrand>" … "</ccbrand>" & _
                    "<template>"..."</template>" & _
                    "<counter>"… "</counter>" & _
                    "<notify>"… "</notify>" & _
                    "<errorcode>"..."</errorcode>" & _
                    "<PCNr>"..."</PCNr>" & _
                    "<PCNrBrand>"... "</PCNrBrand>" & _
                    "<PCNrMonth>"… "</PCNrMonth>" & _
                    "<PCNrYear>"… "</PCNrYear>" & _
                    “<creditcardholder>” … “</creditcardholder>” & _
                    "<Autostart>"…"</Autostart>" & _
       <language/@name ...   (Area for selected language-Node)
       (content of MerchantId_PaySSL.xml in the respective language)>
       "</paygate>"

Error mapping

In the case of the error codes listed below Computop returns the form in order to enable the credit card data to be entered again. You only have to evaluate the ‘error code’ parameter and display the desired text from your XML file.

At this point the ‘error code’ template is called:

<xsl:apply-templates select=“/paygate/errorcode” />

The called-up ‘error code’ template may look like this. It can alternatively be implemented with ‘if’.

<xsl:template match="errorcode">
  <tr>
    <td>
        <xsl:choose>
        <xsl:when test=".='0015'">
        <xsl:value-of select="//language/ErrorCodeDescription/Description1"/>
        <!--The input of the credit card number was not correct-->
        </xsl:when>
        ...
        </xsl:choose>
    </td>
  </tr>
</xsl:template>

It is also possible to integrate the error messages directly into the (main) template:

<xsl:if test="paygate/errorcode != ''">
       <xsl:choose>
             <xsl:when test="paygate/errorcode='0015'">
             <xsl:value-of select="/paygate/language/ErrorCodeDescription/Description1"/>
             <!--The input of the credit card number was not correct-->
             </xsl:when>
       </xsl:choose>
</xsl:if>

JavaScript

If JavaScript functions are desired, you must implement them in your template.

<script id=“clientEventHandlersJS“ language=“JavaScript“>
    if (document.SSLForm.cardNumber.value.length> 19)
    {
        alert(„<xsl:value-of select=“/paygate/language/strJavaScript1“/>“);
        document.SSLForm.cardNumber.focus();
    }
    ...
</script>

Please do not use any external link to your JavaScript.

Link to Visa Secure and MasterCard Secure Code

Visa and MasterCard regulations require that your pay page displays the Visa Secure and SecureCode logo. Please link the Verified logo to https://www.computop-paygate.com/vbv.aspx and the SecureCode logo to https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html.

Programming and testing the form

First design a HTML page with the layout for your payment page and initially save it for testing with the file extension .htm or .html. Open this file in the browser. Next, save this as an xsl file.

BASEURL= https://www.computop-paygate.com/

<?xml version="1.0" encoding="windows-1252"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>

<xsl:template match="/">
    <html>
       <head>
             <title>PaySSL Template</title>
             <script>Your JavaScript</script>
       </head>
       <body>
       <form action="BASEURL/payinterim.aspx" method="POST">
       Your form with hidden fields and xsl-tags
       </form>
       </body>
    </html>
</xsl:template>

In order to read the texts from the XML file, first of all create your tags in the desired language sections with the texts:

       <language name="de">
             <strCCNumber>credit card number</strCCNumber>
       </language>

Subsequently, replace the text in the HTML by a reference to the respective section in the XML file:

<xsl:value-of select="/paygate/language/strCCNumber"/>

In order to test your template, we request that you integrate the following lines in your XML file only for the test (before sending it to Computop ) and afterwards to call up the XML file in a browser. If no error is displayed you can send your template and the image folder in a Zip file to Computop Helpdesk with a request to check and install it.

<?xml version="1.0" encoding="windows-1252"?>
<?xml-stylesheet type="text/xsl" href="templatename.xsl"?>
<paygate>
       <languages>please omit for your layout tests
             <language name="de">
             </language>
             <language name="en">
             </language>
       <languages>please omit for your layout tests
</paygate>

In order to get an overview of the versions, please include the date and version number in the name of your Zip file.

As with the credit card form, it is now also possible to design your own XSLT templates for the SEPA direct debit form. In exactly the same way as with the credit card form, this is controlled via the ‘Template’ parameter. This can be called via the following URL:

The files must use the following naming convention:

Note: A Corporate Paypage offers you much more extended functions like for example a preconfiguration of card data which are not explained in detail here. For questions about extended functions please consult the Computop Helpdesk.