Integration Guide for Orders (Smart Checkout / HTML)

Introduction

Smart Checkout extends the payment service by a complete checkout and further order processing tools. This saves the merchant the implementation of the complex checkout process. The Checkout Wizard by secupay will request delivery information and payment details from the customer. After final confirmation, the merchant receives a complete order, ready for delivery. He can use SecuOffice for further order processing such as shipment or collection.

This guide will show you how to integrate the Checkout Wizard into your website or e-commerce system using means of HTML only. This integration method is recommended for websites and small online shops that sell articles from only one merchant. If you want to use Smart Checkout in a marketplace scenario, you need another integration method and guide.

Security notice

With this integration method, the basket is passed to the Checkout Wizard using means of HTML and JavaScript. This bears a risk of manipulation of the basket in the browser. The merchant is therefore obligated to check incoming orders before processing. Please refer to our Terms and Conditions for details. For added security, please consider preparing Smart Transactions that include the basket, using our secuconnect API. This way, you can verify the basket on your servers. You can find integration guides for API-based integration methods as well.

The integration guide begins with a Getting Started section, that explains the basic concepts and important key terms. In this section, you will learn how to create a first order and start the Checkout Wizard. We recommend to study the Getting Started section thoroughly. The remaining sections, Reference and Troubleshooting, can be accessed when needed. Should you require assistance with integration or further order processing, our support staff will be happy to help.

Getting Started

This section demonstrates how to integrate the Checkout Wizard in a very a simple shop page. You should have basic knowledge of HTML in order to follow and use the integration.

First you will learn a few basic key terms. Then we start integration step by step with a working example that can be integrated in your application with a few adjustments . Finally we will explain the example in detail before, in the Reference section we show what additional options are available to adjust the checkout to your needs.

Key Terms

Merchant and Contract

The merchant sells products to the customer or offers a service. Thus he delivers something and receives the payment for it. As payment service provider (PSP), secupay cares for the payment and interacts with both, the merchant and his customer.

Every merchant can have one or more contracts with secupay for different purposes. These contracts are managed behind the scenes for you. Important for you: Yuo will receive one or more contract IDs (GCR_xxx), and some information for which purpose you shall use them.

Smart Transaction and Payment Transaction

A Payment Transaction manages the payment process between secupay and your customer as well as between secupay and you, the merchant. It is defined by the payer and the payee, the payment method and the amount.

A Smart Transaction is rather a business transaction like a purchase order. It knows about the status of the payment, and manages delivery and the like. The Payment Transaction is managed by the Smart Transaction, and associated to it.

Checkout Workflow

Using HTML integration, this is the standard checkout flow:

  1. The customer decides for some goods in the merchant's shop. At the same time, the basket is managed by the frontend code by secupay.

  2. The customer asks for checkout. The merchant's shop delegates the request to the frontend code by secupay.

  3. The customer checks out using the Checkout Wizard by secupay.

  4. The Checkout Wizard directs the customer to a success URL of the merchant's shop.

When all steps of the process are completed successfully, the Smart Transaction is waiting for a pending payment, or even ready for delivery. It is not guaranteed that the customer opens the offered success URL.

If the customer aborts the checkout, they are directed to the abort URL, if defined. It is not guaranteed that the customer opens the offered URL. They can also simply stop to interact with the browser or close the browser window.

Working Example

We begin with a very simple shop page:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<style>
body { font-face: sans--serif; }
</style>
</head>
<body>
<h1>Ball Pen Demo</h1>
<!-- Our articles and the checkout button will appear here. -->
</body>
</html>

This is just enough to show an empty page with the head line. In order to integrate with the Checkout Wizard, we need to include a CSS and a JavaScript file, and add an HTML form including our articles and a checkout button.

Step 1: Include CSS and JavaScript

This code integrates the JavaScript and the CSS in the <head> section of your HTML document:

<head>
...
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>

Surely your page will also have their own CSS and JavaScript. Best you add our CSS after yours, and our JavaScript after your JavaScript files.

Step 2: Add the HTML form

Now we need to add an HTML form. We need to pass the contract ID to it, and can also set more general options. In our example we declare it is a demo transaction.

<body>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<!-- Our articles and the checkout button will appear here. -->
</form>
</body>

Later you need to set your real contract ID, so that the orders are associated with the right contract. You also need to remove the demo setting for production.

Step 3: Add articles

Within the form we place some articles. The most intuitive way is to use a form element that represents a number for the amount.

<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
<input type="number"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-tax="19"
value="0"
min="0"
max="5"
/> x ball pen
</p>
<!-- More articles and the checkout button will follow. -->
</form>

Please note the class="sc-autobasket-item" in the <p> tag. We could also use a <div> or something similar. The needed article details are passed using the diverse data-sc-* attributes.

We can also assign the amount when we use dropdowns, checkboxes or radio buttons. We extend our example with a second article, represented by a check box:

<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<!-- Our ball pens are here. -->
<p class="sc-autobasket-item">
<input type="checkbox"
data-sc-item-name="ACME pen case Modern Line"
data-sc-item-price="1795"
data-sc-item-quantity="1"
data-sc-item-tax="19"
/> 1 x ball pen case
</p>
<!-- Our checkout button will appear directly below the articles. -->
</form>

Step 4: Add a checkout button

Finally, we add the checkout button at the end of our form:

<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<!-- Our articles are here. -->
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>

A <div> and even a <span> will work instead of the <button>. If the basket is empty, the button will be disabled,

The final result looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
<input type="number"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-tax="19"
value="0"
min="0" max="5"
/> x ball pen
</p>
<p class="sc-autobasket-item">
<input type="checkbox"
data-sc-item-name="ACME pen case Modern Line"
data-sc-item-price="1795"
data-sc-item-quantity="1"
data-sc-item-tax="19"
/> 1 x ball pen case
</p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here you see the page:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

And this happens when one selects some articles, and presses the checkout button:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

Summary

You have seen how to integrate our Checkout Wizard with your website using HTML. We let the website prepare a purchase order, assisted by the integration code provided by secupay.

Additionally you can:

  • Pass more details to basket items, like a EAN/GTIN or an article number/SKU number of your own.

  • Pass stakeholder shares, for instance to pay out sales provisions

  • Use other HTML elements to offer your articles

  • Let our integration code display the total amount on your page

  • Define static or individual URLs to direct the customer back to your page after successful or failed checkout

  • Change the default language of the Checkout Wizard

Most of the mentioned things are described in the reference below. If you don't find the needed information, please do not hesitate to ask us.

Reference

Contract ID

The contract ID is mandatory.

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
>

You will receive your actual contract ID during the onboarding.

Demo or Production

You can create your particular Smart Transaction in demo mode. This is useful for testing, especially during integration.

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-is-demo="true"
>

For demo transactions, no payment is being processed. Demo transactions can be filtered and excluded in SecuOffice.

The demo mode is a boolean value:

  • true: The Smart Transaction is marked as demo transaction. The payment is not processed.

  • false: The Smart Transaction is handled as a productive one. The payment will be processed.

The default value is false, a productive transaction.

Pure Checkout or Order Processing

You can decide about the order processing offered after closure using the intent. The intents for checkout are:

  • checkout: The Checkout Wizard negotiates all the needed details with the customer. After this you find the order either ready for delivery or waiting for a pending payment. But once the payment is approved, the further process is up to you. (There is one exception: We need to be informed about the delivery of orders with invoice payments. The due date depends on it.)

  • order: SecuOffice also helps you with order processing.

Example:

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-is-intent="checkout"
>

If not present, it defaults to order.

Basket Item Details

The following parameters are mandatory for each basket item:

  • data-sc-item-name: the article name;

  • data-sc-item-tax: the VAT rate in percent;

  • data-sc-item-price: the gross unit price in the smallest currency unit;

  • data-sc-item-quantity: the amount as integer.

The Following parameters are optional and can be omitted:

  • data-sc-item-article-number: your article number, or storage keeping unit (SKU) number;

  • data-sc-item-ean: the official EAN (or GTIN) of this product.

Full example with a checkbox:

<input type="checkbox"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-article-number="ACM/BPMOD-8050"
data-sc-item-ean="4123456789012"
data-sc-item-price="1595"
data-sc-item-quantity="1"
data-sc-item-tax="19"
/>

The gross unit price is the price for one of it, including the value added tax (VAT). It is expressed in the smallest currency unit. In the above example it is 15.95€

Shipping Fee

You can pass a shipping fee by adding an attribute to the data-sc-shipping-fee to the <form> tag.

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-shipping-fee="495"
>

As with other money values you pass the gross value in the smallest currency unit. The shipping fee in this example is €4.95.

In the Checkout Wizard, the shipping fee will appear as a normal basket item. It has a VAT rate of 19 %, and is designated as "shipping fee" (or "Versandkosten" in German). The translation depends on the language setting described below.

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

Define and Display Articles

You can use a diverse set of HTML elements to define your articles:

  • text boxes

  • number spinners

  • checkboxes

  • radio buttons

  • select boxes (dropdowns)

Articles are added to the basket automatically, when there is a value.

Article as Number Spinner

You can use an HTML 5 number spinner for your articles. The value represents the quantity.

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
<input type="number"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-tax="19"
value="0"
min="0"
max="5"/> x ball pen
</p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

You see a visual example in the Getting Started section.

Article as Text Box

You can use a text box for your articles. The value represents the quantity.

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
<input type="text"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-tax="19"
maxlen="2"
value="0"
/> x ball pen
</p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here is a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

Article as Checkbox

You can use checkboxes to offer articles one article per checkbox. Every <input type="checkbox"> needs to be surrounded by an element having the CSS class sc-autobasket-item.

Here an example with two articles:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
<input id="cb1"
type="checkbox"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-quantity="1"
data-sc-item-tax="19"
/>
<label for="cb1"> ACME ball pen Modern Line 8050</label>
</p>
<p class="sc-autobasket-item">
<input id="cb2"
type="checkbox"
data-sc-item-name="ACME pen case Modern Line"
data-sc-item-price="1795"
data-sc-item-quantity="1"
data-sc-item-tax="19"
/>
<label for="cb2"> ACME pen case Modern Line</label>
</p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here is a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

You can either select one of the articles, or both.

Article as Dropdown

You can use a dropdown to offer different quantities. To achieve this, you need a <select> element, encapsulated in an element having the CSS class sc-autobasket-item. The <option> values represent the quantity.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p class="sc-autobasket-item">
ACME ball pen Modern Line 8050, €15.95
<br/>
<select data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-price="1595"
data-sc-item-tax="19"
>
<option value="0" selected>none</option>
<option value="1">1 pieces</option>
<option value="2">2 pieces</option>
<option value="3">3 pieces</option>
<option value="5" data-sc-item-price="1495">5 pieces á €14.95</option>
<option value="10" data-sc-item-price="1295">10 pieces á €12.95</option>
</select>
</p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

As you see, you can override the article price using data-sc-item-price.

Here is a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

Articles as Radio Buttons

You can use a radio buttons to offer different quantities of the same product, but also different products. All the products in the group need to have the same name, and need to be surrounded by an element having the CSS class sc-autobasket-item.

Here an example with different quantities:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<div class="sc-autobasket-item">
<p>ACME ball pen Modern Line 8050</p>
<p>
<input id="cb1"
type="radio"
name="pen"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-ean="4001234567893"
data-sc-item-price="1595"
data-sc-item-tax="19"
data-sc-item-quantity="1"
/>
<label for="cb1">1 at €15,95</label>
<br/>
<input id="cb2"
type="radio"
name="pen"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-ean="4001234567893"
data-sc-item-price="1495"
data-sc-item-tax="19"
data-sc-item-quantity="3"
/>
<label for="cb2">3 at €14,95</label>
</p>
</div>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here another example with alternative products:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<div class="sc-autobasket-item">
<p>ACME ball pen Modern Line 8050</p>
<p>
<input id="cb1"
type="radio"
name="pen"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-ean="4001234567893"
data-sc-item-price="1595"
data-sc-item-tax="19"
data-sc-item-quantity="1"
/>
<label for="cb1">one pen at €15,95</label>
<br/>
<input id="cb2"
type="radio"
name="pen"
data-sc-item-name="ACME ball pen Modern Line 8050 (3-pack)"
data-sc-item-ean="4001234567893"
data-sc-item-price="3995"
data-sc-item-tax="19"
data-sc-item-quantity="3"
/>
<label for="cb2">pack of three at €39,95</label>
</p>
</div>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here is a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

Alternative Articles in Checkboxes

When you would like to use alternating checkboxes instead of radio buttons, you can put multiple checkboxes in one element having the CSS class sc-autobasket-item.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>Ball Pen Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js"></script>
</head>
<body>
<h1>Ball Pen Demo</h1>
<form class="sc-autobasket-form" data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true">
<p>ACME ball pen Modern Line 8050</p>
<p class="sc-autobasket-item">
<input id="cb1"
type="checkbox"
data-sc-item-name="ACME ball pen Modern Line 8050"
data-sc-item-ean="4001234567893"
data-sc-item-price="1595"
data-sc-item-tax="19"
data-sc-item-quantity="1"
/>
<label for="cb1">one pen at €15,95</label>
<br/>
<input id="cb2"
type="checkbox"
data-sc-item-name="ACME ball pen Modern Line 8050 (3-pack)"
data-sc-item-ean="4002345678907"
data-sc-item-price="3995"
data-sc-item-tax="19"
data-sc-item-quantity="1"
/>
<label for="cb2">pack of three at €39,95</label>
<p>
<p>
<button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
</p>
</form>
</body>
</html>

Here is a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

When a checkbox is clicked, the others are unchecked. Clicking the checked option again will deselect it.

Display Order Total

You can display the current order total using an HTML element with class sc-autobasket-total-sum, and a <span> inside it:

<div class="sc-autobasket-total-sum">
Total sum: <span></span>
</div>

Here a visual example:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

You can change the text "Total order:" to something else. But be careful to keep the <span>, since the value is displayed inside of it.

Default Language

You can pass a default language for the Checkout Wizard.

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-lang="en"
>

Currently these languages will work:

  • de (German)

  • en (English)

If you omit a default language, the Checkout Wizard starts in German.

Individual Return URLs

The Checkout Wizard can return the user to your website, if you have defined the needed URLs. The URLs cover two cases, successful or failed checkout. For instance if the user aborts the checkout procedure, or there is a technical reason.

You can define the return URLs statically in SecuOffice, or you can pass individual URLs for every particular Smart Transaction. These individual URLs for the Smart Transaction override the static ones from SecuOffice.

Here an example how to pass both individual return URLs:

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-url-success="https://www.example.com/survey?sessid=1X23Y4Z5"
data-sc-url-failure="https://www.example.com/basket?sessid=1X23Y4Z5&reason=CHOUTFAIL"
>

If there is a success URL, whether static or individual, the user is offered a back-to-shop-link:

images/download/attachments/87393716/image2020-1-23_13-26-48.png

The failure URL for instance is used when the user stops the checkout prematurely, using the X button in the top-right corner:

images/download/attachments/87393716/image2020-1-23_13-34-54.png

This is only possible, if a failure URL is present. The user is prompted to confirm the operation. A second confirmation is required to abort and initiate a redirect to the provided URL.

Not all scenarios can be covered by these URLs. For example, if there is a browser session timeout, the URLs cannot be resolved.

Start Fullscreen or Layer

You can optionally set a view mode in the <form> tag to start Checkout Wizard in fullscreen mode.

<form class="sc-autobasket-form"
data-sc-contract-id="GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5"
data-sc-view-mode="fullscreen"
>

These are the options:

  • layer: If possible, the Checkout Wizard opens in a modal layer above the shop page. Some browsers need the Checkout Wizard to start in fullscreen mode due to restrictions for cross-origin ressource sharing (CORS). There are also reasons for the Wizard to switch to fullscreen mode even if it started as layer.

  • fullscreen: Forces the Checkout Wizard to open in fullscreen mode from the beginning.

The default view mode is layer.

Troubleshooting

Situation

What to do?

The Checkout Wizard does not start at all.

There can be more than one reason.

(1) The JavaScript is not included properly. Please check whether the <script> tag is there, and the browser can load the JavaScript from https://checkout.secupay.com/assets/js/secupay-checkout.js. Usually you can see this in the network pane of the developer tools of your browser. In Chrome or Firefox you can open and close the developer tools by pressing F12. If it fails to load, check the <script> tag for typos.

(2) The articles or the form are not included properly. As long as the basket is empty, the button is inactive, and the checkout does not start. You can check the basket in the JavaScript console of the developer tools of your browser. Each time you add an article to the basket, the basket is output as a brief table in the console. In Chrome or Firefox you can open and close the developer tools by pressing F12.

(3) The submit button is not wired properly. Please check whether the submit button is placed inside the <form> element. You can also check in your developer tools, whether the event listener for the click event is properly linked.

The Checkout Wizard immediately shows an error page.

The implementation is done but one or more parameters seem to be misconfigured.

Check whether you find something helpful in the JavaScript console of the developer tools of your browser. In Chrome or Firefox you can open and close the developer tools by pressing F12. After opening the log console repeat your actions.

If you could not find anything helpful in the JavaScript console, please get in touch with our help desk. Describe the situation, tell your contract ID and the exact time, and ask to check the error logs for the exact reason.

The Checkout Wizard starts in a small window inside the page:

images/plugins/servlet/confluence/placeholder/unknown-attachment.png

The CSS is not included properly. Please check whether the <link rel="stylesheet"> tag is there, and the browser can load the CSS file from https://checkout.secupay.com/assets/css/secupay-checkout.css. Usually you can see this in the network pane of the developer tools of your browser. In Chrome or Firefox you can open and close the developer tools by pressing F12. If it fails to load, check the <link> tag for typos.

I don't see the completed order in SecuOffice.

Did you replace the contract ID in our examples with your individual one? It is the <form> attribute data-sc-contract-id="GCR_...". Please check whether you have replaced GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5 from our code samples with your real contract ID.

I don't receive a payment.

Did you remove data-sc-is-demo="true" in the <form> tag, or replace it by data-sc-is-demo="false"?

After fixing this: For technical reasons it is not possible to change a demo transaction in a productive one. The buyer needs to repeat the checkout.

In SecuOffice you can see for every order whether it was placed in demo mode. So usually you would see it before you process the order.

I received a payment in my tests.

Did you set data-sc-is-demo="true" in the <form> tag?

After fixing this: Please cancel the transaction fully.

After switching from demo into production, the Checkout Wizard starts with an error page. Or there are less payment options than before.

Probably you contract is only configured for demo transactions so far. It is likely you are not onboarded fully yet. Perhaps the the beneficial owners are not identified fully.

If the reason is not known to you, please get in touch with our help desk or our customer care.