Start Smart Checkout in a Layer

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 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():

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

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

Detailed description of the options:

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.

urlParams/initPaymentMethod

string

Optional. Payment method for sale:

  • Debit for SEPA direct debit;

  • Creditcard;

  • Invoice;

  • Prepaid for advance payment.

If you don't pass a payment method, the customer can choose of all available payment methods.