Stripe API

Hundredjack leverages the Stripe API to facilitate seamless shopping experiences for users and manage business operations efficiently.

Using Bubble.io's API Connector, Hundredjack integrates directly with Stripe, enabling robust functionalities beyond what existing plugins offer. This integration allows for comprehensive account, product, and pricing management, ensuring a smooth checkout process.

Key Features Enabled by Stripe API

• Account Management: Creation and archiving of user accounts.

• Product and Pricing Management: Dynamic creation and updating of products and prices.

• Checkout Process: Display of multiple products, billing address input, promotion code application, and secure payment methods.

• Invoice Generation: Users can download detailed invoices listing all purchased products and billing information.

Stripe's checkout page. Multiple products are finally enabled.

API Call Implementation

Following the official Stripe API documentation, various actions have been created for use in Bubble workflows, ensuring seamless integration and functionality.

Integrated Actions Overview

1. Mouthguard Configurator:

   • When a user customizes and adds a mouthguard to the cart, a corresponding product entry is created in the Hundredjack database and on Stripe.

   • Pricing details for the product are also created on Stripe, ensuring accurate billing.

Good to know. The image comes straight from the 3D viewer screenshot (more infos here)

1. Cart Functionality:

• During checkout, API actions connect or create a user account on Stripe.

• The checkout page is launched on an external site, transmitting all relevant product information and images to Stripe.

• The user can then finalize their purchase by entering payment details and completing the transaction.

As cancel URL we have "this URL". The url contains the cart parameter, so the cart opens avery time.

Good to know. To add multiple products to the checkout page, I copied a JS from NocodeTalks (https://www.youtube.com/@nocodetalks) But since I'm working with two Repeating Groups, I had to find another way to append them.

1. Backend Workflows:

• Upon order placement, Stripe's webhook endpoints relay order information back to Bubble.

• This triggers backend workflows to create a new order in the database, capturing essential details like shipping information.

• A new cart is generated for future use, while the old cart is retained for organizational purposes.