### ESM Example Setup

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Instructions for setting up and running the modern ES module example using Vite. This includes installing dependencies, configuring Firebase, and starting the development server.

```bash
cd examples/esm
npm install
# Update Firebase configuration in src/firebase-config.js
npm run dev
```

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

### ESM with Subscriptions Example Setup

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Instructions for setting up and running the ES module example with subscription features using Vite. This covers installation, Firebase configuration, and development server startup.

```bash
cd examples/esm-with-subscriptions
npm install
# Update Firebase configuration in src/firebase-config.js
npm run dev
```

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

### Install Dependencies

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/README.md

Installs all the necessary project dependencies using npm. This command should be run after cloning the repository or setting up the project.

```bash
npm install
```

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

### Install Dependencies

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/cjs/README.md

Installs the necessary Node.js dependencies for the project using npm.

```bash
npm install
```

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

### Run Development Server

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/cjs/README.md

Starts the development server to preview the application locally.

```bash
npm run dev
```

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

### Install Dependencies

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Installs all necessary project dependencies using npm. This command should be run after cloning the repository or setting up the project.

```bash
npm install
```

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

### Run Development Server

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Starts the Vite development server, which provides features like instant server start and hot module replacement (HMR). The application will be accessible at http://localhost:3001.

```bash
npm run dev
```

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

### Run Development Server

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/README.md

Starts the Vite development server, allowing you to preview the application locally. Vite provides fast server start and hot module replacement (HMR).

```bash
npm run dev
```

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

### Copy Firebase Configuration

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/cjs/README.md

Copies the example Firebase configuration file to be used for the project.

```bash
cp src/firebase-config.example.js src/firebase-config.js
```

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

### Cloud Firestore Database Setup

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Creates and configures a Cloud Firestore database to store product information, pricing, and customer details, including Stripe customer IDs and subscription status. It emphasizes starting in production mode for immediate use.

```APIDOC
Cloud Firestore:
  Create database:
    Mode: Start in production mode
    Location: [User Selected Location]
    Confirm creation.
```

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

### Copy Firebase Configuration

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Copies the example Firebase configuration file to be used in the project. This step is crucial for setting up the connection to your Firebase project.

```bash
cp src/firebase-config.example.js src/firebase-config.js
```

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

### Copy Firebase Config

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/README.md

Copies the example Firebase configuration file to be used in the application. This step is crucial for setting up the connection to your Firebase project.

```bash
cp src/firebase-config.example.js src/firebase-config.js
```

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

### Conventional Commits Example

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/CONTRIBUTING.md

An example of a commit message following the Conventional Commits format for updating documentation.

```markdown
docs(extension-name) updated installation documentation
```

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

### Install @invertase/firestore-stripe-payments

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Installs the necessary package for integrating with the Firestore Stripe Payments extension using npm.

```bash
npm install @invertase/firestore-stripe-payments
```

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

### Build for Production

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/cjs/README.md

Creates optimized production-ready files for deployment.

```bash
npm run build
```

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

### Build for Production

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Creates optimized production-ready files for deployment. The output will be placed in the `dist` directory.

```bash
npm run build
```

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

### Install Invertase Stripe Extension

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/README.md

Provides a direct link to install the Invertase version of the Stripe extension, recommended for new installations or migrating from the original Stripe version.

```bash
https://console.firebase.google.com/project/_/extensions/install?instanceId=STRIPE_EXTENSION_INSTANCE_ID&ref=invertase%2Ffirestore-stripe-payments@0.3.12
```

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

### Firestore Stripe Payments - CommonJS Example

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/cjs/index.html

This snippet demonstrates the basic structure and styling for the Firestore Stripe Payments extension using CommonJS. It includes HTML for product display, CSS for styling, and JavaScript for loading products.

```html
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
h1 { color: #333; text-align: center; margin-bottom: 2rem; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.product-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.product-card h3 { margin: 0 0 0.5rem 0; color: #333; }
.product-card p { margin: 0; color: #666; }
.active { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #4CAF50; color: white; border-radius: 4px; font-size: 0.875rem; }
.no-products { text-align: center; color: #666; grid-column: 1 / -1; }
.error { color: #f44336; }
```

```javascript
// Loading products...
console.log('Loading products...');
```

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

### Firestore Stripe Payments ESM Example Structure

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/index.html

This snippet shows the basic HTML structure for displaying products fetched via the Firestore Stripe Payments extension. It includes a container, a heading, and a grid for product cards. It also demonstrates how to show loading messages and error states.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firestore Stripe Payments Example</title>
    <style>
        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
        h1 { color: #333; text-align: center; margin-bottom: 2rem; }
        .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
        .product-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
        .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .product-card h3 { margin: 0 0 0.5rem 0; color: #333; }
        .product-card p { margin: 0; color: #666; }
        .active { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #4CAF50; color: white; border-radius: 4px; font-size: 0.875rem; }
        .no-products { text-align: center; color: #666; grid-column: 1 / -1; }
        .error { color: #f44336; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Our Products</h1>
        <div class="products-grid" id="products-grid">
            <!-- Product cards will be loaded here -->
            <p class="loading">Loading products...</p>
        </div>
    </div>
</body>
</html>
```

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

### Firestore Stripe Payments ESM Example Styling

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/index.html

This snippet contains the CSS styles used for the Firestore Stripe Payments extension example. It defines styles for the body, container, product grid, individual product cards, active status indicators, and messages for no products or errors.

```css
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
h1 { color: #333; text-align: center; margin-bottom: 2rem; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.product-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.product-card h3 { margin: 0 0 0.5rem 0; color: #333; }
.product-card p { margin: 0; color: #666; }
.active { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #4CAF50; color: white; border-radius: 4px; font-size: 0.875rem; }
.no-products { text-align: center; color: #666; grid-column: 1 / -1; }
.error { color: #f44336; }
```

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

### Preview Production Build

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/README.md

Locally previews the production build of the application. This helps in testing the optimized build before deployment.

```bash
npm run preview
```

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

### Preview Production Build

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Locally previews the production build to ensure everything works as expected before deploying. This command serves the files from the `dist` directory.

```bash
npm run preview
```

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

### Firestore Stripe Payments ESM Example Structure

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/index.html

This snippet shows the basic HTML structure for displaying products fetched via the Firestore Stripe Payments extension. It includes a container, a heading, and a grid for product cards. It also demonstrates how to show loading messages and error states.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firestore Stripe Payments Example</title>
    <style>
        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
        h1 { color: #333; text-align: center; margin-bottom: 2rem; }
        .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
        .product-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
        .product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .product-card h3 { margin: 0 0 0.5rem 0; color: #333; }
        .product-card p { margin: 0; color: #666; }
        .active { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #4CAF50; color: white; border-radius: 4px; font-size: 0.875rem; }
        .no-products { text-align: center; color: #666; grid-column: 1 / -1; }
        .error { color: #f44336; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Our Products</h1>
        <div class="products-grid" id="products-grid">
            <!-- Product cards will be loaded here -->
            <p class="loading">Loading products...</p>
        </div>
    </div>
</body>
</html>
```

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

### Build for Production

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm-with-subscriptions/README.md

Builds the project for production, creating optimized static files in the 'dist' directory. This command is used before deploying the application.

```bash
npm run build
```

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

### Firestore Stripe Payments ESM Example Styling

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/index.html

This snippet contains the CSS styles used for the Firestore Stripe Payments extension example. It defines styles for the body, container, product grid, individual product cards, active status indicators, and messages for no products or errors.

```css
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
h1 { color: #333; text-align: center; margin-bottom: 2rem; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.product-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.product-card h3 { margin: 0 0 0.5rem 0; color: #333; }
.product-card p { margin: 0; color: #666; }
.active { display: inline-block; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #4CAF50; color: white; border-radius: 4px; font-size: 0.875rem; }
.no-products { text-align: center; color: #666; grid-column: 1 / -1; }
.error { color: #f44336; }
```

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

### Development Workflows and Commands

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Details essential commands for managing the project, including installing dependencies, running tests, building artifacts, and cleaning build outputs.

```bash
npm install
npm test
npm run build
npm pack
npm publish <tarball>
```

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

### Get Stripe Payments

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Serves as the main entry point to this library. Initializes the client SDK, and returns a handle object that can be passed into other APIs.

```APIDOC
getStripePayments(app, options):
  Description: Serves as the main entry point to this library. Initializes the client SDK, and returns a handle object that can be passed into other APIs.
  Parameters:
    app: The Firebase app instance.
    options: Optional configuration options.
```

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

### ESM Import Syntax

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Demonstrates the ES6 import syntax used in the project, which is a key difference from CommonJS modules that use `require()`.

```javascript
import "./firebase-config.js";
import { getFirestore } from "firebase/firestore";

const db = getFirestore();
```

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

### Get Product

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves a Stripe product from the database.

```APIDOC
getProduct(payments, productId, options):
  Description: Retrieves a Stripe product from the database.
  Parameters:
    payments: An instance of StripePayments.
    productId: The ID of the product to retrieve.
    options: Optional configuration options.
```

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

### ESM Export Syntax

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/examples/esm/README.md

Illustrates the ES6 export syntax used for modules in this project, contrasting with `module.exports` found in CommonJS.

```javascript
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

```

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

### Get Products

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves a Stripe product from the database.

```APIDOC
getProducts(payments, options):
  Description: Retrieves a Stripe product from the database.
  Parameters:
    payments: An instance of StripePayments.
    options: Optional configuration options.
```

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

### Install and Configure Delete User Data Extension

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Steps to install and configure the Firebase Delete User Data extension. This involves selecting a project, configuring Cloud Firestore paths, and optionally Cloud Storage paths.

```APIDOC
FirebaseExtension: Delete User Data
  Install:
    1. Navigate to the extension's details page.
    2. Select your Firebase project.
    3. Follow on-screen instructions.

  Configure:
    - Cloud Firestore paths: Specify the Firestore paths to delete. Format: `collection/{userId}`.
      Example: `customers/{UID}`
    - Cloud Storage path (Optional): Specify a Cloud Storage path to delete. This path can include wildcards.
      Example: `user-uploads/{userId}/*`

  Uninstall:
    - Instructions for uninstalling the extension are available in the Firebase console.
```

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

### Client SDK Usage

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-payments/POSTINSTALL.md

Demonstrates how to install and use the `@invertase/firestore-stripe-payments` JavaScript package with the Firebase Web SDK for client-side Stripe operations.

```javascript
import { /* relevant functions */ } from '@invertase/firestore-stripe-payments';

// Initialize and use the SDK...
```

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

### Create Invoice with Items

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-invoices/POSTINSTALL.md

Example of creating an invoice document with a list of items, including amount, currency, quantity, and description. The amount should be in the currency's smallest unit.

```js
{
  items: [
    {
      amount: 999,
      currency: 'usd',
      quantity: 2,
      description: 'one shirt, size medium',
    },
  ]
}
```

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

### Create Invoice with Email

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-invoices/POSTINSTALL.md

Example of creating an invoice document specifying the customer's email address and a list of items.

```js
{
  email: "customer@example.com",
  items: [{
      amount: 1999,
      currency: "usd",
      description: "my super cool item"
  },
  {
      amount: 540,
      currency: "usd",
      description: "shipping cost"
  }]
}
```

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

### Stripe Firebase Extensions Configuration Parameters

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-payments/README.md

Details the configuration parameters required for installing and setting up the Stripe Firebase Extensions. This includes settings for Cloud Functions deployment, data collection paths in Cloud Firestore, user synchronization with Stripe, and API key management.

```APIDOC
Cloud Functions deployment location: Where do you want to deploy the functions created for this extension? You usually want a location close to your database. For help selecting a location, refer to the [location selection guide](https://firebase.google.com/docs/functions/locations).

Products and pricing plans collection: What is the path to the Cloud Firestore collection where the extension should store Stripe pricing plans?

Customer details and subscriptions collection: What is the path to the Cloud Firestore collection where the extension should store Stripe customer details? This can be the location of an existing user collection, the extension will not overwrite your existing data but rather merge the Stripe data into your existing `uid` docs.

Stripe configuration collection: What is the path to the Cloud Firestore collection where the extension should store Stripe configuration?

Sync new users to Stripe customers and Cloud Firestore: Do you want to automatically sync new users to customer objects in Stripe? If set to 'Sync', the extension will create a new customer object in Stripe and add a new doc to the customer collection in Firestore when a new user signs up via Firebase Authentication. If set to 'Do not sync' (default), the extension will create the customer object "on the fly" with the first checkout session creation.

Automatically delete Stripe customer objects: Do you want to automatically delete customer objects in Stripe? When a user is deleted in Firebase Authentication or in Cloud Firestore and set to 'Auto delete' the extension will delete their customer object in Stripe which will immediately cancel all subscriptions for the user.

Stripe API key with restricted access: What is your Stripe API key? We recommend creating a new [restricted key](https://stripe.com/docs/keys#limit-access) with write access only for the "Customers", "Checkout Sessions" and "Customer portal" resources. And read-only access for the "Subscriptions" and "Prices" resources.

Stripe webhook secret: This is your signing secret for a Stripe-registered webhook. This webhook can only be registered after installation. Leave this value untouched during installation, then follow the postinstall instructions for registering your webhook and configuring this value.

Minimum instances for createCheckoutSession function: Set the minimum number of function instances that should be always be available to create Checkout Sessions. This number can be adjusted to reduce cold starts and increase the responsiveness of Checkout Session creation requests. Suggested values are 0 or 1. Please note this setting will likely incur billing costss, see the [Firebase documentation](https://firebase.google.com/docs/functions/manage-functions#reduce_the_number_of_cold_starts) for more information.
```

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

### Firebase JavaScript Client SDK for Data Reading

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Demonstrates how to read product and pricing information from Cloud Firestore using the Firebase JavaScript client SDK after successful extension setup.

```javascript
import { getFirestore, collection, getDocs } from "firebase/firestore";

const db = getFirestore();

async function fetchProducts() {
  const productsCol = collection(db, 'products');
  const productSnapshot = await getDocs(productsCol);
  const productsList = productSnapshot.docs.map(doc => doc.data());
  console.log(productsList);
}
```

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

### Session.success_url Property

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.session.success_url.md

Represents the URL to redirect customers to after a successful Stripe payment or setup. This property is read-only and expects a string value.

```APIDOC
Session.success_url:
  type: string
  description: The URL to which Stripe should send customers when payment or setup is complete.
  readOnly: true
```

```typescript
readonly success_url: string;
```

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

### Firebase Authentication Setup

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Enables email and password login for user authentication within the Firebase project. This is a prerequisite for managing user access and subscriptions.

```APIDOC
Firebase Authentication:
  Sign-in method:
    Enable Email/Password provider: true
    Save configuration.
```

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

### Stripe Extension Live Mode Configuration

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-invoices/POSTINSTALL.md

Steps to configure the Stripe Firebase Extension for live mode, including API key setup and optional webhook configuration for invoice status synchronization.

```APIDOC
Stripe Extension Configuration:

1.  **Live Mode API Key**: Update the `Stripe API key` parameter in your extension configuration with your Stripe live mode API key. If previously using a test key, reconfigure via the Firebase console: https://console.firebase.google.com/project/${param:PROJECT_ID}/extensions/instances/${param:EXT_INSTANCE_ID}?tab=config

2.  **Webhook Setup (Optional)**:
    *   **Endpoint URL**: Use your extension's function URL: `${function:updateInvoice.url}`
    *   **Events**: Select all invoice events.
    *   **Signing Secret**: Obtain the webhook signing secret from Stripe (e.g., `whsec_12345678`).
    *   **Extension Configuration**: Reconfigure your extension with the signing secret in the `Stripe webhook secret` parameter.

**Webhook Functionality**: The webhook updates Cloud Firestore documents with `stripeInvoiceStatus` and `lastStripeEvent` fields based on invoice lifecycle events.

**Monitoring**: Monitor extension health, usage, and logs via Firebase console. Manage Stripe account via Stripe dashboard: https://dashboard.stripe.com/
```

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

### Subscription Trial Start Date

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.subscription.trial_start.md

Provides the start date of a subscription's trial period. This property returns a UTC timestamp string if a trial is active, otherwise it returns null. It is a read-only property.

```APIDOC
Subscription.trial_start

If the subscription has a trial, the start date of that trial as a UTC timestamp.

Signature:
readonly trial_start: string | null;
```

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

### Available Scripts

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

A list of npm scripts available for common development tasks such as building, testing, and generating documentation.

```bash
- npm run build
- npm run build:watch
- npm run dev
- npm run test
- npm run clean
- npm run api-extractor
- npm run api-documenter
```

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

### Initialize the Stripe Payments SDK

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Initializes the Stripe Payments SDK by passing a Firebase App instance and configuring Firestore collections for products and customers.

```js
import { getApp } from "@firebase/app";
import { getStripePayments } from "@invertase/firestore-stripe-payments";

const app = getApp();
const payments = getStripePayments(app, {
  productsCollection: "products",
  customersCollection: "customers",
});
```

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

### Get Price

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves a Stripe price from the database.

```APIDOC
getPrice(payments, productId, priceId):
  Description: Retrieves a Stripe price from the database.
  Parameters:
    payments: An instance of StripePayments.
    productId: The ID of the product associated with the price.
    priceId: The ID of the price to retrieve.
```

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

### Get Prices

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves all Stripe prices associated with the specified product.

```APIDOC
getPrices(payments, productId):
  Description: Retrieves all Stripe prices associated with the specified product.
  Parameters:
    payments: An instance of StripePayments.
    productId: The ID of the product.
```

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

### Get Current User Subscriptions

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves existing Stripe subscriptions for the currently signed in user from the database.

```APIDOC
getCurrentUserSubscriptions(payments, options):
  Description: Retrieves existing Stripe subscriptions for the currently signed in user from the database.
  Parameters:
    payments: An instance of StripePayments.
    options: Optional configuration options.
```

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

### Get Current User Subscription

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Retrieves an existing Stripe subscription for the currently signed in user from the database.

```APIDOC
getCurrentUserSubscription(payments, subscriptionId):
  Description: Retrieves an existing Stripe subscription for the currently signed in user from the database.
  Parameters:
    payments: An instance of StripePayments.
    subscriptionId: The ID of the subscription to retrieve.
```

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

### Project Dependencies

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Lists the core Firebase SDK dependencies required for the project, including Firestore, Auth, and Core.

```javascript
* Cloud Firestore (`@firebase/firestore`)
* Firebase Auth (`@firebase/auth`)
* Firebase Core (`@firebase/app`)
```

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

### CommonSessionCreateParams.success_url Property

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.commonsessioncreateparams.success_url.md

Represents the URL to redirect customers to after a successful Stripe payment or setup. This is a property of the CommonSessionCreateParams interface.

```APIDOC
CommonSessionCreateParams.success_url:
  Type: string
  Description: The URL to which Stripe should send customers when payment or setup is complete.
  Optional: true
```

```typescript
success_url?: string;
```

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

### Contributing Workflow

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/README.md

Standard Git commands for contributing to the project, including forking, creating branches, committing changes, and opening pull requests.

```git
git checkout -b feature/amazing-feature
git commit -m 'Add some amazing feature'
git push origin feature/amazing-feature
```

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

### getProducts API Documentation

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.getproducts.md

API documentation for the getProducts function. This includes its signature, parameters with their types and descriptions, and the return value.

```APIDOC
getProducts()
  Description: Retrieves a Stripe product from the database.
  Signature:
    export declare function getProducts(payments: StripePayments, options?: GetProductsOptions): Promise<Product[]>;
  Parameters:
    payments: StripePayments - A valid StripePayments object.
    options: GetProductsOptions - A set of options to customize the behavior.
  Returns:
    Promise<Product[]> - Resolves with an array of Stripe Product objects. May be empty.
```

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

### Subscription.current_period_start Property

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.subscription.current_period_start.md

Represents the start of the current period for a Stripe subscription, provided as a UTC timestamp string. This property is read-only.

```typescript
readonly current_period_start: string;
```

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

### Webhook Secret Configuration

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Instructions for setting the webhook secret during Firebase extension installation, noting that it should initially be set to FILL_IN_FROM_POSTINSTALL and reconfigured later.

```APIDOC
Webhook Secret:

Initial Value: FILL_IN_FROM_POSTINSTALL
Note: Reconfigure after installation.
```

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

### Mobile Payments - Set up Payment Method

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-payments/POSTINSTALL.md

Enables setting up a payment method for future use on mobile. A document is added to the customer's 'checkout_sessions' collection with 'client': 'mobile' and 'mode': 'setup'. The extension will populate the document with 'setupIntentClientSecret', 'ephemeralKeySecret', and 'customer' for integration with the mobile payment sheet.

```APIDOC
APIDOC:
  Endpoint: /customers/{uid}/checkout_sessions
  Method: POST
  Description: Creates a checkout session for setting up a payment method on mobile.
  Parameters:
    - client: string (required, value: 'mobile')
    - mode: string (required, value: 'setup')
  Response:
    The document will be updated by the extension with:
    - setupIntentClientSecret: string
    - ephemeralKeySecret: string
    - customer: string
  Usage:
    Add a document to `${param:CUSTOMERS_COLLECTION}/{uid}/checkout_sessions` with the above parameters.
    Listen for changes to the document to retrieve setup details for the mobile payment sheet.
```

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

### StripePayments Class

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

Holds the configuration and other state information of the SDK. An instance of this class must be passed to almost all the other APIs of this library. Do not directly call the constructor. Use the getStripePayments() function to obtain an instance.

```APIDOC
StripePayments:
  Description: Holds the configuration and other state information of the SDK. An instance of this class must be passed to almost all the other APIs of this library. Do not directly call the constructor. Use the [getStripePayments()](./firestore-stripe-payments.getstripepayments.md) function to obtain an instance.
```

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

### StripePayments.productsCollection Property

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.stripepayments.productscollection.md

Gets the name of the products collection, which is configured within the extension. This property returns a string representing the collection's name.

```APIDOC
StripePayments.productsCollection

Name of the products collection as configured in the extension.

Signature:
```typescript
get productsCollection(): string;
```
```

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

### Fetch and Render Product Data

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/codelab-steps/index.lab.md

Fetches active products and their pricing information from Firestore and renders them to the page using HTML templates. It handles currency formatting and attaches event listeners for subscription actions. Includes a check for template element support.

```javascript
/**
 * Data listeners
 */
function startDataListeners() {
  // Get all our products and render them to the page
  const products = document.querySelector(".products");
  const template = document.querySelector("#product");
  db.collection("products")
    .where("active", "==", true)
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(async function (doc) {
        const priceSnap = await doc.ref
          .collection("prices")
          .orderBy("unit_amount")
          .get();
        if ((!"content") in document.createElement("template")) {
          console.error("Your browser doesn't support HTML template elements.");
          return;
        }

        const product = doc.data();
        const container = template.content.cloneNode(true);

        container.querySelector("h2").innerText = product.name.toUpperCase();
        container.querySelector(".description").innerText =
          product.description.toUpperCase() || "";
        // Prices dropdown
        priceSnap.docs.forEach((doc) => {
          const priceId = doc.id;
          const priceData = doc.data();
          const content = document.createTextNode(
            `${new Intl.NumberFormat("en-US", {
              style: "currency",
              currency: priceData.currency,
            }).format((priceData.unit_amount / 100).toFixed(2))} per ${priceData.interval}`
          );
          const option = document.createElement("option");
          option.value = priceId;
          option.appendChild(content);
          container.querySelector("#price").appendChild(option);
        });

        if (product.images.length) {
          const img = container.querySelector("img");
          img.src = product.images[0];
          img.alt = product.name;
        }

        const form = container.querySelector("form");
        form.addEventListener("submit", subscribe);

        products.appendChild(container);
      });
    });
}
```

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

### StripePayments Class

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.stripepayments.md

Holds the configuration and other state information of the SDK. An instance of this class must be passed to almost all the other APIs of this library. Do not directly call the constructor. Use the getStripePayments() function to obtain an instance.

```APIDOC
StripePayments Class

Holds the configuration and other state information of the SDK. An instance of this class must be passed to almost all the other APIs of this library. Do not directly call the constructor. Use the [getStripePayments()](./firestore-stripe-payments.getstripepayments.md) function to obtain an instance.

Signature:
export declare class StripePayments

Properties:
- app: FirebaseApp
- customersCollection: string
  Name of the customers collection as configured in the extension.
- productsCollection: string
  Name of the products collection as configured in the extension.
```

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

### Create Invoice with Tax Rates

Source: https://github.com/invertase/stripe-firebase-extensions/blob/next/firestore-stripe-invoices/POSTINSTALL.md

Example of creating an invoice document with default tax rates applied to all items and specific tax rates for individual items.

```js
{
  email: "testr@test.de",
  default_tax_rates: ["txr_1HCkCjHYgolSBA35vh6cyHB5"],
  items: [
    {
      amount: 1099,
      currency: "usd",
      description: "item 1",
      tax_rates: ["txr_1HCshzHYgolSBA35WkPjzOOi"],
    },
    {
      amount: 1250,
      currency: "usd",
      description: "item 2",
    },
  ],
}
```