@v7-pay/react 0.1.0

package/README.md

@@ -0,0 +1,131 @@
+# @v7-pay/react
+
+React components for embedding V7 Pay checkout in your app. Stripe Embedded Checkout–style API—no manual iframe or postMessage handling.
+
+## Installation
+
+```bash
+npm install @v7-pay/react
+```
+
+## Prerequisites
+
+1. **V7 Pay Seller Account** — Approved SELLER tenant in V7 Pay
+2. **API Credentials** — Create credentials at Desenvolvedor → Credenciais
+3. **Session creation** — Your backend must create checkout sessions via `POST /api/v1/checkout/sessions` (JWT auth)
+
+See the V7 Pay embed documentation for session creation and webhook setup.
+
+## Quick Start
+
+### 1. Create a server action to fetch the session ID
+
+`fetchClientSecret` must run on your server. It creates a checkout session and returns the session ID (as `clientSecret`).
+
+```ts
+// app/actions/checkout.ts
+'use server'
+
+const V7_PAY_BASE = process.env.V7_PAY_BASE_URL!
+const CLIENT_ID = process.env.V7_PAY_CLIENT_ID!
+const CLIENT_SECRET = process.env.V7_PAY_CLIENT_SECRET!
+
+async function getAccessToken() {
+  const res = await fetch(`${V7_PAY_BASE}/api/auth/token`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ client_id: CLIENT_ID, client_secret: CLIENT_SECRET }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw new Error(data.error || 'Token failed')
+  return data.access_token
+}
+
+export async function fetchClientSecret() {
+  const token = await getAccessToken()
+  const res = await fetch(`${V7_PAY_BASE}/api/v1/checkout/sessions`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+      'Idempotency-Key': `checkout-${Date.now()}`, // optional but recommended
+    },
+    body: JSON.stringify({ amount: 9990, currency: 'BRL' }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw new Error(data.error || 'Create session failed')
+  return { clientSecret: data.id }
+}
+```
+
+### 2. Use the components
+
+```tsx
+// app/checkout/page.tsx
+import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@v7-pay/react'
+import { fetchClientSecret } from './actions/checkout'
+
+const V7_PAY_BASE = process.env.NEXT_PUBLIC_V7_PAY_URL || 'https://pay.v7.app'
+
+export default function CheckoutPage() {
+  return (
+    <div id="checkout">
+      <EmbeddedCheckoutProvider
+        options={{
+          baseUrl: V7_PAY_BASE,
+          fetchClientSecret,
+          onComplete: ({ sessionId }) => {
+            // Optional: close modal, redirect, show success
+          },
+          onCancel: ({ sessionId }) => {
+            // Optional: handle cancel
+          },
+          allowedOrigin: process.env.NEXT_PUBLIC_APP_URL, // Recommended in production
+        }}
+      >
+        <EmbeddedCheckout />
+      </EmbeddedCheckoutProvider>
+    </div>
+  )
+}
+```
+
+## API
+
+### `EmbeddedCheckoutProvider`
+
+Wraps the checkout and provides configuration.
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `options` | `EmbeddedCheckoutOptions` | Yes | See below |
+
+### `EmbeddedCheckoutOptions`
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `baseUrl` | `string` | Yes | V7 Pay base URL (e.g. `https://pay.v7.app`) |
+| `fetchClientSecret` | `() => Promise<{ clientSecret: string }>` | Yes | Server action that creates a session and returns the session ID as `clientSecret` |
+| `onComplete` | `(params: { sessionId: string }) => void` | No | Called when payment succeeds |
+| `onCancel` | `(params: { sessionId: string }) => void` | No | Called when user cancels |
+| `allowedOrigin` | `string` | No | Only accept postMessage from this origin. **Recommended in production.** |
+
+### `EmbeddedCheckout`
+
+Renders the checkout iframe. Accepts optional `className` and `style` props.
+
+```tsx
+<EmbeddedCheckout className="min-h-[500px]" style={{ borderRadius: 8 }} />
+```
+
+## Security
+
+- **Never** expose `client_secret` or API tokens in frontend code. Use `fetchClientSecret` only as a server action (or server-side API route).
+- Set `allowedOrigin` in production to validate postMessage origin:
+  ```ts
+  allowedOrigin: process.env.NEXT_PUBLIC_APP_URL
+  ```
+
+## Server-side confirmation
+
+For reliable payment recording, configure a webhook URL in V7 Pay (Desenvolvedor → Webhooks). You receive `transaction.succeeded` and other events when payments complete.

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type EmbeddedCheckoutOptions = {
+    /** Base URL of V7 Pay (e.g. https://pay.v7.app) */
+    baseUrl: string;
+    /** Called to get the session ID. Typically a server action that creates a session and returns it. */
+    fetchClientSecret: () => Promise<{
+        clientSecret: string;
+    }>;
+    /** Called when payment succeeds. Optional; postMessage is always sent to parent. */
+    onComplete?: (params: {
+        sessionId: string;
+    }) => void;
+    /** Called when user cancels. Optional; postMessage is always sent to parent. */
+    onCancel?: (params: {
+        sessionId: string;
+    }) => void;
+    /** If set, only accept postMessage from this origin (e.g. https://your-app.com). Recommended in production. */
+    allowedOrigin?: string;
+};
+declare function EmbeddedCheckoutProvider({ options, children, }: {
+    options: EmbeddedCheckoutOptions;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function EmbeddedCheckout({ className, style }: {
+    className?: string;
+    style?: React.CSSProperties;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { EmbeddedCheckout, type EmbeddedCheckoutOptions, EmbeddedCheckoutProvider };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type EmbeddedCheckoutOptions = {
+    /** Base URL of V7 Pay (e.g. https://pay.v7.app) */
+    baseUrl: string;
+    /** Called to get the session ID. Typically a server action that creates a session and returns it. */
+    fetchClientSecret: () => Promise<{
+        clientSecret: string;
+    }>;
+    /** Called when payment succeeds. Optional; postMessage is always sent to parent. */
+    onComplete?: (params: {
+        sessionId: string;
+    }) => void;
+    /** Called when user cancels. Optional; postMessage is always sent to parent. */
+    onCancel?: (params: {
+        sessionId: string;
+    }) => void;
+    /** If set, only accept postMessage from this origin (e.g. https://your-app.com). Recommended in production. */
+    allowedOrigin?: string;
+};
+declare function EmbeddedCheckoutProvider({ options, children, }: {
+    options: EmbeddedCheckoutOptions;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function EmbeddedCheckout({ className, style }: {
+    className?: string;
+    style?: React.CSSProperties;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { EmbeddedCheckout, type EmbeddedCheckoutOptions, EmbeddedCheckoutProvider };

package/dist/index.js

@@ -0,0 +1,138 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  EmbeddedCheckout: () => EmbeddedCheckout,
+  EmbeddedCheckoutProvider: () => EmbeddedCheckoutProvider
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EmbeddedCheckoutContext = (0, import_react.createContext)(null);
+function EmbeddedCheckoutProvider({
+  options,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmbeddedCheckoutContext.Provider, { value: options, children });
+}
+function EmbeddedCheckout({ className, style }) {
+  const opts = (0, import_react.useContext)(EmbeddedCheckoutContext);
+  const [sessionId, setSessionId] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const iframeRef = (0, import_react.useRef)(null);
+  const handledRef = (0, import_react.useRef)(false);
+  const handleMessage = (0, import_react.useCallback)(
+    (event) => {
+      var _a, _b, _c, _d;
+      if (!opts || !sessionId) return;
+      if (opts.allowedOrigin && event.origin !== opts.allowedOrigin) return;
+      const data = event.data;
+      if (typeof data !== "object" || !(data == null ? void 0 : data.type)) return;
+      if (data.type === "checkout:success") {
+        if (handledRef.current) return;
+        handledRef.current = true;
+        (_b = opts.onComplete) == null ? void 0 : _b.call(opts, { sessionId: (_a = data.sessionId) != null ? _a : sessionId });
+      }
+      if (data.type === "checkout:cancel") {
+        if (handledRef.current) return;
+        handledRef.current = true;
+        (_d = opts.onCancel) == null ? void 0 : _d.call(opts, { sessionId: (_c = data.sessionId) != null ? _c : sessionId });
+      }
+    },
+    [opts, sessionId]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!opts) {
+      setError("EmbeddedCheckoutProvider is required");
+      setLoading(false);
+      return;
+    }
+    const fetch = opts.fetchClientSecret;
+    fetch().then(({ clientSecret }) => {
+      setSessionId(clientSecret);
+    }).catch((err) => {
+      var _a;
+      setError((_a = err == null ? void 0 : err.message) != null ? _a : "Failed to create checkout session");
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [opts]);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+  if (!opts) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "EmbeddedCheckoutProvider is required" }) });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        style: __spreadProps(__spreadValues({}, style), { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Carregando checkout..." })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: error }) });
+  }
+  if (!sessionId) {
+    return null;
+  }
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const iframeSrc = `${base}/checkout/${sessionId}?embed=1`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      ref: iframeRef,
+      src: iframeSrc,
+      title: "V7 Pay Checkout",
+      className,
+      style: __spreadValues({ width: "100%", minHeight: 500, border: "none" }, style),
+      allow: "payment"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmbeddedCheckout,
+  EmbeddedCheckoutProvider
+});

package/dist/index.mjs

@@ -0,0 +1,115 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/index.tsx
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var EmbeddedCheckoutContext = createContext(null);
+function EmbeddedCheckoutProvider({
+  options,
+  children
+}) {
+  return /* @__PURE__ */ jsx(EmbeddedCheckoutContext.Provider, { value: options, children });
+}
+function EmbeddedCheckout({ className, style }) {
+  const opts = useContext(EmbeddedCheckoutContext);
+  const [sessionId, setSessionId] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const iframeRef = useRef(null);
+  const handledRef = useRef(false);
+  const handleMessage = useCallback(
+    (event) => {
+      var _a, _b, _c, _d;
+      if (!opts || !sessionId) return;
+      if (opts.allowedOrigin && event.origin !== opts.allowedOrigin) return;
+      const data = event.data;
+      if (typeof data !== "object" || !(data == null ? void 0 : data.type)) return;
+      if (data.type === "checkout:success") {
+        if (handledRef.current) return;
+        handledRef.current = true;
+        (_b = opts.onComplete) == null ? void 0 : _b.call(opts, { sessionId: (_a = data.sessionId) != null ? _a : sessionId });
+      }
+      if (data.type === "checkout:cancel") {
+        if (handledRef.current) return;
+        handledRef.current = true;
+        (_d = opts.onCancel) == null ? void 0 : _d.call(opts, { sessionId: (_c = data.sessionId) != null ? _c : sessionId });
+      }
+    },
+    [opts, sessionId]
+  );
+  useEffect(() => {
+    if (!opts) {
+      setError("EmbeddedCheckoutProvider is required");
+      setLoading(false);
+      return;
+    }
+    const fetch = opts.fetchClientSecret;
+    fetch().then(({ clientSecret }) => {
+      setSessionId(clientSecret);
+    }).catch((err) => {
+      var _a;
+      setError((_a = err == null ? void 0 : err.message) != null ? _a : "Failed to create checkout session");
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [opts]);
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+  if (!opts) {
+    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx("p", { children: "EmbeddedCheckoutProvider is required" }) });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: __spreadProps(__spreadValues({}, style), { display: "flex", alignItems: "center", justifyContent: "center", minHeight: 400 }),
+        children: /* @__PURE__ */ jsx("span", { children: "Carregando checkout..." })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx("p", { children: error }) });
+  }
+  if (!sessionId) {
+    return null;
+  }
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const iframeSrc = `${base}/checkout/${sessionId}?embed=1`;
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: iframeRef,
+      src: iframeSrc,
+      title: "V7 Pay Checkout",
+      className,
+      style: __spreadValues({ width: "100%", minHeight: 500, border: "none" }, style),
+      allow: "payment"
+    }
+  );
+}
+export {
+  EmbeddedCheckout,
+  EmbeddedCheckoutProvider
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@v7-pay/react",
+  "version": "0.1.0",
+  "description": "React components for embedding V7 Pay checkout (Stripe Embedded Checkout style)",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean --tsconfig tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "tsup": "^8"
+  }
+}