npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sprinque-js-sdk-wip

v0.12.5

Published

UI kit to implement Pay by Invoice with Sprinque

Downloads

16

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:

  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:

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