🔒 Requires read-script-tags or write-script-tags access scope.

What are Components ?

Components in Recurpay are reusable UI blocks that partner apps can inject into a merchant’s customer account section using scripts. These components help partners visually integrate their app features, such as loyalty widgets, referral links, input fields, or call-to-action buttons, directly into the customer-facing Recurpay experience.

These components are created and rendered dynamically via JavaScript when your script runs. You can choose where to place them (e.g., sidebar or bottom of the page) and customize their content using configuration options.

Why Use Components ?

• Seamlessly embed app-specific content into Recurpay's customer portal, or Buid a box (If applicable).
• Maintain styling and structural consistency.
• Avoid custom HTML/CSS overhead by using predefined templates.
• Quick integration using simple configuration objects.

Supported UI Components

createCardComponent

The createCardComponent function allows partner apps to inject reusable, styled card sections into Recurpay account pages. This component is ideal for displaying app-specific content, user actions, or input forms in areas like the sidebar or bottom of the page.

How to use

Call the createCardComponent() function from your inline script and pass in a configuration object:

createCardComponent({
  position: "side-bar", // or "bottom"
  title: {
    text: "Loyalty Program",
    id: "loyalty-title",
    className: "custom-title"
  },
  description: {
    text: "Earn and redeem points with every purchase.",
    id: "loyalty-desc",
    className: "custom-desc"
  },
  input: {
    placeholder: "Enter your loyalty ID",
    id: "loyalty-input",
    className: "input-style"
  },
  button: {
    text: "Submit",
    id: "loyalty-submit",
    className: "btn-primary"
  }
});

Parameters breakdown

Title, Description, Input, and Button object