Articles with Checkboxes

You can use a checkbox to define an article. The checkox must be surrounded by an element having the CSS class sc-autobasket-item.

Here is an example:

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>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>
	</p>
    <p class="sc-autobasket-item">
	  <input id="cb2"
             type="checkbox"
             data-sc-item-name="ACME pen case 8050 (3-pack)"
             data-sc-item-ean="4002345622901"
             data-sc-item-price="1995"
             data-sc-item-tax="19"
             data-sc-item-quantity="1"
      />
	  <label for="cb2">pen case at €19,95</label>
	</p>
	<p>
	  <button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
	</p>
  </form>
</body>
</html>

This will display two checkbox, acting separately.

Monetary amounts are expressed in the smallest currency unit (e. g. Euro Cent). The gross unit prices in our example above are €15.95 for the pen, and €19.95 for the case.

You can also use checkboxes instead of radio buttons by putting multiple checkboxes in one element with the class sc-autobasket-item. You can switch them like radiobuttons, but you can also remove your selection with a click on the checked element.

Here is an example:

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

This also shows two checkboxes. But checking the 3-pack would remove the single pen from the basket.