### Install Reflow Auth Next Source: https://reflowhq.com/docs/libraries/auth/auth-next/getting-started Install the required package using your preferred package manager. ```bash npm install @reflowhq/auth-next ``` -------------------------------- ### Full Authentication Component Example Source: https://reflowhq.com/docs/libraries/auth/auth-react A complete example demonstrating sign-in, sign-out, and conditional rendering based on authentication state. ```javascript import React, { useState } from "react"; import useAuth from "@reflowhq/auth-react"; function MyComponent() { const auth = useAuth({ projectID: 12345678 }); if (auth.isSignedIn()) { return (

Hello, {auth.user.name}!

); } return (
); } ``` -------------------------------- ### Fetch Specific Product Examples Source: https://reflowhq.com/docs/api Examples demonstrating how to retrieve a specific product using its ID or handle. ```javascript // Fetch the given product by its id and print its name let product = await fetch("https://api.reflowhq.com/v2/projects/267418190/products/366797633").then((r) => r.json()); console.log(product.name); // Fetch the given product by its handle let product = await fetch("https://api.reflowhq.com/v2/projects/267418190/products/radio-clock").then((r) => r.json()); ``` -------------------------------- ### Fetch Products Examples Source: https://reflowhq.com/docs/api Examples demonstrating how to retrieve products with various filters and sorting options using the Fetch API. ```javascript // Print the 20 newest products let products = await fetch("https://api.reflowhq.com/v2/projects/267418190/products/").then((r) => r.json()); console.log(products.data); // Print the 10 oldest products let products = await fetch("https://api.reflowhq.com/v2/projects/267418190/products/?order=date_asc&perpage=10").then( (r) => r.json(), ); console.log(products.data); // Print all the products from a category let products = await fetch("https://api.reflowhq.com/v2/projects/267418190/products/?category=123456789").then((r) => r.json(), ); console.log(products.data); ``` -------------------------------- ### Subscription JSON Example Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Example JSON response for a subscription object. ```json { "object": "subscription", "id": 12345, "status": "active", "last_billing": null, "next_billing": 1634024400, "cancel_at": null, "plan": { "object": "plan", "id": 54321, "name": "Premium Plan", "description": "Access to all premium features", "parameters": {}, "trial_days": 7, "subscription_setup_fee": null "is_archived": false, "created": 1630876800 }, "price": { "object": "plan_price", "id": 98765, "price": 9.99, "price_formatted": "$9.99", "currency": { "code": "USD", "name": "US Dollar", "zero_decimal": false }, "billing_period": "monthly", "is_taxed": true, "tax_behavior": "inclusive", "is_archived": false, "created": 1630876800 } } ``` -------------------------------- ### Install Reflow Auth React package Source: https://reflowhq.com/docs/auth/react-integration Install the required authentication library via npm. ```bash npm install @reflowhq/auth-react ``` -------------------------------- ### Install Cart.js via NPM Source: https://reflowhq.com/docs/libraries/cart/cart-js Use this command to install the library as a dependency in your project. ```bash npm install @reflowhq/cart ``` -------------------------------- ### Example User Object Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference A sample JSON response representing a user account. ```json { "success": true, "user": { "object": "user", "id": 123456789, "name": "John Smith", "email": "user@example.com", "photo": "https://cdn.reflowhq.com/media/123456789/profiles/abc123456789.jpeg", "provider": "google", "meta": { "darkMode": true }, "created_at": 1702053000755 } } ``` -------------------------------- ### Install Reflow Auth library Source: https://reflowhq.com/docs/auth/vanilla-integration Use npm to install the required Reflow Auth package in your project. ```bash npm install @reflowhq/auth ``` -------------------------------- ### Get Products Endpoint Source: https://reflowhq.com/docs/api The base endpoint for retrieving a list of products from a project. ```http GET https://api.reflowhq.com/v2/projects//products/ ``` -------------------------------- ### Fetch Subscription Plans via JavaScript Source: https://reflowhq.com/docs/api Example of fetching and logging subscription plans using the Fetch API. ```javascript // Print all subscription plans of the project let plans = await fetch("https://api.reflowhq.com/v2/projects/267418190/plans/").then((r) => r.json()); console.log(plans.data); ``` -------------------------------- ### Install Reflow Cart React Source: https://reflowhq.com/docs/libraries/cart/cart-react Use a package manager to add the library to your project. ```bash npm install @reflowhq/cart-react ``` -------------------------------- ### Fetch Orders with cURL Source: https://reflowhq.com/docs/api/api-keys Example request using cURL to retrieve project orders with an API key. ```bash curl --header 'Authorization: Bearer 19656ea.4329f04826e125f1ee999b53f78' 'https://api.reflowhq.com/v2/projects/267418190/orders/' ``` -------------------------------- ### Retrieve and Process Categories Source: https://reflowhq.com/docs/api Examples for fetching all categories and handling recursive subcategory structures. ```javascript // 1. Fetch all categories and print their names let categories = await fetch("https://api.reflowhq.com/v2/projects/267418190/categories").then((r) => r.json()); console.log(categories.map((c) => c.name)); // 2. If your project has subcategories, a bit more work is needed let printCategoryNames = (categories) => { for (let c of categories) { console.log(c.name); printCategoryNames(c.subcategories); } }; // 2.1 Fetch all categories and print their names recursively let categories = await fetch("https://api.reflowhq.com/v2/projects/267418190/categories").then((r) => r.json()); printCategoryNames(categories); // 2.2 Fetch only a specific category and its subcategories, and print their names let categories = await fetch("https://api.reflowhq.com/v2/projects/267418190/categories?root-category=177837305").then( (r) => r.json(), ); printCategoryNames(categories); ``` -------------------------------- ### Fetch a Specific Subscription Plan via JavaScript Source: https://reflowhq.com/docs/api Example of fetching and logging a single subscription plan using the Fetch API. ```javascript // Print all subscription plans of the project let plan = await fetch("https://api.reflowhq.com/v2/projects/267418190/plans/13156819").then((r) => r.json()); console.log(plan); ``` -------------------------------- ### Configure Category Link Attribute Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/category-list Examples of setting the category link URL with an ID placeholder. ```html data-reflow-category-link="https://example.com/categories?show={id}" ``` ```html data-reflow-category-link="/category.html?id={id}" ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//plans/ Source: https://reflowhq.com/docs/api Returns all active subscription plans and prices for a project. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//plans/ ### Description This API endpoint will return all active subscription plans and prices. Only plans that can be subscribed to will show up here. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//plans/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. ``` -------------------------------- ### Get all Subscription Plans Endpoint Source: https://reflowhq.com/docs/api Endpoint for retrieving all active subscription plans for a project. ```http GET https://api.reflowhq.com/v2/projects//plans/ ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//products/ Source: https://reflowhq.com/docs/api Retrieves the details of a specific product using its ID or handle. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//products/ ### Description This endpoint returns the product with the given id or handle from a project. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//products/ ### Parameters #### Path Parameters - **projectid** (number) - Required - The ID of the project. - **product** (string/number) - Required - The ID or handle of the product. #### Query Parameters - **fetch_hidden** (string) - Optional - Set to 'true' to fetch hidden products (requires API Key). ``` -------------------------------- ### Fetch User Accounts via cURL Source: https://reflowhq.com/docs/api Example of retrieving user accounts using cURL with an Authorization header. ```bash # In the following examples, replace with the id of your project # and with an api key string token. # Print all of the users curl --header 'Authorization: Bearer ' \ 'https://api.reflowhq.com/v2/projects//users/' ``` -------------------------------- ### Product Attribute Examples Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/product Various data attributes used to configure the appearance and behavior of the product component. ```text data-reflow-product="12345678" ``` ```text data-reflow-product="example-handle" ``` ```text data-reflow-show="media,name,price" ``` ```text data-reflow-category-link="https://example.com/products?category={id}" ``` ```text data-reflow-category-link="/category.html?id={id}" ``` ```text data-reflow-shoppingcart-url="https://example.com/cart" ``` ```text data-reflow-shoppingcart-url="/somepage.html" ``` ```text data-reflow-addtocart-text="Add to Basket" ``` ```text data-reflow-variants-sort="name_asc" ``` ```text data-reflow-variants-sort="in_stock,price_asc" ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//plans/ Source: https://reflowhq.com/docs/api Returns the details of a single subscription plan. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//plans/ ### Description This API endpoint will return the details of a single subscription plan. Both active and inactive plans can be requested. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//plans/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. - **planid** (string) - Required - The ID of the subscription plan. ``` -------------------------------- ### Get Specific Product Endpoint Source: https://reflowhq.com/docs/api The base endpoint for retrieving a single product by its ID or handle. ```http GET https://api.reflowhq.com/v2/projects//products/ ``` -------------------------------- ### get Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Retrieves a value from the session. ```APIDOC ## async get(key: string, def: any = null): Promise ### Description Returns a value from the session previously set with set. ``` -------------------------------- ### Integrate Sign-In Button in a Page Source: https://reflowhq.com/docs/libraries/auth/auth-next/sign-in Example of rendering the sign-in button conditionally based on the user's authentication state. ```typescript import getAuth from "@/auth"; import SignInButton from "./components/SignInButton"; export default async function Page() { const auth = getAuth(); const user = await auth.user(); if (user) { return

Hello, {user.name}.

; } return ; } ``` -------------------------------- ### Extract Product ID from URL Source: https://reflowhq.com/docs/libraries/html-toolkit-v2 Example of identifying the product ID from the Reflow dashboard URL. ```text https://reflowhq.com/projects/999999/products/111111/edit ``` -------------------------------- ### Retrieve Orders via cURL Source: https://reflowhq.com/docs/api Examples for fetching orders with various query parameters like pagination, status filtering, and date ranges. ```bash # In the following examples, replace with the id of your project # and with an api key string token. # Print the 20 newest orders curl --header 'Authorization: Bearer ' \ 'https://api.reflowhq.com/v2/projects//orders/' # Print 50 orders with the fulfillment_status "shipped" curl --header 'Authorization: Bearer ' \ 'https://api.reflowhq.com/v2/projects//orders/?perpage=50&fulfillment_status=shipped' # Print orders created in the period between two dates curl --header 'Authorization: Bearer ' \ 'https://api.reflowhq.com/v2/projects//orders/?created_after=1669852800&created_before=1672531200' ``` -------------------------------- ### Configure User Orders Attributes Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/user-orders Examples of optional data attributes to customize the component's display and pagination behavior. ```html data-reflow-show="photo, name" ``` ```html data-reflow-page="2" ``` ```html data-reflow-perpage="15" ``` ```html data-reflow-order-page-url="https://example.com/order" ``` -------------------------------- ### Set Root Category Attribute Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/category-list Example of restricting the list to a specific category and its subcategories. ```html data-reflow-root-category="12345678" ``` -------------------------------- ### User Created Webhook Event Source: https://reflowhq.com/docs/api/webhooks Example of a user.created event payload containing user profile information and metadata. ```json { "id": "test_evt_52b2ffbd612d6a51187b4e701a2724ab94f00755", "object": "event", "api-version": "2023-01-30", "created": 1724412193, "data": { "object": { "id": "12345678", "object": "user", "created": 1724412193, "email": "johndoe@example.com", "livemode": false, "meta": { "address": { "address": "123 Street Ave", "city": "Paris", "country": "FR", "name": "John Doe", "postcode": "1234" }, "phone": "123456789" }, "name": "John Doe", "photo": "http://reflow.local/img/gravatar/default.png", "provider": "google" } }, "livemode": false, "request_id": "test_req_7ce07b2a1d62be991b7d4633cf699c567f1cd88e", "type": "user.created" } ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//products/ Source: https://reflowhq.com/docs/api Retrieves an array of products from a specific project, with support for pagination, filtering by category, search terms, specific IDs, and custom sorting. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//products/ ### Description This endpoint returns an array of products from your project. You can modify its behavior using various query parameters. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//products/ ### Parameters #### Path Parameters - **projectid** (number) - Required - The ID of the project. #### Query Parameters - **page** (number) - Optional - The page number of products to return. - **perpage** (number) - Optional - Number of products per page (1-100). - **category** (number) - Optional - Filter by category ID. - **search** (string) - Optional - Search terms for product name, description, or SKU. - **ids** (string) - Optional - Comma-separated list of product IDs. - **order** (string) - Optional - Sort order (e.g., name_asc, price_desc, date_desc). - **fetch_hidden** (string) - Optional - Include hidden products (requires API Key). ``` -------------------------------- ### Example Success Redirect URL Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/order-status The URL structure generated by the Shopping Cart component when redirecting to the success page. ```text https://example.com/thankyou.html?order_id=1234567890&secure_hash=1a2b3c4d5e ``` -------------------------------- ### Email Body Text Translation Example Source: https://reflowhq.com/docs/help/customize-emails Demonstrates how to translate email body text while preserving special tags for dynamic data replacement. ```text Original text: You are now subscribed to the {planName} plan for {price} / {billingPeriod}. Translated text: Ahora está suscrito al plan {planName} por {price} / {billingPeriod}. Actual email text: Ahora está suscrito al plan Premium por $10.00 / mes. ``` -------------------------------- ### GET /v2/projects//categories/ Source: https://reflowhq.com/docs/api Retrieves a list of all categories in a project, ordered alphabetically and nested recursively. ```APIDOC ## GET /v2/projects//categories/ ### Description This endpoint returns the id, name, and subcategories of all categories in your project, ordered alphabetically and nested recursively. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//categories/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. #### Query Parameters - **root-category** (string) - Optional - Filter to fetch only a specific category and its subcategories. ``` -------------------------------- ### Fetch a Specific User Account via cURL Source: https://reflowhq.com/docs/api Example of retrieving a specific user account using cURL with an Authorization header. ```bash # Fetch the given user account # Replace with the id of your project, with the id of # the user you want to fetch, and with an api key string token. curl --header 'Authorization: Bearer ' \ 'https://api.reflowhq.com/v2/projects//users/' ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//users/ Source: https://reflowhq.com/docs/api Returns the latest registered users of a project. Requires authentication. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//users/ ### Description This endpoint returns the latest 20 registered users of your project. Authentication using a Reflow API Key is required. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//users/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. #### Query Parameters - **page** (number) - Optional - Page number of users (defaults to 1). - **perpage** (number) - Optional - Number of users to return per page (min 1, max 100, defaults to 20). ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//users/ Source: https://reflowhq.com/docs/api Returns the details of a specific user account. Requires authentication. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//users/ ### Description This endpoint returns the user with the given ID from a project. Authentication using a Reflow API Key is required. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//users/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. - **userid** (string) - Required - The ID of the user. ``` -------------------------------- ### Configure View Cart Attributes Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/view-cart Examples of specific data attributes used to customize the behavior and appearance of the View Cart component. ```html data-reflow-summary-type="dropdown" ``` ```html data-reflow-summary-position="right" ``` ```html data-reflow-shoppingcart-url="https://example.com/cart" ``` ```html data-reflow-shoppingcart-url="/somepage.html" ``` -------------------------------- ### Order Updated Webhook Event Source: https://reflowhq.com/docs/api/webhooks Example of an order.updated event payload containing order details, line items, and previous attributes. ```json { "id": "test_evt_40637b556515ffb02286130b8555130b91a5ae11", "object": "event", "api-version": "2023-01-30", "created": 1724412186, "data": { "object": { "id": "12345678", "object": "order", "applied_gift_card": null, "billing_address": null, "created": 1724412186, "currency": { "code": "USD", "name": "United States Dollar (USD)", "zero_decimal": false }, "customer": { "email": "johndoe@example.com", "ip": "10.11.12.13", "name": "John Doe", "phone": "123456789" }, "custom_fields": null, "delivery_method": "shipping", "delivery_information": "Your UPS tracking number is 1Z12345E0291980793.", "delivery_period": null, "discounts": { "amount_total": 0, "amount_total_formatted": "$0.00", "coupon": null }, "fulfillment_status": "delivered", "is_archived": false, "is_canceled": false, "line_items": [ { "object": "line_item", "custom_data": null, "has_discount": false, "name": "T Shirt", "personalization": { "enabled": false, "items": [] }, "price": 5000, "price_formatted": "$50.00", "product_id": "11111111", "product_type": "physical", "quantity": 1, "sku": "sku_1", "tax_amount": 0, "tax_amount_formatted": "$0.00", "unit_price": 5000, "unit_price_formatted": "$50.00" }, { "object": "line_item", "custom_data": null, "has_discount": false, "name": "Jacket", "personalization": { "enabled": false, "items": [] }, "price": 10000, "price_formatted": "$100.00", "product_id": "22222222", "product_type": "physical", "quantity": 2, "sku": "sku_2", "tax_amount": 0, "tax_amount_formatted": "$0.00", "unit_price": 5000, "unit_price_formatted": "$50.00" } ], "livemode": false, "note": "Order Note", "payment_instructions": null, "payment_method": "test-payment", "payment_status": "paid", "pickup_location": null, "secure_hash": "19e73cde35", "shipping_address": { "address": "123 Street Ave", "city": "Paris", "country": "France", "postcode": "1234" }, "shipping_method": { "name": "Worldwide Flat Rate", "note": null, "price": 0, "price_formatted": "$0.00" }, "taxes": { "amount_total": 0, "amount_total_formatted": "$0.00", "regions": [] }, "total_amount": 15000, "total_amount_formatted": "$150.00" }, "previous_attributes": { "fulfillment_status": "unfulfilled", "payment_status": "pending" } }, "livemode": false, "request_id": "test_req_eb524aff006a62d333972455acd8146a6baa4c45", "type": "order.updated" } ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//orders/ Source: https://reflowhq.com/docs/api Retrieves a list of orders for a specific project. Supports filtering by status, date, and customer email. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//orders/ ### Description Returns the latest 20 orders in your project. Behavior can be modified using optional query parameters. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//orders/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. #### Query Parameters - **page** (number) - Optional - Page number of orders. - **perpage** (number) - Optional - Number of orders to return (1-100). - **payment_status** (string) - Optional - Filter by payment status (pending, paid, failed, refunded). - **fulfillment_status** (string) - Optional - Filter by fulfillment status (unfulfilled, shipped, ready_for_pickup, delivered, returned). - **is_canceled** (string) - Optional - Filter by canceled status (true or false). - **is_archived** (string) - Optional - Filter by archived status (true or false). - **customer_email** (string) - Optional - Filter by customer email address. - **created_after** (number) - Optional - Filter by unix timestamp. - **created_before** (number) - Optional - Filter by unix timestamp. ``` -------------------------------- ### Initialize Auth.js Instance Source: https://reflowhq.com/docs/libraries/auth/auth-js Create an Auth instance and attach it to the window object to make it globally accessible. Replace the placeholder with your actual project ID from the dashboard. ```javascript import Auth from "@reflowhq/auth"; window.auth = new Auth({ projectID: "" }); ``` -------------------------------- ### Initiate subscription flow Source: https://reflowhq.com/docs/libraries/auth/auth-js Opens a payment provider window for the specified price ID. ```javascript async auth.createSubscription({ priceID: "123456789", paymentProvider: "stripe" }); ``` -------------------------------- ### Get Authentication Token Source: https://reflowhq.com/docs/libraries/auth/auth-react Retrieve a signed JWT for backend request validation. ```javascript await auth.getToken(); ``` -------------------------------- ### Initiate a subscription with auth.createSubscription Source: https://reflowhq.com/docs/libraries/auth/auth-react Opens a payment window for the specified price ID. Requires the user to be signed in or prompts them to do so. ```javascript async auth.createSubscription({ priceID: "123456789", paymentProvider: "stripe" }); ``` -------------------------------- ### Initialize Cart.js Instance Source: https://reflowhq.com/docs/libraries/cart/cart-js Create a global cart instance by assigning it to the window object after importing the library. ```javascript import Cart from "@reflowhq/cart"; window.cart = new Cart({ projectID: "" }); ``` -------------------------------- ### Get last refresh timestamp Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Retrieves the timestamp of the last synchronization with the Reflow backend. ```typescript import getAuth from "@/auth"; export default async function Page() { const auth = getAuth(); const ts = await auth.lastRefresh(); return

Last sync with Reflow was at {ts}

; } ``` -------------------------------- ### Initialize Reflow Toolkit Source: https://reflowhq.com/docs/libraries/html-toolkit-v2 Basic HTML structure showing where to place the CSS in the head and the script tag with the project ID before the closing body tag. ```html Reflow Example

Your Content is Here

``` -------------------------------- ### auth.createSubscription(options) Source: https://reflowhq.com/docs/libraries/auth/auth-react Initiates the subscription flow by opening a payment provider window. Requires a price ID and optional payment provider selection. ```APIDOC ## auth.createSubscription(options) ### Description Initiates the subscription flow. Opens a Stripe or Paddle payment page for the customer to finalize their subscription. If the user is not signed in, they will be prompted to sign in first. ### Parameters - **options** (object) - Required - **priceID** (string) - Required - The ID of the price to subscribe to. - **paymentProvider** (string) - Optional - The payment provider to use ('stripe' or 'paddle'). ### Example ```javascript async auth.createSubscription({ priceID: "123456789", paymentProvider: "stripe" }); ``` ``` -------------------------------- ### GET https://api.reflowhq.com/v2/projects//orders/ Source: https://reflowhq.com/docs/api Retrieves the details of a specific order by its ID. ```APIDOC ## GET https://api.reflowhq.com/v2/projects//orders/ ### Description Returns the order with the given ID from a project. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//orders/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. - **orderid** (string) - Required - The ID of the order. ``` -------------------------------- ### useAuth(options) Source: https://reflowhq.com/docs/libraries/auth/auth-react Initializes the authentication hook with a project ID. ```APIDOC ## useAuth(options) ### Description Initializes the Reflow authentication hook for a specific project. ### Parameters - **options** (object) - Required - Configuration object containing `projectID`. ``` -------------------------------- ### GET /v2/projects//categories/ Source: https://reflowhq.com/docs/api Retrieves details for a specific category within a project. ```APIDOC ## GET /v2/projects//categories/ ### Description This endpoint returns the category with the given id or handle from a project. ### Method GET ### Endpoint https://api.reflowhq.com/v2/projects//categories/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. - **category** (string) - Required - The ID or handle of the category. ``` -------------------------------- ### Initialize useCart Hook Source: https://reflowhq.com/docs/libraries/cart/cart-react Import the hook and configure it with your project ID and optional localization settings. ```javascript import { useCart } from "@reflowhq/cart-react"; import localization from "./localization.json"; const config = { projectID: "1234", localization, }; function App() { const cart = useCart(config); ... } ``` -------------------------------- ### Initialize Reflow Auth and Manage Subscription State in App.jsx Source: https://reflowhq.com/docs/subscriptions/react-integration Initializes the Reflow Auth library with a project ID and manages the display of subscription status or available plans based on the user's authentication state. ```javascript import "./styles.css"; import useAuth from "@reflowhq/auth-react"; import React, { useState, useEffect } from "react"; import Plan from "./Plan.jsx"; const config = { projectID: "267418190", }; export default function App() { const auth = useAuth(config); const [plans, setPlans] = useState([]); const [activeTab, setActiveTab] = useState("month"); useEffect(() => { fetch(`https://api.reflowhq.com/v2/projects/${config.projectID}/plans/`) .then((response) => response.json()) .then((r) => setPlans(r.data)) .catch((error) => console.error(error)); }, []); return ( <> {auth.isSubscribed() ? (

Thank you for subscribing!

Plan Name: {auth.subscription.plan.name}
Price:{" "} {auth.subscription.price.price_formatted} /{auth.subscription.price.billing_period}

RAW Subscription info:

{JSON.stringify(auth.subscription, null, "  ")}
) : (
setActiveTab("month")}> Monthly setActiveTab("year")}> Yearly
{plans.map((p) => ( ))}
)} ); } ``` -------------------------------- ### POST /v2/projects//products/ Source: https://reflowhq.com/docs/api Updates an existing product's properties such as name, price, or inventory settings. ```APIDOC ## POST /v2/projects//products/ ### Description Update the existing product with the given id or handle. Add one or more parameters in the request body to select which product properties to update. ### Method POST ### Endpoint https://api.reflowhq.com/v2/projects//products/ ### Parameters #### Path Parameters - **projectid** (string) - Required - The ID of the project. - **product** (string) - Required - The ID or handle of the product. #### Request Body - **name** (string) - Optional - The new name of the product (1-128 characters). - **price** (integer) - Optional - The new price in the currency's smallest unit. - **inventory_type** (string) - Optional - Set the inventory management system ("simple" or "advanced"). - **in_stock** (boolean) - Optional - Set availability (only for "simple" inventory). - **stock_quantity** (integer) - Optional - Set stock count (only for "advanced" inventory). ### Response #### Success Response (200) - **product** (object) - The updated product object. ``` -------------------------------- ### Get all User Accounts Endpoint Source: https://reflowhq.com/docs/api Endpoint for retrieving user accounts, requiring an API key for authentication. ```http GET https://api.reflowhq.com/v2/projects//users/ ``` -------------------------------- ### Get a Specific Subscription Plan Endpoint Source: https://reflowhq.com/docs/api Endpoint for retrieving details of a single subscription plan by ID. ```http GET https://api.reflowhq.com/v2/projects//plans/ ``` -------------------------------- ### all Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Returns all session data. ```APIDOC ## async all(): Promise> ### Description Returns all data in the session as a JS object of key-value pairs. ``` -------------------------------- ### Initialize auth.ts Source: https://reflowhq.com/docs/libraries/auth/auth-next/getting-started Create an auth.ts file in the project root to initialize the ReflowAuth instance with your project ID and secret. ```typescript import "server-only"; import { ReflowAuth } from "@reflowhq/auth-next"; export default function getAuth(): ReflowAuth { return new ReflowAuth({ projectID: 123456, secret: "REPLACE_ME_WITH_A_32_CHAR_SECRET", }); } ``` -------------------------------- ### Initialize useAuth Hook Source: https://reflowhq.com/docs/libraries/auth/auth-react Basic initialization of the hook using your project ID. ```javascript const auth = useAuth({ projectID: 12345678 }); ``` -------------------------------- ### Render Plan Cards and Trigger Subscriptions in Plan.jsx Source: https://reflowhq.com/docs/subscriptions/react-integration Displays plan details and uses auth.createSubscription() to initiate the payment flow. Reflow automatically handles authentication if the user is not signed in. ```javascript import React from "react"; export default function Plan({ plan, activeTab, auth }) { let chosenPrice = plan.prices[0]; for (let p of plan.prices) { if (p.billing_period === activeTab) { chosenPrice = p; } } function subscribeToPlan() { if (chosenPrice.price > 0) { alert( "Subscribing for paid plans is disabled in the demo in order to prevent accidental charges. You can try the free one instead.", ); } else { auth.createSubscription({ priceID: chosenPrice.id, paymentProvider: "stripe", }); } } return (

{plan.name}

{plan.description}

    {plan.features.map((f, i) => (
  • {f}
    • ))}

{chosenPrice.price === 0 ? "Free" : chosenPrice.price_formatted + " / " + chosenPrice.billing_period}

); } ``` -------------------------------- ### Get a Specific User Account Endpoint Source: https://reflowhq.com/docs/api Endpoint for retrieving a specific user account by ID, requiring an API key. ```http GET https://api.reflowhq.com/v2/projects//users/ ``` -------------------------------- ### Create a Sign-In Button Component Source: https://reflowhq.com/docs/libraries/auth/auth-next/sign-in A client component that triggers the Reflow sign-in popup when clicked. ```typescript "use client"; import { signIn } from "@reflowhq/auth-next/client"; export default function SignInButton() { return ( ); } ``` -------------------------------- ### auth.signIn() Source: https://reflowhq.com/docs/libraries/auth/auth-react Triggers the authentication sign-in flow. ```APIDOC ## auth.signIn() ### Description Opens a popup window to initiate the social sign-in flow. ``` -------------------------------- ### Trigger Sign In Flow Source: https://reflowhq.com/docs/libraries/auth/auth-react Open the sign-in popup window. ```javascript auth.signIn(); ``` -------------------------------- ### subscription() Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Retrieves the current subscription and plan information for the signed-in user. ```APIDOC ## subscription() ### Description Returns the user's current subscription and plan information for the signed-in user. ### Signature `async subscription(): Promise` ### Returns - **Subscription** (object) - An object containing subscription details, including status, billing dates, plan, and price information. ``` -------------------------------- ### Include Reflow Library Files Source: https://reflowhq.com/docs/libraries/html-toolkit-v2 The required CDN links for the Reflow toolkit CSS and JavaScript files. ```text https://cdn.reflowhq.com/v2/toolkit.min.js https://cdn.reflowhq.com/v2/toolkit.min.css ``` -------------------------------- ### Initialize Cart with Localization Source: https://reflowhq.com/docs/libraries/cart/cart-js Pass a localization object into the Cart configuration to override default UI labels and text. ```javascript import localization from "./localization.json"; const cart = new Cart({ projectID: "1234", localization, }); ``` -------------------------------- ### Update CDN links for Toolkit v2 Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/migration-guide Replace the version 1 CDN URLs with version 2 URLs to upgrade the toolkit. ```text # Replace: https://cdn.reflowhq.com/v1/toolkit.min.js https://cdn.reflowhq.com/v1/toolkit.min.css # With: https://cdn.reflowhq.com/v2/toolkit.min.js https://cdn.reflowhq.com/v2/toolkit.min.css ``` -------------------------------- ### clearSystem Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Removes only system sign-in values. ```APIDOC ## async clearSystem(): Promise ### Description Removes only system values that hold sign-in info. The customer is signed out but custom session data is retained. ``` -------------------------------- ### Configure Product List Attributes Source: https://reflowhq.com/docs/libraries/html-toolkit-v2/product-list Various data attributes used to customize the behavior and appearance of the product list. ```html data-reflow-layout="cards" ``` ```html data-reflow-page="2" ``` ```html data-reflow-perpage="15" ``` ```html data-reflow-category="12345678" ``` ```html data-reflow-order="price_desc" ``` ```html data-reflow-order="custom_desc,name_asc" ``` ```html data-reflow-search="curtains" ``` ```html data-reflow-product-link="https://example.com/products?show={id}" ``` ```html data-reflow-product-link="/product.html?handle={handle}" ``` ```html data-reflow-similar-to="123456789" ``` ```html data-reflow-addtocart-text="Add to Basket" ``` ```html data-reflow-shoppingcart-url="https://example.com/cart" ``` ```html data-reflow-shoppingcart-url="/somepage.html" ``` ```html data-reflow-show="image,name,price" ``` -------------------------------- ### auth.signIn() / auth.signOut() Source: https://reflowhq.com/docs/libraries/auth/auth-js Methods to trigger the authentication flow or sign the user out. ```APIDOC ## auth.signIn() ### Description Triggers the sign-in flow, opening a popup window for social authentication. ## auth.signOut() ### Description Signs out the current user and clears locally stored session data. ``` -------------------------------- ### createSubscription Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Displays a payment window to the currently signed in user for subscription signup. ```APIDOC ## createSubscription(options) ### Description Displays a payment window to the currently signed in user, where they can sign up for the subscription plan at the price given in the priceID option. ### Parameters - **priceID** (number) - Required - The id of a plan price object. - **authEndpoint** (string) - Optional - The path on your website where Next.js serves the auth route handler. Default is "/auth". - **paymentProvider** (string) - Optional - The payment provider to use: 'stripe' or 'paddle'. - **onSignin** (Function) - Optional - Callback function called when the user signs in successfully. - **onSubscribe** (Function) - Optional - Callback function called when the user subscribes successfully. - **onError** (Function) - Optional - Callback function called when an error occurs during subscription creation. ``` -------------------------------- ### Initialize useCart with Localization Source: https://reflowhq.com/docs/libraries/cart/cart-react Pass a localization object to the useCart hook to translate the user interface. ```javascript import localization from "./localization.json"; const cart = useCart({ projectID: "1234", localization, }); ``` -------------------------------- ### Implement useAuth hook in React Source: https://reflowhq.com/docs/auth/react-integration Initialize the useAuth hook with your project ID and use the returned methods to handle user authentication states. ```javascript import React from "react"; import useAuth from "@reflowhq/auth-react"; export default function App() { const auth = useAuth({ projectID: "123456789" }); return ( <> {auth.isSignedIn() ? (

Welcome, {auth.user.name}

Email: {auth.user.email}

Profile
) : (

To sign in, click the button below

)} ); } ``` -------------------------------- ### Render a Product Component Source: https://reflowhq.com/docs/libraries/html-toolkit-v2 Adding a product component to the page using the data-reflow-type and data-reflow-product attributes. ```html Reflow Example

Your Content is Here

``` -------------------------------- ### Initialize Reflow Cart in Test Mode Source: https://reflowhq.com/docs/libraries/cart/cart-js Enable test mode by setting the testMode property to true in the configuration object during initialization. ```javascript import Cart from "@reflowhq/cart"; window.cart = new Cart({ projectID: "", testMode: true }); ``` -------------------------------- ### Subscribe to signin event Source: https://reflowhq.com/docs/libraries/auth/auth-js Triggered upon successful user authentication. Use auth.isNew() to distinguish between new and returning users. ```javascript auth.on("signin", (user) => { if (auth.isNew()) { alert("Great to meet you, " + user.name + "!"); } else { alert("Hello again, " + user.name + "!"); } }); ``` -------------------------------- ### cart.addProduct(options, quantity) Source: https://reflowhq.com/docs/libraries/cart/cart-js Adds a new product to the cart with specified options and quantity. ```APIDOC ## cart.addProduct(options, quantity) ### Description Adds a new product to the cart. ### Parameters - **options** (object) - Required. Contains product details: - **id** (string) - Required. The id of the product. - **variantID** (string) - Required if the product has variants. - **personalization** (array) - Optional. Applied personalizations. - **quantity** (number) - The quantity of the product to add. ### Response - **cartKey** (string) - The unique key for the cart. - **cartQuantity** (number) - The updated total quantity in the cart. - **success** (boolean) - Status of the operation. ``` -------------------------------- ### has Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference Checks if a key exists in the session. ```APIDOC ## async has(key: string): Promise ### Description Checks whether a specific key exists in the session. ```