@agenus-io/sso/checkout-react

Biblioteca de componentes React para checkout Bemony. Componentes prontos para uso com suporte a múltiplos métodos de pagamento, validação de formulários e gerenciamento de estado.

Instalação

npm install @agenus-io/sso/checkout-react
# ou
pnpm add @agenus-io/sso/checkout-react
# ou
yarn add @agenus-io/sso/checkout-react

Componentes Disponíveis

Checkout

Componente principal de checkout com formulários de informações do cliente, endereço e métodos de pagamento.

import { Checkout } from "@agenus-io/sso/checkout-react";

function App() {
  const handleSubmit = (data: any) => {
    console.log("Dados do checkout:", data);
  };

  return (
    <Checkout
      data={paymentLinkData}
      settings={{
        theme: "light",
        title: "Finalizar Compra",
        description: "Complete seus dados para finalizar",
        banner: "",
        thumbnail: "",
        countdown: { enabled: true },
        callToAction: { enabled: true },
        support: { enabled: true },
        headerAlign: "center",
      }}
      onSubmit={handleSubmit}
    />
  );
}

CheckoutWithSummary

Versão do checkout com resumo do pedido e preços, suportando layout dividido ou único.

import { CheckoutWithSummary } from "@agenus-io/sso/checkout-react";

function App() {
  const handleSubmit = (data: any) => {
    console.log("Dados do checkout:", data);
  };

  return (
    <CheckoutWithSummary
      data={paymentLinkData}
      settings={{
        theme: "light",
        title: "Finalizar Compra",
        description: "Complete seus dados para finalizar",
        banner: "",
        thumbnail: "",
        countdown: { enabled: true },
        callToAction: { enabled: true },
        support: { enabled: true },
        headerAlign: "center",
        cardContainer: "split",
        mode: "summary",
      }}
      onSubmit={handleSubmit}
    />
  );
}

Dependências

Este pacote requer as seguintes dependências como peer dependencies:

Obrigatórias

• react ^18 || ^19
• react-dom ^18 || ^19
• next >=13

UI e Estilização

• @heroui/react ^2.8
• @iconify/react ^4
• framer-motion ^12.23.12

Formulários e Validação

• react-hook-form ^7.62.0
• @hookform/resolvers ^5.2.1
• zod ^4.1.1

Desenvolvimento

Scripts Disponíveis

# Build do pacote
pnpm build

# Desenvolvimento com watch mode
pnpm dev

# Verificar linting
pnpm lint

# Verificar tipos TypeScript
pnpm check-types

# Formatar código
pnpm format

# Verificar formatação
pnpm format:check

Estrutura

O pacote é construído com TypeScript e compilado usando tsup, gerando arquivos ESM e CommonJS compatíveis.

Licença

MIT