@rallycommerce/swell v2.5.1

Integrating the Rally Checkout Button to your Swell storefront

Guide covers both React ♥ Next.js and Vue ♥ Nuxt.js implementations

React ♥ Next.js

You can fork from the existing GitHub repository nextjs-builder created by Swell (our internal starter repository has the checkout button already integrated.).

For successfully integrating the Rally Checkout Button follow the steps bellow.

1. Install the Swell Checkout Button

npm install @rallycommerce/swell

2. Create a Rally Checkout Button component

Create a RallyCheckoutButton.tsx component in the project with the following content 👇. Structure example 👉 lib/rally/RallyCheckoutButton.tsx

import React from 'react'
import { Rally } from '@rallycommerce/swell';
import { SwellRallyCheckoutButtonConfig } from '@rallycommerce/swell/build/swell-checkout-button';
let isInitialized = false;

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'rally-checkout-button': any;
    }
  }
}
interface RallyCheckoutButtonProps {
  customText?: string | undefined;
  customClass?: string | undefined;
  swell?: any;
}

const RallyCheckoutButton = (props: RallyCheckoutButtonProps) => {
  const customClass = props.customClass || "rally-custom-button-class";
  const configuration: SwellRallyCheckoutButtonConfig = {
    swellInstance: props.swell
  };
  if (props.swell && !isInitialized) {
    isInitialized = true;
    Rally.init('rallyClientId', configuration);
  }
  return (<>
    {<rally-checkout-button suppressHydrationWarning={true} custom-class={customClass} custom-text={props.customText} loader="true">
    </rally-checkout-button>}
  </>)
}

export default RallyCheckoutButton;

3. Use the Rally Checkout Button component

The component can now be imported (ex. on the cart page) like this 👇.

import dynamic from 'next/dynamic';
const RallyCheckoutButton = dynamic(() => import('@lib/rally/RallyCheckoutButton'), {
  ssr: false,
})

import { Context } from '../../lib/swell/storefront-data-hooks/src/Context'; 
const { cart, swell } = useContext(Context)


 <RallyCheckoutButton swell={swell} customText="Custom text" customClass="custom-css-class"></RallyCheckoutButton>

Add a Rally Buy Now Button

Ensure you’re using @rallycommerce/swell >= 2.2.0 version.

1. Create a Rally Buy Now Button component

Create a RallyBuyNowButton.tsx component in the project with the following content 👇. Structure example 👉 lib/rally/RallyBuyNowButton.tsx

import { Rally } from '@rallycommerce/swell';
let isInitialized = false;
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'rally-checkout-button': any;
    }
  }
}
interface RallyBuyNowButtonProps {
  customText?: string | undefined;
  customClass?: string | undefined;
  swell: any;
  product: Product;
}

const RallyBuyNowButton = (props: RallyBuyNowButtonProps) => {
  const customClass = props.customClass || "rally-custom-button-class";
  if (rallyConfig?.clientId && !isInitialized) {
    isInitialized = true;
    Rally.init('rallyClientId');
  }

  async function handleClick() {
    const swellInstance = props?.swell;
    const product = props?.product;

    await swellInstance?.cart.setItems([]);
    const cart = await props?.swell.cart.addItem(product);

    Rally.refreshCheckoutSession({ id: cart.id, currency: cart.currency }, (data) => { if (data?.url) { window.location.href = data.url; } });
  }

  return (<>
    {<rally-checkout-button suppressHydrationWarning={true} custom-class={customClass} custom-text={props.customText} loader="true"
      redirect="false" onClick={handleClick}>
    </rally-checkout-button>}
  </>)
}

export default RallyBuyNowButton;

interface Product {
  product_id: string;
  quantity: number;
  variant_id?: string;
  options?: ProductOption[];
}

interface ProductOption {
  name: string;
  value: string;
}

2. Use the Rally Buy Now Button component

The component can now be imported (ex. on the product details page) like this 👇.

import dynamic from 'next/dynamic';
const RallyBuyNowButton = dynamic(() => import('@lib/rally/RallyBuyNowButton'), { ssr: false });

import { Context } from '../../lib/swell/storefront-data-hooks/src/Context'; 
const { swell } = useContext(Context);


<RallyBuyNowButton swell={swell} product={{ quantity: 1, product_id: 'productIdUserWantsToBuy', variant_id: 'variantIdIsOptional', options: 'optionsAreOptional' }} customText="Buy Now"></RallyBuyNowButton>

Vue ♥ Nuxt.js

You can fork from the existing GitHub repository origin-theme created by Swell (our internal starter repository has the checkout button already integrated.).

For successfully integrating the Swell checkout button follow the steps bellow.

1. Install the Swell checkout button

npm install @rallycommerce/swell

2. Create a Rally plugin

Add rally.js plugin in the project with the following content 👇. Structure example 👉 plugins/rally.js

import { Rally } from '@rallycommerce/swell';

export default function ({ $swell }) {
  const configuration = {
    swellInstance: $swell
  };
  Rally.init('clientId', configuration);
}

3. Use the Rally Checkout Button

The web component can now be used (ex. on the cart page) like this 👇.

<rally-checkout-button :custom-text="$t(cartIsUpdating ? 'cart.updating' : 'cart.checkout')" custom-class="btn btn--lg w-full" loader="true">
</rally-checkout-button>