Articles with Number Spinners

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

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

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_WA66JUP62PNVHBHCXA57PRUNKZP0P5" data-sc-is-demo="true" data-sc-intent="order">
    <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.

Monetary amounts are expressed in the smallest currency unit (e. g. Euro Cent). The gross unit price in our example above is €15.95.