When you’re working with API calls, field validations, and payment integrations, building a custom checkout experience can be a formidable challenge.

But fear no more; our feature of the week will lighten the load and give you some relief. 

Say hello to headless React components, designed to help you quickly assemble a beautiful, branded checkout without touching a line of GraphQL code. 

We’ve taken care of all the behind-the-scenes magic, so you can focus on delivering a tailored experience that wows your customers.

What's new 👀

We’ve just launched a set of headless React components that make it super simple to build custom checkout pages on top of Firmhouse. That means you no longer have to wrestle with API calls, form validation, or price calculations. Instead, we take care of it all.

What are the benefits? 🤔

Save time: Skip the tedious back-end work—our components take care of the core checkout features for you.

More flexibility: Whether you’re using Next.js or another React-based frontend, our components fit right in.

Better customization: You’re in control of the look, feel, and added features, allowing you to create a checkout that matches your brand.

Improved customer experience: Build a seamless checkout process and easily add any specific functionality you need.

How it works ⚒️

To get started, simply install our package, and you’re ready to start building. The main components include:

• CheckoutForm: This handles all the user input fields.
• OrderedProductsList: This displays products in the cart.
• OrderSummary: This shows the total price and order breakdown.
• FirmhouseCartProvider: The magic wrapper that provides your components with everything they need, like the cart data and API tokens.

These components will work together once you set things up to build a smooth, fully functional checkout process.

What is the setup process? 🔨

1. Install the package: In your project’s terminal, run: npm install @firmhouse/firmhouse-sdk @firmhouse/headless-react

2. Wrap your components: In your app, wrap the checkout components in the FirmhouseCartProvider, passing in your API token and other necessary props like the cart token and locale.
3. Customize your fields: Use the CheckoutForm to create custom input fields for things like terms acceptance, address, or any other details you need.
4. Show your products: Use OrderedProductsList to display the cart contents, and OrderSummary to give users a clear view of their total.

That’s it! You can now create a checkout experience that fits your brand’s needs perfectly.

Things to keep in mind 🧠

• More features coming: Right now, these components focus on the checkout process, but we’re planning to expand and add more functionality in the future.
• Translations included: The components come with built-in translation support, so you can easily adapt to different languages and regions.‍
• Style freely: These components are fully customizable, so feel free to get creative with how your checkout looks and functions.

Thank you for joining us for our latest update. Check out the new headless React section in our Firmhouse Developer docs.

And don’t miss these examples to see how easy it is to get started. You can also visit our Changelog to see other product features and updates.

Have questions or need assistance? Our support team is here to help.

‍