Client integration

The client is managed by a script that opens a dialog for either onboarding a new customer or logging in an existing one. The action is determined by the scope parameter in the authorization request URL.

Script tag

<!-- this id is required -->
<script
  id="ledyer-access"
  src="https://access.sandbox.ledyer.com/bootstrap.js"
></script>

Programmatic example

// Include in onMount or similar hook
const s = document.createElement("script");

s.setAttribute("src", "https://access.sandbox.ledyer.com/bootstrap.js");

document.body.appendChild(s);

src

string

This script decides which environment to use:
production: https://access.live.ledyer.com/bootstrap.js
sandbox: https://access.sandbox.ledyer.com/bootstrap.js

Authorize a customer

After a user clicks Login or Sign up in your UI, call the following method, which our script tag has placed on the window object:

window.ledyer.access.api.authorize(requestUrl);

Here is a basic example of what an implementation might look like:

const handleProceedWithLedyer = async (authCodeUrl) => {
  try {
    const authResponse = await window.ledyer.access.api.authorize(authCodeUrl);

    // ... some time will pass while the user is interacting with the dialog

    if (authResponse) {
      // if a user successfully logs in or signs up, the authResponse will contain
      // `state` and `code` properties.
      const { state, code } = authResponse;
      // You may now send this to your backend, make sure to verify the state parameter with your oauth2 library,
      // and then send the code to Ledyer BE in exchange for an access token
      // redirect the user to a success page
    }
  } catch (error) {
    // errors such as unauthorized during onboarding is handled in the ledyer dialog and the user is informed.
    // This catch block is for unexpected errors.
  }
};

<button onclick="handleProceedWithLedyer(authCodeUrl)">Login</button>

Once you have verified state you maybe proceed to the next and final step.