@rallycommerce/elements v0.2.0

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);