If the Smart Transaction is prepared for checkout, one can open it in a layer using frontend integration code provided by us. In order to achieve this, you need to integrate a CSS and a JavaScript file, and to pass the ID to it.

Include JavaScript and CSS

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

HTML

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

Start Smart Checkout using HTML

You can start the checkout with an HTML form. The form needs the class sc-autobasket-form and an attribute data-sc-stx with your particular STX ID.

HTML

<form data-sc-stx="STX_3P69AAKAN2N9QYRRD3H58FNFY7B6A2" class="sc-autobasket-form">
  <button class="sc-autobasket-enter-button">Check out now</button>
</form>

Include this code within the <body> of your page. When you click the button, the Checkout Wizard appears as either a layer over your page or in full screen, depending on your browser.

Start Smart Checkout using JavaScript

In order to start the checkout you need to run the function enterCheckout():

Example JavaScript

function checkoutHandler() {
    secupayCheckout.setOptions({
        urlParams: {
            server: "testing",
            stx: "STX_3P69AAKAN2N9QYRRD3H58FNFY7B6A2",
            lang: "de"
        }
    });
    secupayCheckout.enterCheckout();
}

You can call this JavaScript function from an HTML button, for example. The Checkout Wizard appears either as a layer over your page or in full screen, depending on your browser.

Attribute	Type	Description
`urlParams/server`	`string`	Optional. Switch to test server (`"testing"`). If not set, it uses the live server.
`urlParams/stx`	`string`	Optional. Smart Transaction ID created using the secuconnet API.
`urlParams/lang`	`string`	Optional. Initial language of the Checkout Wizard: `"de"` to start in German; `"en"` to start in English. If this setting is not present, it defaults to German.