npm: @redotech/redo-hydrogen

Redo Free Returns Coverage

Redo offers a state of the art return management software which integrates seamlessly into Shopify and Hydrogen stores. It provides a customer portal to submit returns and a merchant app to monitor and manage returns. In the event of a return, Redo provides free return labels and package protection for an optional add-on fee which users add at checkout time.

<aside> 💡

It’s important that users provide explicit consent to have an add-on product in order to be compliant with Shopify’s rules regarding add-on products. To achieve this, users should be given both options as checkout buttons and that they select one. Users provide explicit consent for the add-on by clicking the “Checkout+” option or by clicking “Checkout without free returns”. Just having a toggle that they can optionally change is not enough.

</aside>

Quickstart

For Redo Hydrogen stores, we provide the @redotech/redo-hydrogen npm package which provides wrapper utilities around our public API.

Option 1: Use checkout buttons component

Add the RedoProvider

// root.jsx or cart.jsx

import { RedoProvider } from "@redotech/redo-hydrogen";
// ...

export function ExampleCartMain = ({ originalCart }) => {
	const optimisticCart = useOptimisticCart(originalCart);

	return (
		<div>
			<RedoProvider
				cart={optimisticCart}
				storeId={'679d97672916716ed50b559f'/* Team ID from Redo Merchant portal URL */}
			>
				<ExampleCartDetail cart={optimisticCart} />
			</RedoProvider>
		</div>
	);
};

// ExampleCartDetail.jsx

import { RedoCheckoutButtons } from "@redotech/redo-hydrogen/src";
// ...

const ExampleCartDetail = ({ cart }) => {
	const optimisticCart = useOptimisticCart(originalCart);
	
	return (
		<div>
			<ExampleCartProductList />
			<ExampleCartSummary />
			{/* ... */}
			<RedoCheckoutButtons
				onClick={siteAnalytics.fire()}
			>
				{/* Content inside of checkout buttons will be shown if Redo is deactivated from the store or during initial setup */}
				<ExistingCheckoutButton>Checkout</ExistingCheckoutButton>
			</RedoCheckoutButtons>
		</div>
	);
}

Option 2: Manual enable/disable with useRedoCoverageClient()

For more custom options, you use the useRedoCoverageClient() hook. It’s important that you await after calling redo.enable().

// root.jsx or cart.jsx (identical setup)

import { RedoProvider } from "@redotech/redo-hydrogen";
// ...

export function ExampleCartMain = ({ originalCart }) => {
	const optimisticCart = useOptimisticCart(originalCart);

	return (
		<div>
			<RedoProvider
				cart={optimisticCart}
				storeId={'679d97672916716ed50b559f'/* Team ID from Redo merchant portal URL */}
			>
				<ExampleCartDetail cart={optimisticCart} />
			</RedoProvider>
		</div>
	);
};

// ExampleCartDetail.jsx (using <YourCustomButton/> instead of pre-built <RedoCheckoutButtons />

import { useRedoCoverageClient } from "@redotech/redo-hydrogen";
// ...

const CartDetail = ({ cart }) => {
	const redo = useRedoCoverageClient();

	return (
		<div>
			<ExampleCartProductList cart={cart} />
			<ExampleCartSummary cart={cart} />
			{/* ... */}
			<YourCustomButton onClick={() => await redo.enable()}>Checkout+ | {formatMoney(cart.cost.totalAmount + redo.price}</YourCustomButton>
			<YourCustomButton onClick={() => await redo.disable()}>Checkout without free returns</YourCustomButton>
		</div>
	);
}

Redo Info Card

This component is provided as an optional addition to your checkout design. It has an assorted number of customizations that are detailed below.

import { RedoCheckoutButtons, RedoInfoCard } from "@redotech/redo-hydrogen";
// ...

const ExampleCartDetail = ({ cart }) => {
	const optimisticCart = useOptimisticCart(originalCart);
	
	return (
		<div>
			<ExampleCartProductList />
			<ExampleCartSummary />
			{/* ... */}
			{/* Similar to the RedoCheckoutButtons, if Redo is deactivated, this card will not appear*/}
			<RedoInfoCard />
			{/*...RedoCheckoutButtons...*/}
		</div>
	);
} 

Without any props passed, the info card will appear as show below.