Электронная коммерция (E-commerce)

С помощью Astro вы можете реализовать различные варианты электронной коммерции: от простых ссылок на оплату до полноценных витрин магазинов с использованием API платежных сервисов.

Платежные оверлеи (всплывающие формы)

Некоторые сервисы (например, Lemon Squeezy, Paddle) предоставляют готовую форму оплаты, которая открывается поверх вашего сайта. Это позволяет клиентам совершать покупки, не покидая вашу страницу. Такие решения легко интегрируются в Astro через скрипты, кнопки или внешние ссылки.

Lemon Squeezy

Lemon Squeezy — это универсальная платформа для платежей и подписок с поддержкой мультивалютности, налогового комплаенса и интеграцией с PayPal.

Библиотека Lemon.js позволяет продавать товары с помощью простых ссылок для оформления заказа.

Базовое использование

Пример добавления кнопки «Купить сейчас» на страницу Astro:

Добавьте тег <script> в секцию head или body вашей страницы:
src/pages/product.astro
```
<script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
```
Создайте ссылку с классом lemonsqueezy-button, ведущую на URL вашего товара.
src/pages/product.astro
```
<a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
  Купить сейчас
</a>
```

Подробности ищите в руководстве для разработчиков Lemon Squeezy.

Paddle

Paddle — решение для биллинга цифровых продуктов. Оно берет на себя налоги и управление подписками.

Paddle.js — легкая библиотека для создания интегрированного процесса оплаты.

Базовое использование

Добавьте скрипты Paddle на страницу:

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({
    token: 'ВАШ_ТОКЕН'
  });
</script>

Используйте HTML-атрибуты для настройки кнопки оплаты:

<a
  href="#"
  class="paddle_button"
  data-display-mode="overlay"
  data-items='[{"priceId": "pri_...", "quantity": 1}]'
>
  Купить сейчас
</a>

Полнофункциональные решения

Для максимального контроля над корзиной и процессом оформления заказа вы можете подключить более продвинутые сервисы, такие как Snipcart.

Snipcart

Snipcart — это мощная платформа корзины покупок на базе HTML/JavaScript, ориентированная на разработчиков.

Она позволяет выбирать платежные шлюзы (Stripe, PayPal), настраивать email-шаблоны и интегрироваться с логистическими сервисами.

Базовое использование

Добавьте скрипт Snipcart на страницу после элемента <body>.
Настройте window.SnipcartSettings с вашим API-ключом.

Используйте класс snipcart-add-item на кнопках для добавления товаров в корзину:

<button
  class="snipcart-add-item"
  data-item-id="astro-print"
  data-item-price="39.99"
  data-item-name="Принт Astro"
>
  В корзину
</button>

Используйте класс snipcart-checkout для создания кнопки открытия корзины.

Полная инструкция доступна в документации Snipcart.