Rally Elements SDK
This documentation will guide you through integrating Rally customizable UI elements to create a full checkout flow. The elements come with a default configuration, allowing you to add them directly to the DOM. Additionally, you can configure and customize these elements as needed.
Table of Contents
Installation Initialization and Session Configuration Creating a Custom Checkout Flow Adding Elements to HTML Configuring Elements
Installation
To install and configure Rally elements, you can use either the NPM package or include the script on the client side.
NPM Package
Install the package using npm:
npm install @rallycommerce/elements
Import the package and initialize:
import { Rally } from '@rallycommerce/elements';
Rally.init('clientId');
Client-side Script
Include the script and initialize:
<script type="text/javascript" src="https://js.onrally.com/elements/elements.js"></script>
<script>
Rally.init('clientId');
</script>
Initialization and Session Configuration
Configure Rally during initialization by passing a configuration object as an optional second parameter to Rally.init()
. The configuration object allows you to set up various options, such as custom checkout flows, session origins, and line items.
const config = {
customCheckoutFlow: {
disableRedirect: true
},
sessionOrigin: 'landing_page',
lineItems: [
{
productId: 300,
quantity: 1,
includeDetails: true,
}
]
};
Rally.init('clientId', config);
Integrating Rally's Checkout Button into Your Storefront
For guidance on integrating Rally's checkout button into your storefront, please consult the documentation.
Creating a Custom Checkout Flow
You can find a Rally elements demo using Next.js and React at the following URL: https://elements.rally.shop
For a comprehensive guide on custom checkout flows, visit the developers documentation.
Adding Elements to HTML
Rally elements can be added to your HTML file as web components. For example, to add an email element, simply insert the rally-email
tag into your HTML file.
<rally-email></rally-email>
Configuring Elements
Configure Rally elements using one of the following approaches:
Data Attribute
Pass the configuration as a JSON-formatted string using the config
data attribute:
<rally-email config='{"field": {"label": "New email label"}}'></rally-email>
SDK
Use the SDK to configure elements:
const newEmailConfig = {...};
Rally.elements.configure('email_id', newEmailConfig);
// Alternatively, use an HTMLElement instead of the ID:
const emailElement = document.querySelector('rally-email');
Rally.elements.configure(emailElement, newEmailConfig);