Articles with Radio Buttons

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 a radio buttons to offer different quantities of the same product, but also different products. All the products in the group need to have the same name, and need to be surrounded by an element having the CSS class sc-autobasket-item.

Here an example with different quantities:

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">
    <div class="sc-autobasket-item">
	  <p>ACME ball pen Modern Line 8050</p>
	  <p>
	    <input id="cb1"
               type="radio"
               name="pen"
               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">1 at €15,95</label>
	    <br/>
	    <input id="cb2"
               type="radio"
               name="pen"
               data-sc-item-name="ACME ball pen Modern Line 8050"
               data-sc-item-ean="4001234567893"
               data-sc-item-price="1495"
               data-sc-item-tax="19"
               data-sc-item-quantity="3"
        />
	    <label for="cb2">3 at €14,95</label>
	  </p>
    </div>
	<p>
	  <button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
	</p>
  </form>
</body>
</html>

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

Here another example with alternative products:

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">
    <div class="sc-autobasket-item">
	  <p>ACME ball pen Modern Line 8050</p>
	  <p>
	    <input id="cb1"
               type="radio"
               name="pen"
               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="radio"
               name="pen"
               data-sc-item-name="ACME ball pen Modern Line 8050 (3-pack)"
               data-sc-item-ean="4001234567893"
               data-sc-item-price="3995"
               data-sc-item-tax="19"
               data-sc-item-quantity="3"
        />
	    <label for="cb2">pack of three at €39,95</label>
	  </p>
    </div>
	<p>
	  <button type="submit" class="sc-autobasket-enter-button">Check out ...</button>
	</p>
  </form>
</body>
</html>

Here is a visual example:

images/download/attachments/156212010/image2020-1-22_11-58-15.png

You can also use checkboxes in a similar way to radio buttons.