@sprinque/checkout
v1.7.0
Published
To start using the Checkout you should: 1) Contact Sprinque to verify your business via [email protected]; 2) Get instructions on how to implement backend part of the checkout experience; 3) Receive checkout_token from the backend API response;
Downloads
7
Readme
Sprinque Checkout is a B2B solution that helps merchant's buyers pay their invoices
To start using the Checkout you should:
- Contact Sprinque to verify your business via [email protected];
- Get instructions on how to implement backend part of the checkout experience;
- 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>
);
}