Widgets usage in React project

Widget usage in React context is in preview.

In order to use the widgets in a React context, your app has to import the Raylo Pay react script dynamically, and set it up before usage.

This page shows an example of the different parts needed to make it work.

1. Import and set up Raylo Pay widgets

// raylopay.js:

import React from 'react';

// export settings to use in the widgets
// these would normally be set at build time or retrieved from your backend
export const merchantId = '<constant, provided by Raylo>';
export const scriptOrigin = process.env.NODE_ENV === 'production'
    ? 'https://widgets.raylopay.com'
    : 'https://widgets.staging.raylopay.com';

// import widgets script
// the argument to import() has to be a constant expression, see https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
const { RayloPayIntegration, RayloPayProductWidget, RayloPayCheckoutWidget } =
    process.env.NODE_ENV === 'production'
        ? await import('https://widgets.raylopay.com/react/raylopay.js')
        : await import('https://widgets.staging.raylopay.com/react/raylopay.js');

// initialize environment
RayloPayIntegration.init({ React, scriptOrigin });

// export react components
export { RayloPayProductWidget, RayloPayCheckoutWidget };

Note: while the React support is in preview, there could be some unsolved problems, e.g. compatibility with ESM or specific loaders might be under development.

As a workaround, you may need to have a more defensive setup and rely on global scope objects as a fallback to get the exported elements:

// raylopay.js:

import React from 'react';

// export settings to use in the widgets
// these would normally be set at build time or retrieved from your backend
export const merchantId = '<constant, provided by Raylo>';
export const scriptOrigin = process.env.NODE_ENV === 'production'
    ? 'https://widgets.raylopay.com'
    : 'https://widgets.staging.raylopay.com';

// import widgets script
let { RayloPayIntegration, RayloPayProductWidget, RayloPayCheckoutWidget } = {};
try {
    // the argument to import() has to be a constant expression, see https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
    ({ RayloPayIntegration, RayloPayProductWidget, RayloPayCheckoutWidget } =
        process.env.NODE_ENV === 'production'
            ? await import('https://widgets.raylopay.com/react/raylopay.js')
            : await import('https://widgets.staging.raylopay.com/react/raylopay.js'));
} catch {}

// depending on the loader, an exception might be thrown or the imported module might be empty -- fallback to legacy properties shipped in the global scope
if (!RayloPayIntegration && window.RayloPayIntegration && window.RayloPayReactProductWidget && window.RayloPayReactCheckoutWidget) {
    ({ RayloPayIntegration, RayloPayReactProductWidget: RayloPayProductWidget, RayloPayReactCheckoutWidget: RayloPayCheckoutWidget } = window);
} else {
    throw new Error('Importing RayloPay failed');
}

// initialize environment
RayloPayIntegration.init({ React, scriptOrigin });

// export react components
export { RayloPayProductWidget, RayloPayCheckoutWidget };

2. Using the widgets in your app

After the initial setup, you can use the widgets in your app. Here is a minimal example app:

// App.js

import { useCallback, useState } from 'react';
import {
  RayloPayProductWidget,
  RayloPayCheckoutWidget,
  merchantId,
  scriptOrigin,
} from './raylopay';

// this would be implemented by you according to how you get data from your backend
import { useGetProductJwt, useGetCheckoutJwt } from './backendRaylopayHooks';

export default function App() {
  const [initialAmount, setInitialAmount] = useState(null);
  const [recurringAmount, setRecurringAmount] = useState(null);

  const setLoadedPrice = useCallback((e) => {
    setInitialAmount(e.initialAmount);
    setRecurringAmount(e.recurringAmount);
  }, []);

  const hasPrice = initialAmount !== null && recurringAmount !== null;
  const priceLabel = hasPrice
    ? `Lease from ${recurringAmount}/mo. ${initialAmount} upfront today.`
    : 'Lease for less.';

  const checkoutUnavailable = useCallback(() => {
      // instead of printing a message you can disable the ckechout option
      // and show a different label
      // e.g. "Raylo Pay is not available for the items in your basket"
      console.warn('Raylo Pay is unavailable');
  }, []);

  const productJwt = useGetProductJwt({ /* ... params needed for backend call */ });
  const checkoutJwt = useGetCheckoutJwt({ /* ... params needed for backend call */ });
  return (
    <>
      <h3>Product widget -- would be placed in the product pages</h3>
      <RayloPayProductWidget
        merchantId={merchantId}
        JWTToken={productJwt}
        onPriceLoaded={setLoadedPrice}
        onCheckoutUnavailable={checkoutUnavailable}
        className="rayloPayProductPageWidget"
      />
      
      <h3>Checkout label and widget -- would be placed in the checkout page</h3>
      <div id="LoadedPrice">
        <img
          src={scriptOrigin + '/raylopay-logo.svg'}
          style={{
            display: 'inline-block',
            verticalAlign: 'middle',
            marginRight: '5px',
          }}
          alt="Raylo Pay" />
        {priceLabel}
      </div>
      <RayloPayCheckoutWidget
        merchantId={merchantId}
        JWTToken={checkoutJwt}
        className="rayloPayCheckoutPageWidget"
      />
    </>
  );
}

Widget properties

Both widgets support the props mentioned in the Widget properties page.

...props

Additionally the react widgets will also forward additional props to the container created for the widget; use these to set props like id, className, style, etc.

In the example app above, className is handled as one of those extra props.