@reeelit/integration-react v2.0.0
Installation
Step 1: Install from NPM
npm install --save @reeelit/integration-reactor
yarn add @reeelit/integration-reactStep 2: Add iFrame script
Copy-paste the following snippet into the <head> of each page you plan to use the integrated Reel checkout.
In your test environment:
<script src="https://checkout.reelit.ninja/v2/reel.js"></script>In your production environment:
<script src="https://checkout.joinreel.co/v2/reel.js"></script>Step 3: Initialize
After the script from Step 2 is loaded, call reel.initialize(<partnerId>).
Step 4: Add to app
Use the ReelYoursIn component on your product detail pages to allow users to begin saving with Reel.
import { ReelYoursIn } from '@reeelit/integration-react';
const ProductDetailPage = (props) => {
return (
<ReelYoursIn
className="reel-yours-in"
variant="yours-by"
productConfig={
[
{
product: {
title: 'iPhone 12 - 64GB',
description: 'The newest iPhone on the market, now with... improvements!',
brand: 'Apple',
retailer: 'Best Buy',
image: 'https://rb.gy/hgfrmn',
colorOptions: ['White', 'Rose Gold', 'Black'],
sizeOptions: [],
},
price={100000}
color="Rose Gold",
size={undefined},
url={window.location.href}
}
]
}
htmlTag="p"
onComplete={(body) => {
alert('User completed checkout!');
}}
onDropOff={(body) => {
alert('User dropped off checkout!');
}}
/>
);
};ReelYoursIn component props
className: string? - Use this to customize the styling of the ingress text.variant: enum? - The ingress text to render. See Variants section for details.productConfig: object[] - An array representing one or more products and a user's selected variants.product: object - An object representing a single product.title: string - The name of the product for display.description: string - A description of the product.brand: string - The brand of the product.image: string - The URL of the primary product image.colorOptions: string[] - An array of all color options for the product.sizeOptions: string[] - An array of all size options for the product.retailer: string - The retailer selling the product.
color: string? - The color the user selected. Must be present withincolorOptionsorundefined.size: string? - The size the user selected. Must be present withinsizeOptionsorundefined.price: number - The base price of the product in cents.url: string - The product detail page URL for a product on your website.
htmlTag: JSX.IntrinsicElement? - The html tag to render the ingress text inside of. If not provided, defaults tospan.onComplete: func? - A function that's called when the user successfully starts a Reel for the product.onDropOff: func? - A function that's called when the user drops off checkout.
Variants
We've provided multiple options for the copy displayed when the ReelYoursIn component is rendered, depending on the value you pass to the variant prop:
"save-to-buy": Save to Buy it, debt-free: Create a savings plan with Reel. Start saving now"own-it": Own it, debt-free! Start a savings plan with Reel"yours-by": Save \$X/day, yours calculated savings completion date with Reel. Learn How
This variant is optional but recommended. If you choose not to use one of these options, you must reach out to us and request approval. To customize the ingress
text, simply do not pass a variant, and pass a function as the child of the ReelYoursIn component as in the following example:
import { ReelYoursIn } from '@reeelit/integration-react';
const ProductDetailPage = (props) => {
return (
<ReelYoursIn ...>
{({ showCheckout }) => <span onClick={() => showCheckout()}>Click me!</span>}
</ReelYoursIn>
);
};