Checkout

Sell video content directly from your existing website with Shift72 Checkout

Integrating Shift72 Checkout into your site

Shift72 Checkout allows you to sell premium video content directly from your existing website.

This is as simple as loading a small script, and hooking up buttons to trigger the purchase flow.

Basic Example

This example uses https://tvoddemo.shift72.com as the example site. You should replace this with your Shift72 site domain.

<html>
  <head>
    <!-- Loads the Shift72 checkout embed library.  -->
    <script async src="https://tvoddemo.shift72.com/checkout/s72.checkout.js"></script>
    <script>
      window.Shift72CheckoutOptions = {
        // This is the path to your Shift72 site. This is used to access Shift72
        // APIs, as well as the player.
        baseUrl: "https://tvoddemo.shift72.com",

        // You can configure URLs for various links that appear inside checkout.
        // If these aren't provided, the links won't appear, or will just render
        // as text
        links: {
          library: "https://tvoddemo.shift72.com/library.html",
          termsAndConditions: "https://example.com/terms-and-conditions/",
          deviceCompatibility: "https://example.com/how-to-watch/",
          help: "https://example.com/help/",
        },
      };
    </script>
  </head>
  <body>
    <button onclick="s72.checkout.openModal({slug: '/film/71914'})">
      Rent
    </button>
  </body>
</html>

Demo

Here’s an example of this in action.

Note: OAuth isn’t set up on this demo site, as noted below password auth isn’t supported yet in a third party embed!

Boy

Ghost Stories

Ready Player One

How it works

The s72.checkout.js script is a small script that provides the necessary functionality for hosting the Shift72 Checkout iframe. The actual checkout application runs in an iframe.

Opening

You can open the checkout like this:

s72.checkout.openModal({
  slug: '/film/123'
})

Resuming checkout sessions

Resuming a checkout session: some situations require your browser to redirect away to another page – e.g. to an OAuth identity provider, or authorizing certain payment providers.

In these cases, the return URL will eventually navigate back to the page that launched checkout with some extra query params (checkout session ID etc.) The embed script will detect this and re-show the checkout modal to complete the purchase automatically.

Events from checkout

Checkout communicates between the host app and iframe modal via postMessage. These events get proxied through to the host window as events.

Events

  • s72-checkout:ready
  • s72-checkout:opened
  • s72-checkout:resume
  • s72-checkout:close
  • s72-checkout:redirect
  • s72-checkout:purchase-complete

Example






Caveats



OAuth only for third party embed: Due to browser storage partitioning, we
currently only support OAuth logins for third party embed.



If you use this on a site with password logins, Checkout will redirect to the
site’s login page but due to browser security your auth token will not be
available.



Checkout relies on a client-initiated PKCE flow. The site will need to be
configured to support this.