@sprinque/checkout NPM

Sprinque Checkout is a B2B solution that helps merchant's buyers pay their invoices

To start using the Checkout you should: 1) Contact Sprinque to verify your business via juan@sprinque.com; 2) Get instructions on how to implement backend part of the checkout experience; 3) Receive checkout_token from the backend API response;

The embedded checkout can be loaded using a script tag or by installing a node package.

Script tag

When using the script tag, you can use our bundled script we publish at npm, and can be loaded from the unpkg cdn. Here as example:

<!DOCTYPE html>
<html>
  <head>
    <title>Sprinque Embedded Checkout</title>
    <script src="https://unpkg.com/@sprinque/checkout@next/bundled/index.js" crossorigin></script>
  </head>
  <body>
    <button id="button">Pay</button>

    <script>
      SprinqueCheckout.initialize();
      document.getElementById("button").addEventListener("click", () => {
        SprinqueCheckout.open({ token: "TOKEN" });
      });
    </script>
  </body>
</html>

In the bundled script, we also bundle react, which is convenient, but this won't work well when multiple react instances are loaded in the page. In those cases, you can choose to load react yourself, and use the following script:

<!DOCTYPE html>
<html>
  <head>
    <title>Sprinque Embedded Checkout</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@sprinque/checkout@next/umd/index.js" crossorigin></script>
  </head>
  <body>
    <button id="button">Pay</button>

    <script>
      SprinqueCheckout.initialize();
      document.getElementById("button").addEventListener("click", () => {
        SprinqueCheckout.open({ token: "TOKEN" });
      });
    </script>
  </body>
</html>

Import

The module can also be installed as node package and imported in an application. It can be integrated with any framework in this way.

import React, { useEffect } from "react";
import SprinqueCheckout from "@sprinque/checkout";

export function initSprinque() {
  SprinqueCheckout.initialize();
  document.getElementById("my-button").addEventListener("click", () => {
    SprinqueCheckout.open({ token: "TOKEN" });
  });
}

We also expose the sprinque checkout as a react component. In this way, it can be integrated with more freedom in a react app:

import React, { useState } from "react";
import { Checkout } from "@sprinque/checkout";

function App() {
  const [token, setToken] = useState<string | undefined>();

  return (
    <div>
      <button onClick={() => setToken("TOKEN")}>Pay</button>
      <br />

      {token && <Checkout token={token} />}
    </div>
  );
}