E-commerce
本頁內容尚未翻譯。
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 overlaysSome 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 SqueezyLemon 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 UsageThe 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.
-
Add the following
<script>
tag to your pagehead
orbody
: -
Create an anchor tag on the page linking to your product URL. Include the class
lemonsqueezy-button
to open a checkout overlay when clicked.
Lemon.js
Section titled Lemon.jsLemon.js also provides additional behavior such as programmatically opening overlays and handling overlay events.
Paddle
Section titled PaddlePaddle 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 UsageThe 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.
-
Add the following two
<script>
tags to your pagehead
orbody
: -
Turn any element on your page into a Paddle Checkout button by adding the
paddle_button
class: -
Add a
data-items
attribute to specify your product’s PaddlepriceId
andquantity
. You can also optionally pass additional supported HTML data attributes to prefill data, handle checkout success, or style your button and checkout overlay:
Paddle.js
Section titled Paddle.jsInstead 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 solutionsFor 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 SnipcartSnipcart 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.
Want a pre-built Snipcart solution instead? Check out astro-snipcart
, a fully functional Astro community template including an optional design system, ready for you to integrate with your existing Snipcart account.
Basic Usage
Section titled Basic UsageThe 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.
-
Add the script as shown in the Snipcart installation instructions on your page after the
<body>
element. -
Customize
window.SnipcartSettings
with any of the available Snipcart settings to control the behavior and appearance of your cart. -
Add
class="snipcart-add-item"
to any HTML element, such as a<button>
, to add an item to the cart when clicked on. Also include any other data elements for common Snipcart product attributes such as price and description, and any optional fields. -
Add a Snipcart checkout button with the
snipcart-checkout
class to open the cart and allow guests to complete their purchase with a checkout modal.
Snipcart JavaScript SDK
Section titled Snipcart JavaScript SDKThe 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-snipcartThere are two astro-snipcart
community packages that can simplify using Snipcart.
-
@lloydjatkinson/astro-snipcart
Astro 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-snipcart
as providing a convenient, Astro-native way for you to interact with the Snipcart API. -
@Adammatthiesen/astro-snipcart
integration: This integration was heavily inspired by theastro-snipcart
theme 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.