Stripe offers two ways to integrate Checkout (overview).

1. Hosted: Redirect your customers to a separate URL. Specify a return URL so that customers return to your website when they're done checking out.
2. Embedded: Keep your customers on your site by embedding the checkout form directly.

This repo demonstrates how to integrate option 2, embedded checkout. The hosted integration should be a lot simpler to implement because it's a simple URL redirect (follow this guide).

To run the project, run the command below. Replace the environment variables with your API keys.

STRIPE_SECRET_KEY='sk_test_abc123' STRIPE_PUBLISHABLE_KEY='pk_test_abc123' reflex run

This is the base Reflex template - installed when you run reflex init.

If you want to use a different template, pass the --template flag to reflex init. For example, if you want a more basic starting point, you can run:

reflex init --template blank

This template has the following directory structure:

├── README.md
├── assets
├── rxconfig.py
└── {your_app}
    ├── __init__.py
    ├── components
    │   ├── __init__.py
    │   └── sidebar.py
    ├── pages
    │   ├── __init__.py
    │   ├── dashboard.py
    │   ├── index.py
    │   └── settings.py
    ├── styles.py
    ├── templates
    │   ├── __init__.py
    │   └── template.py
    └── {your_app}.py

See the Project Structure docs for more information on general Reflex project structure.

In this template, the pages in your app are defined in {your_app}/pages/. Each page is a function that returns a Reflex component. For example, to edit this page you can modify {your_app}/pages/index.py. See the pages docs for more information on pages.

In this template, instead of using rx.add_page or the @rx.page decorator, we use the @template decorator from {your_app}/templates/template.py.

To add a new page:

1. Add a new file in {your_app}/pages/. We recommend using one file per page, but you can also group pages in a single file.
2. Add a new function with the @template decorator, which takes the same arguments as @rx.page.
3. Import the page in your {your_app}/pages/__init__.py file and it will automatically be added to the app.

In order to keep your code organized, we recommend putting components that are used across multiple pages in the {your_app}/components/ directory.

In this template, we have a sidebar component in {your_app}/components/sidebar.py.

As your app grows, we recommend using substates to organize your state.

You can either define substates in their own files, or if the state is specific to a page, you can define it in the page file itself.