npm package: @reeelit/integration-react
Description: ## Step 1: Install from NPM
Latest version: 2.0.0

# Installation

## Step 1: Install from NPM

```
npm install --save @reeelit/integration-react
```

or

```
yarn add @reeelit/integration-react
```

## Step 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:

```html
<script src="https://checkout.reelit.ninja/v2/reel.js"></script>
```

In your production environment:

```html
<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.

```jsx
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 within `colorOptions` or `undefined`.
  - `size`: _string?_ - The size the user selected. Must be present within `sizeOptions` or `undefined`.
  - `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 to `span`.
- `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:

```jsx
import { ReelYoursIn } from '@reeelit/integration-react';

const ProductDetailPage = (props) => {
  return (
    <ReelYoursIn ...>
      {({ showCheckout }) => <span onClick={() => showCheckout()}>Click me!</span>}
    </ReelYoursIn>
  );
};
```