With Astro, you can build several e-commerce options, from checkout links to hosted payment pages to building an entire storefront using a payment service API.
Payment processing overlays
Section titled “Payment processing overlays”Some payment processing services (e.g. Lemon Squeezy, Paddle) add a payment form to allow your customer to purchase from your site. These can be hosted overlays or embedded in a page on your site. These may offer some basic customization or site branding, and may be added to your Astro project as scripts, buttons, or external links.
Lemon Squeezy
Section titled “Lemon Squeezy”Lemon Squeezy is an all-in-one platform for payments and subscriptions with multi-currency support, global tax compliance, PayPal integration and more. It allows you to create and manage digital products and services through your account dashboard and provides product URLs for the checkout process.
The basic Lemon.js JavaScript library allows you to sell your Lemon Squeezy products with a checkout link.
Basic Usage
Section titled “Basic Usage”The following is an example of adding a Lemon Squeezy “Buy now” element to an Astro page. Clicking this link will open a checkout and allow the visitor to complete a single purchase.
Lemon.js
Section titled “Lemon.js”Lemon.js also provides additional behavior such as programmatically opening overlays and handling overlay events.
Paddle
Section titled “Paddle”Paddle is a billing solution for digital products and services. It handles payments, taxes, and subscription management through an overlay or inline checkout.
Paddle.js is a lightweight JavaScript library that lets you build rich, integrated subscription billing experiences using Paddle.
Basic Usage
Section titled “Basic Usage”The following is an example of adding a Paddle “Buy Now” element to an Astro page. Clicking this link will open a checkout and allow the visitor to complete a single purchase.
After your default payment link domain (your own website) is approved by Paddle, you can turn any element on your page into a trigger for a checkout overlay using HTML data attributes.
Paddle.js
Section titled “Paddle.js”Instead of passing HTML data attributes, you can send data to the checkout overlay using JavaScript for passing multiple attributes and even greater customization. You can also create upgrade workflows using an inline checkout.
Full-featured e-commerce solutions
Section titled “Full-featured e-commerce solutions”For more customization over your site’s shopping cart and checkout process, you can connect a more fully-featured financial service provider (e.g. Snipcart) to your Astro project. These e-commerce platforms may also integrate with other third-party services for user account management, personalization, inventory and analytics.
Snipcart
Section titled “Snipcart”Snipcart is a powerful, developer-first HTML/JavaScript shopping cart platform.
Snipcart also allows you to integrate with third-party services such as shipping providers, enable webhooks for an advanced e-commerce integration between your shopping cart and other systems, choose from several payment gateways (e.g. Stripe, Paypal, and Square), customize email templates, and even provides live testing environments.
Basic Usage
Section titled “Basic Usage”The following is an example of configuring a Snipcart checkout and adding button elements for “Add to cart” and “Check out now” to an Astro page. This will allow your visitors to add products to a cart without being immediately sent to a checkout page.
Snipcart JavaScript SDK
Section titled “Snipcart JavaScript SDK”The Snipcart JavaScript SDK lets you configure, customize and manage your Snipcart cart programmatically.
This allows you to perform actions such as:
- Retrieve relevant information about the current Snipcart session and apply certain operations to the cart.
- Listen to incoming events and trigger callbacks dynamically.
- Listen to state changes and receive a full snapshot of the state of the cart.
astro-snipcart
Section titled “astro-snipcart”There are two astro-snipcart community packages that can simplify using Snipcart.
-
@lloydjatkinson/astro-snipcartAstro template: This Astro template includes an optional design system for a complete e-commerce solution out of the box. Learn more on its own extensive documentation site, including the motivation behind buildingastro-snipcartas providing a convenient, Astro-native way for you to interact with the Snipcart API. -
@Adammatthiesen/astro-snipcartintegration: This integration was heavily inspired by theastro-snipcarttheme and provides Astro components (or Vue components) that you can add to your existing Astro project for creating products, controlling the cart, and more. See the full tutorial for more information.