ReflowHQ

https://reflowhq.com/docs/
Admin
ReflowHQ is an e-commerce and authentication platform that provides tools and services for managing...
Tokens:47,034
Snippets:647
Trust Score:7.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### 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 (
			<div>
				<p>Hello, {auth.user.name}!</p>
				<button
					onClick={() => {
						auth.signOut();
					}}
				>
					Sign Out
				</button>
			</div>
		);
	}

	return (
		<div>
			<button
				onClick={() => {
					auth.signIn();
				}}
			>
				Sign In
			</button>
		</div>
	);
}
```

--------------------------------

### 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/<projectid>/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=&#123;id&#125;"
```

```html
data-reflow-category-link="/category.html?id={id}"
```

--------------------------------

### GET https://api.reflowhq.com/v2/projects/<projectid>/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/<projectid>/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/<projectid>/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/<projectid>/plans/
```

--------------------------------

### GET https://api.reflowhq.com/v2/projects/<projectid>/products/<product>

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/<projectid>/products/<product>

### Description
This endpoint returns the product with the given id or handle from a project.

### Method
GET

### Endpoint
https://api.reflowhq.com/v2/projects/<projectid>/products/<product>

### 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 <projectid> with the id of your project  
# and <api_key> with an api key string token.  
  
# Print all of the users  
curl --header 'Authorization: Bearer <api_key>' \
     'https://api.reflowhq.com/v2/projects/<projectid>/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/<projectid>/plans/<planid>

Source: https://reflowhq.com/docs/api

Returns the details of a single subscription plan.

```APIDOC
## GET https://api.reflowhq.com/v2/projects/<projectid>/plans/<planid>

### 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/<projectid>/plans/<planid>

### 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/<projectid>/products/<product>
```

--------------------------------

### 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<any>

### 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 <p>Hello, {user.name}.</p>;  
	}  
  
	return <SignInButton />;  
}  
```

--------------------------------

### 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 <projectid> with the id of your project  
# and <api_key> with an api key string token.  
  
# Print the 20 newest orders  
curl --header 'Authorization: Bearer <api_key>' \
     'https://api.reflowhq.com/v2/projects/<projectid>/orders/'  
  
# Print 50 orders with the fulfillment_status "shipped"  
curl --header 'Authorization: Bearer <api_key>' \
     'https://api.reflowhq.com/v2/projects/<projectid>/orders/?perpage=50&fulfillment_status=shipped'  
  
# Print orders created in the period between two dates  
curl --header 'Authorization: Bearer <api_key>' \
     'https://api.reflowhq.com/v2/projects/<projectid>/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"
```

--------------------------------

### 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/<projectid>/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/<projectid>/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/<projectid>/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.
```

--------------------------------

### 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 <projectid> with the id of your project, <userid> with the id of  
# the user you want to fetch, and <api_key> with an api key string token.  
curl --header 'Authorization: Bearer <api_key>' \
     'https://api.reflowhq.com/v2/projects/<projectid>/users/<userid>'
```

--------------------------------

### 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: "<your project id here>" });
```

--------------------------------

### 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();
```

--------------------------------

### 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"
```

--------------------------------

### 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: "<your project id here>" });
```

--------------------------------

### 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 <p>Last sync with Reflow was at {ts}<p>;  
}  
```

--------------------------------

### 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
<!DOCTYPE html>  
<html lang="en">  
	<head>  
		<meta charset="utf-8" />  
		<title>Reflow Example</title>  
		<link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />  
	</head>  
	<body>  
		<p>Your Content is Here</p>  
		<script src="https://cdn.reflowhq.com/v2/toolkit.min.js" data-reflow-project="999999" defer></script>  
	</body>  
</html>  
```

--------------------------------

### 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/<projectid>/orders/<orderid>

Source: https://reflowhq.com/docs/api

Retrieves the details of a specific order by its ID.

```APIDOC
## GET https://api.reflowhq.com/v2/projects/<projectid>/orders/<orderid>

### Description
Returns the order with the given ID from a project.

### Method
GET

### Endpoint
https://api.reflowhq.com/v2/projects/<projectid>/orders/<orderid>

### 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/<projectid>/categories/<category>

Source: https://reflowhq.com/docs/api

Retrieves details for a specific category within a project.

```APIDOC
## GET /v2/projects/<projectid>/categories/<category>

### Description
This endpoint returns the category with the given id or handle from a project.

### Method
GET

### Endpoint
https://api.reflowhq.com/v2/projects/<projectid>/categories/<category>

### 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() ? (  
				<div>  
					<h1>Thank you for subscribing!</h1>  
					<button onClick={() => auth.modifySubscription()}>Modify Subscription</button>  
					<button className="danger" onClick={() => auth.signOut()}>  
						Sign Out  
					</button>  
					<p>  
						Plan Name: <b>{auth.subscription.plan.name}</b>  
						<br />  
						Price:{" "}  
						<b>  
							{auth.subscription.price.price_formatted} /{auth.subscription.price.billing_period}  
						</b>  
					</p>  
					<h4>RAW Subscription info:</h4>  
					<pre>{JSON.stringify(auth.subscription, null, "  ")}</pre>  
				</div>  
			) : (  
				<div>  
					<div className="tabs">  
						<span className={activeTab === "month" ? "active" : ""} onClick={() => setActiveTab("month")}>  
							Monthly  
						</span>  
						<span className={activeTab === "year" ? "active" : ""} onClick={() => setActiveTab("year")}>  
							Yearly  
						</span>  
					</div>  
					<div className="card-container">  
						{plans.map((p) => (  
							<Plan key={p.id} plan={p} activeTab={activeTab} auth={auth} />  
						))}  
					</div>  
				</div>  
			)}  
		</>  
	);  
}
```

--------------------------------

### GET /v2/projects/<projectid>/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/<projectid>/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/<projectid>/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.
```

--------------------------------

### POST /v2/projects/<projectid>/products/<product>

Source: https://reflowhq.com/docs/api

Updates an existing product's properties such as name, price, or inventory settings.

```APIDOC
## POST /v2/projects/<projectid>/products/<product>

### 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/<projectid>/products/<product>

### 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 https://api.reflowhq.com/v2/projects/<projectid>/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/<projectid>/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/<projectid>/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 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/<projectid>/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/<projectid>/plans/<planid>
```

--------------------------------

### all

Source: https://reflowhq.com/docs/libraries/auth/auth-next/api-reference

Returns all session data.

```APIDOC
## async all(): Promise<Record<string, any>>

### 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",
	});
}
```

--------------------------------

### GET https://api.reflowhq.com/v2/projects/<projectid>/users/<userid>

Source: https://reflowhq.com/docs/api

Returns the details of a specific user account. Requires authentication.

```APIDOC
## GET https://api.reflowhq.com/v2/projects/<projectid>/users/<userid>

### 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/<projectid>/users/<userid>

### Parameters
#### Path Parameters
- **projectid** (string) - Required - The ID of the project.
- **userid** (string) - Required - The ID of the user.
```

--------------------------------

### 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 (  
		<div className="card">  
			<h1>{plan.name}</h1>  
			<p>{plan.description}</p>  
			<ul>  
				{plan.features.map((f, i) => (  
					<li key={i}>{f}</li>  
				))}  
			</ul>  
			<h2>  
				{chosenPrice.price === 0 ? "Free" : chosenPrice.price_formatted + " / " + chosenPrice.billing_period}  
			</h2>  
			<button onClick={subscribeToPlan}>Subscribe</button>  
		</div>  
	);  
}
```

--------------------------------

### 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/<projectid>/users/<userid>
```

--------------------------------

### 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"
}
```

--------------------------------

### 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 (  
		<button  
			onClick={() =>  
				signIn({  
					onSignIn: () => console.log("User signed in!"),  
				})  
			}  
		>  
			Sign-in to your account  
		</button>  
	);  
}  
```

--------------------------------

### 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();
```

--------------------------------

### GET https://api.reflowhq.com/v2/projects/<projectid>/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/<projectid>/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/<projectid>/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.
```

--------------------------------

### 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<Subscription | null>`

### 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<void>

### 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() ? (  
				<div>  
					<h1>Welcome, {auth.user.name}</h1>  
					<p>Email: {auth.user.email}</p>  
					<img src={auth.user.photo} alt="Profile" />  
					<button onClick={() => auth.signOut()}>Sign Out</button>  
				</div>  
			) : (  
				<div>  
					<h1>To sign in, click the button below</h1>  
					<button onClick={() => auth.signIn()}>Sign In</button>  
				</div>  
			)}  
		</>  
	);  
}  
```

--------------------------------

### 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
<!DOCTYPE html>  
<html lang="en">  
	<head>  
		<meta charset="utf-8" />  
		<title>Reflow Example</title>  
		<link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />  
	</head>  
	<body>  
		<p>Your Content is Here</p>  
		<div data-reflow-type="product" data-reflow-product="111111"></div>  
		<script src="https://cdn.reflowhq.com/v2/toolkit.min.js" data-reflow-project="999999" defer></script>  
	</body>  
</html>  
```
Tokens:
Raw