Integrating the Rally Checkout Button to your Swell storefront
Guide covers both React
♥ Next.js
React 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 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 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>
♥ Nuxt.js
Vue 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 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>