@apolopay-sdk/react 1.0.0

package/README.md

@@ -0,0 +1,66 @@
+# @apolopay-sdk/react
+
+React wrapper for the Apolo Pay SDK. Provides a convenient component to integrate the Apolo Pay payment button into React applications.
+
+## Installation
+
+```bash
+npm install @apolopay-sdk/react
+# or
+pnpm add @apolopay-sdk/react
+```
+
+## Usage
+
+```tsx
+import { ApoloPayButton, ApoloPayClient, type ClientResponse, type ClientError } from '@apolopay-sdk/react';
+
+// 1. Initialize the client
+const client = new ApoloPayClient({
+  publicKey: 'pk_test_...',
+});
+
+function App() {
+  const handleSuccess = (response: ClientResponse) => {
+    console.log('Payment successful!', response);
+  };
+
+  const handleError = (error: ClientError) => {
+    console.error('Payment error:', error);
+  };
+
+  return (
+    <div className="App">
+      <h1>My Store</h1>
+      
+      {/* 2. Use the component */}
+      <ApoloPayButton
+        client={client}
+        processId="your-process-id"
+        productTitle="Order #12345"
+        lang="es"
+        onSuccess={handleSuccess}
+        onError={handleError}
+        barrierDismissible={true}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+The `ApoloPayButton` component accepts the following props:
+
+- `client`: (ApoloPayClient) **Required**. Instance of ApoloPayClient.
+- `processId`: (string) **Required**. The UUID of the payment process.
+- `productTitle`: (string) Title to display in the modal.
+- `lang`: ('es' | 'en') Language.
+- `label`: (string) Custom label for the button.
+- `barrierDismissible`: (boolean) If true, clicking backdrop closes modal.
+- `onSuccess`: (function) Callback when payment completes.
+- `onError`: (function) Callback when an error occurs.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import { ApoloPayClient, Locale, ClientResponse, ClientError } from '@apolopay-sdk/ui';
+export * from '@apolopay-sdk/ui';
+import React from 'react';
+
+type ApoloPayButtonProps = {
+    client?: ApoloPayClient;
+    processId?: string;
+    productTitle?: string;
+    lang?: Locale;
+    barrierDismissible?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    label?: string;
+    onSuccess?: (response: ClientResponse) => void;
+    onError?: (error: ClientError) => void;
+};
+declare const ApoloPayButton: React.FC<ApoloPayButtonProps>;
+
+export { ApoloPayButton };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { ApoloPayClient, Locale, ClientResponse, ClientError } from '@apolopay-sdk/ui';
+export * from '@apolopay-sdk/ui';
+import React from 'react';
+
+type ApoloPayButtonProps = {
+    client?: ApoloPayClient;
+    processId?: string;
+    productTitle?: string;
+    lang?: Locale;
+    barrierDismissible?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    label?: string;
+    onSuccess?: (response: ClientResponse) => void;
+    onError?: (error: ClientError) => void;
+};
+declare const ApoloPayButton: React.FC<ApoloPayButtonProps>;
+
+export { ApoloPayButton };

package/dist/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  ApoloPayButton: () => ApoloPayButton
+});
+module.exports = __toCommonJS(src_exports);
+var import_ui = require("@apolopay-sdk/ui");
+var import_react = __toESM(require("react"));
+__reExport(src_exports, require("@apolopay-sdk/ui"), module.exports);
+var ApoloPayButton = ({
+  client,
+  processId,
+  productTitle,
+  lang,
+  barrierDismissible,
+  children,
+  disabled,
+  loading,
+  label,
+  onSuccess,
+  onError
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const node = ref.current;
+    if (!node)
+      return;
+    const handleSuccess = (event) => {
+      onSuccess?.(event.detail);
+    };
+    const handleError = (event) => {
+      onError?.(event.detail);
+    };
+    node.addEventListener("success", handleSuccess);
+    node.addEventListener("error", handleError);
+    return () => {
+      node.removeEventListener("success", handleSuccess);
+      node.removeEventListener("error", handleError);
+    };
+  }, [onSuccess, onError]);
+  return import_react.default.createElement(
+    "apolopay-button",
+    {
+      ref,
+      client,
+      "process-id": processId,
+      "product-title": productTitle,
+      lang,
+      disabled,
+      loading,
+      label,
+      "barrier-dismissible": barrierDismissible
+    },
+    children
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApoloPayButton,
+  ...require("@apolopay-sdk/ui")
+});

package/dist/index.mjs

@@ -0,0 +1,54 @@
+// src/index.tsx
+import "@apolopay-sdk/ui";
+import React, { useRef, useEffect } from "react";
+export * from "@apolopay-sdk/ui";
+var ApoloPayButton = ({
+  client,
+  processId,
+  productTitle,
+  lang,
+  barrierDismissible,
+  children,
+  disabled,
+  loading,
+  label,
+  onSuccess,
+  onError
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node)
+      return;
+    const handleSuccess = (event) => {
+      onSuccess?.(event.detail);
+    };
+    const handleError = (event) => {
+      onError?.(event.detail);
+    };
+    node.addEventListener("success", handleSuccess);
+    node.addEventListener("error", handleError);
+    return () => {
+      node.removeEventListener("success", handleSuccess);
+      node.removeEventListener("error", handleError);
+    };
+  }, [onSuccess, onError]);
+  return React.createElement(
+    "apolopay-button",
+    {
+      ref,
+      client,
+      "process-id": processId,
+      "product-title": productTitle,
+      lang,
+      disabled,
+      loading,
+      label,
+      "barrier-dismissible": barrierDismissible
+    },
+    children
+  );
+};
+export {
+  ApoloPayButton
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@apolopay-sdk/react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@apolopay-sdk/ui": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.3",
+    "react": "18.3.1",
+    "tsup": "8.0.0",
+    "typescript": "5.4.5"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external react @apolopay-sdk/ui",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --external react @apolopay-sdk/ui"
+  }
+}