sprinque-js-sdk-wip
v0.12.5
Published
UI kit to implement Pay by Invoice with Sprinque
Downloads
143
Readme
Sprinque JS SDK is here to help you integrate B2B payments.
Please make sure you're registered in our Merchants Portal and generated API token. If you have any problems just contact [email protected] or check our API docs.
This package allows you to:
- Add small code snippet on your site for buyers;
- Initiate the modal with your environment, getTokenUrl*, logo and set callbacks;
- Register a buyer company;
- Verify buyer's contact email;
- Receive instant credit assessment;
- Place an order;
*getTokenUrl should be your backend proxy endpoint that will return temp token based on the const Sprinque API token;
The Modal can be loaded using a script tag or by installing a node package.
Integration
Script tag
When using the script tag, you can use our minified script we publish at npm, and can be loaded from the unpkg cdn. Here as example:
<!DOCTYPE html>
<html>
<head>
<title>Sprinque JS SDK</title>
<script src="https://unpkg.com/sprinque-js-sdk-wip/dist/index.umd.min.js" crossorigin></script>
</head>
<body>
<button id="button">Open</button>
<script>
document.getElementById("button").addEventListener("click", () => {
Sprinque.open({
logoUrl: 'https://your-site/logo.png',
token: '<temporary_token>', // or you can pass getTokenUrl, that must return response like {access: 'token'}
env: 'sandbox', // or 'production'
lang: 'nl', // 'en', 'es', 'de', 'fr' are supported for now
onBuyerResponse: (buyer) => {
console.log('You can call any callback here after the buyer is created:', JSON.stringify(buyer))
}
});
}
</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 { open, close } from "sprinque-js-sdk-wip";
<button
onClick={() => {
open({
logoUrl: 'https://your-site/logo.png',
token: '<temporary_token>', // or you can pass getTokenUrl, that must return response like {access: 'token'}
env: 'sandbox',
lang: 'nl', // 'en', 'es', 'de', 'fr' are supported for now
onBuyerResponse: (buyer) => console.log(`Buyer is created: ${JSON.stringify(buyer)}`)
});
}
}
>
Start Sprinque flow
</button>
<button onClick={close}>Close Sprinque modal</button>Place order
With the examples above you can register a buyer company with Sprinque. But it's also possible to place an order (make transaction authorization) with the JS SDK.
open({
logoUrl: 'https://your-site/logo.png',
token: '<temporary_token>', // or you can pass getTokenUrl, that must return response like {access: 'token'}
env: 'sandbox',
lang: 'nl', // 'en', 'es', 'de', 'fr' are supported for now
onBuyerResponse: (buyer) => console.log(`Buyer is created: ${JSON.stringify(buyer)}`),
// ADD ORDER
onOrderCreated: (order) => console.log(`Order is created: ${JSON.stringify(order)}`),
order: {
merchant_order_id: "unique-order-id",
order_amount: 300.5,
order_currency: "EUR",
shipping_address: {
address_line1: 'Lela Path 99',
address_line2: '#221',
city: 'Liza Spurs',
zip_code: '65568',
country_code: 'NL',
},
metadata: {
customField1: 'customValue1',
},
}
});Returning buyer
After registering the buyer with Sprinque, you can store and use the buyer_id to pre-fetch company details:
open({
// ...
buyerId: 'byr_tsW8HY4lzh0U7s32',
});