@dintero/checkout-web-sdk

Dintero Checkout JavaScript SDK for frontend applications

Use this SDK in your frontend application to

• embed an existing Dintero Checkout payment session in an iframe on your website
• redirect the end user to the full page version of the Dintero Checkout for an existing payment session

Note that this SDK is for redirecting or embedding existing payment sessions. You cannot use this SDK to send requests to the Checkout API or to crate new payment sessions.

Learn more about the Dintero Checkout at docs.dintero.com

Before you start

We cannot guarantee the delivery of events from the embedded checkout to the SDK client runtime. The sessions machine-to-machine callback_url will be delivered at least once. Read more about the callback_url parameter in our api spec.

For payments on devices with the Vipps app installed, after payment is completed in the Vipps app, the end user will be returned to the browser where the return_url on the payment is opened in a new browser tab leaving the site that has the embedded checkout still open in a background browser tab on the device. In this case the SDK cannot guarantee that the handlers for onPaymentAuthorized or onPaymentError will be called.

If no custom handler are added for onPaymentError, onPaymentAuthorized and onPaymentCanceled the SDK will redirect the user to the return_url in the payment session.

Installation

NPM package

npm install @dintero/checkout-web-sdk

unpkg

Load the Dintero Checkout SDK in a script tag on your site.

<script src="https://unpkg.com/@dintero/checkout-web-sdk@0.0.12/dist/checkout-web-sdk.umd.js" integrity="sha384-5O24oFt5onxdX5Oy89p2BiolScIILUAxKz7U3niumoIfkFQmVGY8N2DiqK5Ye7VL"></script>

Using the SDK for an embedded checkout

The Dintero Checkout will be added to the <div id="checkout-container"></div> DOM-node.

Minimal example

When payment is completed, the SDK will redirect the end user to the return_url defined in the payment session.

<script type="text/javascript">
    const container = document.getElementById("#checkout-container");

    dintero.embed({
        container,
        sid: "T11223344.<short-uuid>",
    });
</script>

Full inline HTML JavaScript example

The checkout sdk will add a polyfill for promises if the browser does not support promises natively.

<script type="text/javascript">
    const container = document.getElementById("#checkout-container");

    dintero
        .embed({
            container,
            sid: "T11223344.<short-uuid>",
            language: "no", \\ optional parameter, an ISO 639-1 two-letter language code
            onSession: function(event, checkout) {
                console.log("session", event.session);
            },
            onPayment: function(event, checkout) {
                console.log("transaction_id", event.transaction_id);
                console.log("href", event.href);
                checkout.destroy();
            },
            onPaymentError: function(event, checkout) {
                console.log("href", event.href);
                checkout.destroy();
            },
            onSessionCancel: function(event, checkout) {
                console.log("href", event.href);
                checkout.destroy();
            },
        })
        .then(function(checkout) {
            console.log("checkout", checkout);
        });
</script>

Typescript example

import {
    dintero,
    SessionLoaded,
    SessionUpdated,
    SessionPayment,
    SessionPaymentError,
    SessionCancel,
} from "@dintero/checkout-web-sdk";

const container = document.getElementById("#checkout-container");

const checkout = await dintero.embed({
    container,
    sid: "T11223344.<short-uuid>",
    language: "no", \\ optional parameter, an ISO 639-1 two-letter language code
    onSession: (event: SessionLoaded | SessionUpdated) => {
        console.log("session", event.session);
    },
    onPayment: (event: SessionPayment) => {
        console.log("transaction_id", event.transaction_id);
        console.log("href", event.href);
        checkout.destroy();
    },
    onPaymentError: (event: SessionPaymentError) => {
        console.log("href", event.href);
        checkout.destroy();
    },
    onSessionCancel: (event: SessionCancel) => {
        console.log("href", event.href);
        checkout.destroy();
    },
});

Using the SDK for a redirect checkout

The user is redirected to the Dintero Checkout to complete payment.

import { dintero } from "dintero-checkout-web-sdk";

const checkout = dintero.redirect({
    sid: "T11223344.<short-uuid>",
});

Bugs

Bugs can be reported to https://github.com/dintero/checkout-web-sdk/issues

Security

Contact us at [e-mail]

Browser support

All major browsers above version N - 1, where N is the most recent version. For Internet Explorer, only version 11 is supported.

The SDK includes a polyfill for promises that is added to the global scope if promises are not supported by the browser.

Building from source

npm install
npm run build

The Dintero Checkout SDK is built with microbundle.

Creating a new release checklist

1. Bump the package version in package.json.
2. Regenerate integrity hash and update the unpgk install instructions in this file shasum -b -a 384 dist/checkout-web-sdk.umd.js | awk '{ print $1 }' | xxd -r -p | base64 | sed "s/^/sha384-/g"
3. Update README.md with new version/sha
4. Publish new version to npm with npm publish --access=public.
5. Tag and create release in Github git tag "v$(jq .version -r < package.json)"

Changelog

[0.0.12]

Added

• Support embed with onPayment event handler.
• Deprecate support for embed with onPaymentAuthorized event handler.