sprinque-js-sdk-wip
Version:
UI kit to implement Pay by Invoice with Sprinque
113 lines (97 loc) • 3.88 kB
Markdown
<img src="https://sandbox.sprinque.com/static/media/sprinque.b7441cbadfdb83113fadfd6ae062adf3.svg" alt="sprinque" style='display:block;float:none;margin:20px auto;width:200px'>
# [Sprinque](https://www.sprinque.com/) JS SDK is here to help you integrate B2B payments.
Please make sure you're registered in our [Merchants Portal](https://sandbox.sprinque.com/) and generated API token. If you have any problems just contact support@sprinque.com or check our [API docs](https://sprinque.readme.io/reference/overview).
## This package allows you to:
1) Add small code snippet on your site for buyers;
2) Initiate the modal with your environment, getTokenUrl*, logo and set callbacks;
3) Register a buyer company;
4) Verify buyer's contact email;
5) Receive instant credit assessment;
6) 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:
```html
<!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.
```jsx
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.
```js
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:
```js
open({
// ...
buyerId: 'byr_tsW8HY4lzh0U7s32',
});
```