Checkout & Shipping ๐Ÿ›’

Cart and Checkout Pages

The cart and checkout do not require any configuration to set up. For reference, here's what the cart looks like with our example product.

config5 cart

Which flows to the checkout page, which captures the customer's email, shipping address, shipping choice (if applicable), and credit card information.

config5 checkout1

Shipping Options

There are three ways to handle shipping for your store products.

  • Free Shipping

    • The default option for Beluga, no further configuration is needed ๐ŸŽ‰
  • Flat-Rate Shipping

    • Continue reading below for a tutorial
  • Integrating with a 3rd-party shipping platform to calculate prices

    • Sadly, this is currently out-of-scope for Beluga. Here's a list of shipping providers that integrate with the Stripe API.

Free Shipping

If you do not set up paid shipping, the checkout flow will show free shipping like so.

config5 free

Flat-Rate Shipping

To set up flat-rate shipping, you can add options in the /config?tab=4 route, by clicking on the "Add Shipping Options" button.

config5 options

Set the names and prices for each option that you want to add:

config5 shipping

In the checkout flow, step 3 will display the shipping options available.

config5 flow

Wondering how this works on the backend? The app is creating a dummy product in Stripe, with different SKUs for the shipping options. If you open up your Stripe dashboard and look at the product list, you will see one of your products called "Flat-Rate Shipping".

config5 stripe

IMPORTANT Since the shipping ID is tied to your Stripe keys, you will need to set up shipping for both your test and live keys.