Overview

The Reusely Trade-In Widget allows merchants to:

Generate trade-in quotes Display trade-in carts and details Handle In-Store or Mail-In trade-ins Trigger checkout after payment completion The widget is configurable and can be embedded into existing checkout or product flows.

Loading the Script

Include the Reusely widget script on your page:

<script src="https://widget.reusely.com/reusely.js"></script>

Getting Required IDs

Before integrating Reusely, you will need the following identifiers:

Tenant ID

The Tenant ID identifies your Reusely account and is required when initializing the widget.

How to get Tenant ID:

Go to https://app.reusely.com/settings/widget
Locate the Widget Code section
Copy the example widget code provided
The Tenant ID value can be found inside inside the Reusely ({...}) configuration

Store ID

The Store ID identifies a specific store location and is required when using the TradeInQuote element.

How to get Store ID:

You can use this endpoint to retrieve the store ID, use the returned ID field from the API response as the Store ID value

Initialize Reusely

Initialize Reusely by calling Reusely(options)

Available Options

Option	Type	Required	Default	Description
tenantId	string	Yes	-	Your Reusely tenant ID
tradeInType	'InStore' or 'MailIn'	No	InStore	Trade-in flow type
isShopifyDiscount	Boolean	No	true	Enable Shopify discount integration
lang	String	No	en	Language code
colors	Object	No	-	Customize primary color palette

Colors Configuration

colors: {
  primary: {
    50: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
  };
}

Create Elements

To generate UI components use:

Reusely(...).createElement('ElementName',  options)

Available elements:

TradeInQuote
TradeInCart
TradeInCartDetail

TradeInQuote

Generates a trade-in quote UI.

Option	Type	Required	Default	Description
storeId	string \| number	Yes	-	Store identifier
termsUrl	String	No	-	Terms & Conditions URL
privacyPolicyUrl	String	No	-	Privacy Policy URL
customerEmail	String	No	-	Prefilled customer email
customerPhone	String	No	-	Prefilled customer phone
isShopifyDiscount	Boolean	No	True	Enable Shopify discount
buttonStyle	Object	No	-	Custom button styling configuration
imageUpload	Object	No	-	Image upload configuration

Button Style (Optional)

buttonStyle: {
  border?: string; // default: '1px solid #d5dbe0'
  borderRadius?: string; // default: '0.25rem'
  boxShadow?: string; // default: 'unset'
}

Image Upload (Optional)

imageUpload: {
  enabled?: boolean; // default: false
  required?: boolean; // default: false
}

Example Usage

<div id="trade-in-quote"></div>
<script>
  document.body.appendChild(
    Object.assign(document.createElement('script'), {
      src: 'https://widget.reusely.com/reusely.js',
      onload: () => {
        const reusely = Reusely({
          tenantId: 'YOUR_TENANT_ID',
          tradeInType: 'MailIn',
          isShopifyDiscount: false,
          colors: {
            primary: {
              50: '#e7edea',
              100: '#b6c4bf',
              200: '#92a6a0',
              300: '#607f74',
              400: '#416659',
              500: '#124030',
              600: '#12392d',
              700: '#0e2c23',
              800: '#0c221b',
              900: '#081b14',
            },
          },
        })

        reusely
          .createElement('TradeInQuote', {
            storeId: 2,
            termsUrl: '/terms',
            buttonStyle: {
              border: '1px solid #131313',
              borderRadius: '0.25rem',
              boxShadow: '0px 4px 5px 0px rgba(18, 18, 18, 0.30)',
            },
          })
          .mount('#trade-in-quote')
      },
    })
  )
</script>

TradeInCart

Display the trade-in cart summary.

Options: None

TradeInCartDetail

Displays detailed trade-in cart information

Options: None

Mount Elements

After creating an element, mount it to a DOM target.

Reusely(...)
  .createElement('TradeInCart')
  .mount('#target-element')

Checkout

Reusely(...).checkout(options)

Checkout Options

Required for InStore and MailIn

Field	Type	Required
firstName	String	Yes
lastName	String	Yes
email	String	Yes
shipping	String	Yes

Mail-In Shipping (Required)

interface Shipping {
  firstName?: string;
  lastName: string;
  address?: string;
  city?: string;
  state?: string;
  zip?: string;
  phone?: string;
  country?: string;
  suite?: string;
}

Events

Reusely exposes browser events for trade-in state changes.

Add Trade-In Item

window.addEventListener('addReuselyTradeIn', () => {
	// Called after a trade-in item is added
})

Remove Trade-In Item

window.addEventListener('removeReuselyTradeIn', () => {
	// Called after a trade-in item is removed
})

Example Integration

Below is a simplified real-world example showing:

Trade-in cart rendering
Custom checkout form
Checkout submission

<script src="https://widget.reusely.com/reusely.js"></script>
<div id="buyback-cart"></div>
<form id="trade-in-fields">
  <input name="trade_in_first_name" required />
  <input name="trade_in_last_name" required />
  <input type="email" name="trade_in_email" required />
  <button type="submit">Submit Trade-In</button>
</form>

<script>
  const reusely = Reusely({
    tenantId: 'YOUR_TENANT_ID',
    tradeInType: 'InStore',
    isShopifyDiscount: false,
  });

  reusely.createElement('TradeInCart').mount('#buyback-cart');

  document
    .querySelector('#trade-in-fields')
    .addEventListener('submit', (e) => {
      e.preventDefault();

      const formData = new FormData(e.target);

      reusely.checkout({
        firstName: formData.get('trade_in_first_name'),
        lastName: formData.get('trade_in_last_name'),
        email: formData.get('trade_in_email'),
      });
    });
</script>

Example Integration - Shopify Checkout (Custom Pixel)

This example shows how to trigger Reusely checkout automatically after a successful Shopify checkout using Shopify Customer Events (Custom Pixels)

Shopify Setup

Go to Settings → Customer events → Custom pixels
Click Add custom pixel
Set Permission to Not required
Set Data sale to Data collected qualifies as data sale and supports limited data use

Shopify Custom Pixel Code

<script>
analytics.subscribe('checkout_completed', (event) => {
  document.body.appendChild(
    Object.assign(document.createElement('script'), {
      src: 'https://widget.reusely.com/reusely.js',
      onload: () => {
        const reusely = Reusely({
          tenantId: 'YOUR_TENANT_ID',
          isShopifyDiscount: false,
          tradeInType: 'MailIn',
          colors: {
            primary: {
              50:  '#D4D4D7',
              100: '#B5B5B9',
              200: '#8A8A92',
              300: '#626269',
              400: '#3B3B3F',
              500: '#1D1D1F',
              600: '#020202',
              700: '#000000',
              800: '#000000',
              900: '#000000',
            },
          },
        })

        const checkout = event.data.checkout

        reusely.checkout({
          firstName: checkout.shippingAddress?.firstName || '',
          lastName: checkout.shippingAddress?.lastName || '',
          email: checkout.email || '',
          shipping: {
            firstName: checkout.shippingAddress?.firstName || '',
            lastName: checkout.shippingAddress?.lastName || '',
            phone: checkout.shippingAddress?.phone || '',
            address: checkout.shippingAddress?.address1 || '',
            suite: checkout.shippingAddress?.address2 || '',
            city: checkout.shippingAddress?.city || '',
            state: checkout.shippingAddress?.province || '',
            zip: checkout.shippingAddress?.zip || '',
            country: checkout.shippingAddress?.countryCode || '',
          },
        })

        console.log('Checkout Trade-In')
      },
    })
  )
})
</script>