Payabli’s Embedded Components can be used in a React application following the same configuration patterns as in a vanilla JavaScript application.

Visit the React Integration Example to see Payabli’s embedded components in a React application.

​
Usage

See Library URLs for important information about embedded components library URLs.

​
Step 1: Create the hook

Create a hook that allows you to use the embedded component and execute its methods. The hook needs to inject the Payabli library script and initialize the embedded component with the provided configuration. Make a new file for the usePayabli hook and add the following code:

// usePayabli.ts
import { useState, useEffect, useRef, useCallback } from "react";

const useScript = (src: string) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const existingScript = document.querySelector(`script[src="${src}"]`);

    const onLoad = () => {
      setIsLoaded(true);
    };

    if (!existingScript) {
      const script = document.createElement("script");
      script.src = src;
      script.async = true;

    script.addEventListener("load", onLoad);

    document.body.appendChild(script);
    
    return () => {
      script.removeEventListener("load", onLoad);
      document.body.removeChild(script);
    };
        } else {
    if (existingScript.getAttribute("data-loaded") === "true") {
      setIsLoaded(true);
    } else {
      existingScript.addEventListener("load", onLoad);
    }
        }
  }, [src]);

  return isLoaded;
};

declare var PayabliComponent: any;

export const usePayabli = (
  options: any,
  method: string,
  parameters: any = null,
  production: boolean = false
) => {
  const [payOptions, setPayOptions] = useState(options);
  const [isInitialized, setIsInitialized] = useState(false);
  const payComponentRef = useRef<any>(null);
  const initCallbacks = useRef<(() => void)[]>([]); // Queue for functions waiting on initialization

  const scriptSrc = production ? "https://embedded-component.payabli.com/component.js" : "https://embedded-component-sandbox.payabli.com/component.js";
  
  const isScriptLoaded = useScript(scriptSrc);

  useEffect(() => {
    if (isScriptLoaded) {
      payComponentRef.current = new PayabliComponent(payOptions);
      setIsInitialized(true);
  
      // payabliExecute queued callbacks
      initCallbacks.current.forEach((cb) => cb());
      initCallbacks.current = []; // Clear the queue
    }
  }, [isScriptLoaded, payOptions]);

  useEffect(() => {
    if (isInitialized && payComponentRef.current) {
      payComponentRef.current.updateConfig(payOptions);
    }
  }, [isInitialized, payOptions]);

  const payabliReinit = useCallback(() => {
    if (isInitialized && payComponentRef.current) {
      payComponentRef.current.payabliExec("reinit");
    }
  }, [isInitialized]);

  const payabliExec = useCallback(() => {
    const payabliExecuteMethod = () => {
      if (parameters != null) {
        payComponentRef.current.payabliExec(method, parameters);
      } else {
        payComponentRef.current.payabliExec(method);
      }
    };

    if (isInitialized && payComponentRef.current) {
      payabliExecuteMethod();
    } else {
      initCallbacks.current.push(payabliExecuteMethod); // Queue the payabliExecution
    }
  }, [isInitialized, method, parameters]);

  return [payOptions, setPayOptions, payabliExec, payabliReinit];
};

The hook receives the following arguments:

  • options: The configuration object for the embedded component.
  • method: The method to execute in payabliExec.
  • parameters: An optional structure that lets you pass objects to the method (example: paymentMethod, paymentDetails, or customerData).
  • production: A boolean value that determines whether to use the production or sandbox environment. By default, this is set to false.

The hook returns an array with the following elements:

  • payOptions: The configuration object for the embedded component.
  • setPayOptions: A function to update the configuration object.
  • payabliExec: A function to execute the embedded component’s method.
  • payabliReinit: A function to reinitialize the embedded component.

​
Step 2: Create the component

Create a new PayabliCheckout component that passes in the configuration object for the embedded component to the usePayabli hook. The PayabliCheckout component uses the payabliExec function to execute the embedded component’s method. Create a new file in the same directory and add the following code:

There are multiple types of embedded components with different use cases. See the Embedded Components Overview to decide which component type is best for you.

See Also:

Integration Guide: EmbeddedMethod UI

Integration Guide: ExpressCheckout UI

Integration Guide: Extend Embedded Components with the Temporary Token Flow

Integration Guide: PayMethod UI

Integration Guide: VirtualTerminal UI

Was this page helpful?

ExpressCheckout UIApple Pay Overview