@flowpay-io/embed-react

React components and hooks for Flowpay embed integration.

Installation

npm add @flowpay-io/embed-react

Usage

Using useFlowpayEmbed hook with FlowpayEmbed component (recommended):

import { FlowpayModal, useFlowpayEmbed } from "@flowpay-io/embed-react";
import { createSignedLogin } from "@flowpay-io/embed-auth/client";
import { IsoCountryCode } from "@flowpay-io/shared/types";
import { OverlayLoader } from "./components/OverlayLoader";
import "@flowpay-io/embed-react/assets/modal.css";

function App() {
  const flowpay = useFlowpayEmbed({
    embedOrigin: "https://my.flowpay.io",
    getLaunchPayload: async () => {
      return {
        country: IsoCountryCode.CZ,
        merchantId: "merchant-123",
        partnerCode: "partner-abc",
        userId: "user-456",
        regNum: "12345678",
        email: "[email protected]",
        phone: "+420123456789",
        // createdAt is optional - will be auto-generated by the client if autoSetCreatedAt is enabled (default: true)
      };
    },
    signatureProvider: {
      signPayload: async (payload) => {
        // Use createSignedLogin to canonicalize, encode, and sign the payload
        // It delegates signature generation to your server (recommended)
        return await createSignedLogin(
          payload,
          async (canonicalPayload: string) => {
            const response = await fetch("/api/sign-payload", {
              method: "POST",
              body: JSON.stringify({ payload: canonicalPayload }),
            });
            const { signature } = await response.json();
            return signature;
          }
        );
      },
    },
  });

  return (
    <>
      {/* Open Flowpay button */}
      <button onClick={flowpay.open}>Open Flowpay</button>

      {/* optional: show loading overlay while Flowpay is loading */}
      <OverlayLoader isLoading={flowpay.isLoading} />

      {/* Flowpay modal */}
      <FlowpayModal
        client={flowpay.client}
        {...flowpay.modalProps}
        visible={flowpay.isActive}
      />
    </>
  );
}

Links

• Homepage: https://www.flowpay.io
• Documentation: https://developers.flowpay.io