<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',
});
```