This guide is for the JavaScript 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

We begin with a very simple shop page:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Integration Demo</title>
  <meta charset="utf-8"/>
</head>
<body>
  <h1>JavaScript Integration Demo</h1>
  <p>
     Our button to check out will appear here.
  </p>
</body>
</html>

At the moment you see nothing than this:

images/download/attachments/156212049/image2020-10-28_11-3-24.png

In order to integrate with the Checkout WizardSmart Checkout we will include a CSS and a JavaScript file now, set the contract ID, and finally set the basket and start the checkout.

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: Set the Contract ID

Now we set the contract ID. It only needs to be set once.

HTML + JavaScript

<head>
  <!-- ... -->
  <script type="text/javascript">
    secupayCheckout.setOptions({
      contractId: "GCR_2H69XY35227V2VKP9WRA3SJ0W95RP0",
      intent: "order",
      isDemo: true,
      merchantUrls: {
        url_success: "https://shop.example.org/survey",
        url_error: "https://shop.example.org/basket?msg=HELPLINE",
        url_abort: "https://shop.example.org/basket?msg=VOUCHER"
      }
    });
  </script>
</head>

Since you use call a function provided in our JavaScript file, this must follow the other <script> tag.

Later you need to set your real contract ID, so that the orders are associated with you the right contract.

Step 3: Set the Basket and Start the Checkout

Finally we extend our script section with a callback handler and to wire it with a button.

We can define the handler in the same <script> section with the contract ID:

HTML + JavaScript

<script type="text/javascript">
  secupayCheckout.setOptions({
    contractId: "GCR_2H69XY35227V2VKP9WRA3SJ0W95RP0",
    intent: "order",
    isDemo: true,
    merchantUrls: {
      url_success: "https://shop.example.org/survey",
      url_error: "https://shop.example.org/basket?msg=HELPLINE",
      url_abort: "https://shop.example.org/basket?msg=VOUCHER"
    }
  });
  function buttonHandler() {
    secupayCheckout.setBasket([
      {
        name: "ACME ball pen Modern Line 8050",
        price: 1595,
        quantity: 2,
        tax: 19
      },
      {
        name: "ACME pen case Modern Line",
        price: 1795,
        quantity: 1,
        tax: 19
      }
    ]);
    secupayCheckout.enterCheckout();
  }
</script>

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

Our callback handler sets a basket with two elements. After this is done, it starts the checkout.

And this is our button:

HTML + JavaScript

<button type="button" onclick="buttonHandler();">Check out with pen + case ...</button>

Final Outcome

The final result looks like this:

HTML + JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Integration 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>
  <script type="text/javascript">
    secupayCheckout.setOptions({
      contractId: "GCR_2H69XY35227V2VKP9WRA3SJ0W95RP0",
      intent: "order",
      isDemo: true,
      merchantUrls: {
        url_success: "https://shop.example.org/survey",
        url_error: "https://shop.example.org/basket?msg=HELPLINE",
        url_abort: "https://shop.example.org/basket?msg=VOUCHER"
      }
    });
    function buttonHandler() {
      secupayCheckout.setBasket([
        {
          name: "ACME ball pen Modern Line 8050",
          price: 1595,
          quantity: 2,
          tax: 19
        },
        {
          name: "ACME pen case Modern Line",
          price: 1795,
          quantity: 1,
          tax: 19
        }
      ]);
      secupayCheckout.enterCheckout();
    }
  </script>
</head>
<body>
  <h1>JavaScript Integration Demo</h1>
  <p>
     <button type="button" onclick="buttonHandler();">Check out with pen + case ...</button> 
  </p>
</body>
</html>

Here you see this on top of your page:

images/download/attachments/156212049/image2020-10-27_16-18-40.png

And this happens, when we press the button:

images/download/attachments/156212049/image2020-12-4_15-24-33.png

Of course, later you will set the basket more dynamically. You might also use different controls to add articles to the basket and to start the checkout process.

Summary

You have seen how you can integrate Smart Checkout with your website. We let the website arrange the order and specify a few more details, 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;
Define static or individual URLs to direct the customer back to your page after successful or failed checkout;
Change the default language.

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