Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joyhchen/reflex-embedded-checkout
Demo: embed Stripe Checkout in a Reflex app (full-stack web app in Python) https://reflex.dev/ + https://embedcheckout.com/
https://github.com/joyhchen/reflex-embedded-checkout
reflex stripe stripe-checkout
Last synced: 3 days ago
JSON representation
Demo: embed Stripe Checkout in a Reflex app (full-stack web app in Python) https://reflex.dev/ + https://embedcheckout.com/
- Host: GitHub
- URL: https://github.com/joyhchen/reflex-embedded-checkout
- Owner: joyhchen
- Created: 2024-03-12T01:46:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-05-19T06:47:38.000Z (8 months ago)
- Last Synced: 2024-09-26T01:41:37.251Z (4 months ago)
- Topics: reflex, stripe, stripe-checkout
- Language: Python
- Homepage:
- Size: 26.4 KB
- Stars: 15
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-reflex - Embed Checkout in Reflex - Stripe embedded checkout implementation (External Resources / Tutorials)
README
# Reflex embedded checkout
Stripe offers two ways to integrate Checkout ([overview](https://docs.stripe.com/payments/checkout)).
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](https://docs.stripe.com/checkout/quickstart)).
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:
```bash
reflex init --template blank
```
## About this Template
This template has the following directory structure:
```bash
├── 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](https://reflex.dev/docs/getting-started/project-structure/) for more information on general Reflex project structure.
### Adding Pages
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](https://reflex.dev/docs/pages/routes/) 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.
### Adding Components
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`.
### Adding State
As your app grows, we recommend using [substates](https://reflex.dev/docs/substates/overview/)
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.