🔒 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 the subscription portal of the end customer 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 you should use Components ?

Seamlessly embed app-specific content into Recurpay's customer portal.
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

Key	Type	Description
position	enum ("side-bar" or "bottom")	Where to render the card. side-bar would render the component on the right section of customer account. bottom would render the component on the bottom section of customer account.
title	object	Configuration for the card's title.
description	object	Configuration for the description text.
input	object	Input field configuration.
button	object	Button configuration.

Title, Description, Input, and Button object

Key	Type	Description
text / placeholder	String	Main display text (or placeholder for input)
id	string (Optional)	HTML element ID
className	string (Optional)	CSS class name