Payroo Embed JavaSript SDK

Installation

JavaScript/TypeScript SDK

npm install @payroo/embed-sdk

Usage

To embed a payroll component, you must first create an embed session and a signed component URL using the Payroo API.

Step 1: Create an Embed URL

You'd typically do this on your server-side code. Note: an API key is required to access the Payroo embed API.

You can find an example of the server implementation in the examples/server directory.

Read API Documentation

Step 2: Embed the Component

import { Embed, Events } from "@payroo-group/embed-sdk";

// Embed URL that you received from the server
const url = "https://embed.payroo.com.au/component/...";

// The HTML element where the embed will be rendered
const container = window.document.getElementById("payrun-history");

// Create an embed instance
const embed = new Embed(url, options);

// Render the embed component onto the container element
embed.mount(container);

// Listen for events
embed.on(Events.COMPONENT_READY, () => {
  console.log("Hide the loading spinner now!");
});

// Remove the embed component from the DOM
embed.unmount();

Options

| Name | Usage | Default | | --------------- | --------------- | --------------- | | extraAllowedOrigins | In case embed URL is from a different origin, you can the origin in this options. Example: ["https://sandbox-embed.payroo.com.au"]| ["https://embed.payroo.com.au"] | | autoHeightAdjust | Adjusts the height of the embed automatically based on the content inside | true |

Auto Height Adjustment

When using the autoHeightAdjust option, the embed will automatically adjust its height based on the content inside. This is useful for components that may have dynamic content or varying heights. For this to work, the container element should have the style overflow-y: auto applied to it.

Example Applications

You can find example applications demonstrating the usage of the Payroo embed components in the examples directory.

1. Server Example - A simple server implementation to create embed URLs.
2. React Example - A React application demonstrating the
3. JavaScript Example - A JavaScript application demonstrating the usage of the embed components.

Development

Install Dependencies

npm install