This guide is for the HTML integration of Smart Checkout. If you feel not confident with it, or before you start a new integration, please get in touch with our friendly help desk:Link

Starting Point

Our example shows how to launch Smart Checkout a first time.

We begin with a very simple shop page:

HTML

<!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 it with Smart Checkout, 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:

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.

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.

HTML

<body>
  <form
    class="sc-autobasket-form"
    data-sc-contract-id="GCR_2H69XY35227V2VKP9WRA3SJ0W95RP0"
    data-sc-is-demo="true"
    data-sc-intent="order"
    data-sc-url-success="https://www.example.com/SUCCESS"
    data-sc-url-failure="https://www.example.com/FAILURE"
    data-sc-url-abort="https://www.example.com/USER_ABORT"
  >
    <!-- Our articles and the checkout button will appear here. -->
  </form>
</body>

As you see the <form> tag has:

a CSS class sc-autobasket-form to designate it for its purpose;
a number of data-sc-* attributes to define some parameters.

The attributes are used:

to pass a contract ID (identifies merchant and perhaps to make a subdivision);
to designate it as order (controls workflow and makes it visible in SecuOffice order views);
to designate it as demo order (suppresses actual payment execution and actual delivery);

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

HTML

 <form
    class="sc-autobasket-form"
    ...
  >
  <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 for name, gross unit price, and VAT rate.

Monetary amounts are expressed in the smallest currency unit (e. g. Euro Cent). Our example above shows an article having a gross unit price of €15.95.

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:

HTML

 <form
    class="sc-autobasket-form"
    ...
  >
  <!-- 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:

HTML

 <form
    class="sc-autobasket-form"
    ...
  >
  <!-- 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,

Final Outcome

The final result looks like this:

HTML

<!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_2H69XY35227V2VKP9WRA3SJ0W95RP0"
    data-sc-is-demo="true"
    data-sc-intent="order"
    data-sc-url-success="https://www.example.com/SUCCESS"
    data-sc-url-failure="https://www.example.com/FAILURE"
    data-sc-url-abort="https://www.example.com/USER_ABORT"
  >
    <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/download/attachments/156211979/image2020-11-6_14-33-44.png

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

images/download/attachments/156211979/image2020-11-6_14-33-51.png

Summary

You have seen how you can integrate Smart Checkout. We let the website collect the basket and set a few other parameters, supported by integration code from secupay.

Moreover 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 or a detailed basket;
Define static or individual URLs to direct the customer back to your page after successful or failed checkout;
Change the default language of Smart Checkout.

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