Getting Started

As part of onboarding flow, we expect the partner to call the Signup api and store the organization & user id returned upon creation of a company account.

curl https://staging.payroo.com.au/api/partner/organization/signup \
  --request POST \
  --header 'Content-Type: application/json' \
  --header 'x-api-key: YOUR_SECRET_TOKEN' \
  --data '{
  "user": {
    "first_name": "John",
    "last_name": "Smith",
    "email": "john.smith@acmecorp.com.au",
    "phone": "+61412345678"
  },
  "organization": {
    "name": "ACME Corporation",
    "abn": "12345678901",
    "address": {
      "addressLine1": "123 Business Street",
      "addressLine2": "Suite 456",
      "suburb": "Sydney",
      "state": "NSW",
      "code": "2000"
    }
  }
}'

Once the organisation account is created, then there are two options for embedding the Payroll components.

Options

1. iFrame based Embeds

This is an easier integration choice but less customisable.

This involves creating an embed session and generating a signed component URL using the sessionId.

Step 1

curl https://sandbox-embed.payroo.com.au/embed/session \
  --request POST \
  --header 'Content-Type: application/json' \
  --header 'X-Api-Key: YOUR_SECRET_TOKEN' \
  --data '{
  "account": {
    "id": "d56d3914-faaa-49d4-b23b-56393ac4c5f2"
  },
  "user": {
    "id": "8ba609ea-5d82-4e03-b7be-1601f2c72254",
    "name": "John Doe"
  },
  "component": "list_payruns"
}'

Step 2

curl https://sandbox-embed.payroo.com.au/embed/create-url \
  --request POST \
  --header 'Content-Type: application/json' \
  --header 'X-Api-Key: YOUR_SECRET_TOKEN' \
  --data '{
  "sessionId": "_dK9D3r6zI4ZCiUc_mK",
  "component": "list_payruns",
  "params": {
    "orgId": "org_123456789"
  }
}'

Follow the steps and examples outlined in the below repository for detailed information.

https://github.com/payroo-group/embed-sdk

2. Components

A modern, secure, and lightweight React component library designed specifically for embedded payroll solutions. Built with TypeScript and optimized for performance, security, and ease of integration.

This involves installing the npm package and mounting the component onto the dom.

npm install payroo-embedded-components

const core = new PayrollComponents({
  environment: "sandbox",
  onSessionCreate: handleSessionCreate,
});

// Create the company overview component and mount it to the container
{
  const component = new CompanyOverviewComponent(core, {
    companyId: "78cc8d2b-8cae-4cbe-ba00-1103a275e1a8",
  });
  component.mount("#company-overview-container");
} // scope component variable to the block