Электронная коммерция

С помощью Astro вы можете создать несколько вариантов электронной коммерции, от ссылок для оформления заказа до “размещенных” страниц оплаты, и до создания целого магазина с использованием API платежного сервиса.

Оверлей обработки платежей

Заголовок раздела Оверлей обработки платежей

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

Lemon Squeezy

Заголовок раздела Lemon Squeezy

Lemon Squeezy - это универсальная платформа для платежей и подписок с поддержкой мультивалютности, глобального налогообложения, интеграцией с PayPal и многим другим. Она позволяет создавать и управлять цифровыми товарами и услугами через панель управления учетной записью и предоставляет URL-адреса товаров для процесса оформления заказа.

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

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

Заголовок раздела Базовое использование

Ниже приведен пример добавления элемента Lemon Squeezy “Купить сейчас” на страницу Astro. При нажатии на эту ссылку откроется окно оформления заказа и посетитель сможет совершить одну покупку.

1. Добавьте следующий тег <script> на вашу страницу в head или body:

   src/pages/my-product-page.astro

   <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

2. Создайте ссылку на странице, указав URL-адрес вашего продукта. Включите класс lemonsqueezy-button, чтобы при нажатии открывался оверлей оформления заказа.

   src/pages/my-product-page.astro

   <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
     Buy Now
   </a>

Lemon.js

Заголовок раздела Lemon.js

Lemon.js также предоставляет дополнительные возможности, такие как программное открытие оверлеев и обработка событий оверлеев.

Для получения дополнительной информации прочтите Руководство по началу работы с Lemon Squeezy для разработчиков.

Paddle

Заголовок раздела Paddle

Paddle - это решение для выставления счетов за цифровые товары и услуги. Он обрабатывает платежи, налоги и управление подписками через оверлей или встроенное оформление заказа.

Paddle.js - это легковесная JavaScript-библиотека, которая позволяет создавать полноценные, интегрированные варианты подписной оплаты с использованием Paddle.

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

Заголовок раздела Базовое использование

Ниже приведен пример добавления элемента “Купить сейчас” Paddle на страницу Astro. При нажатии на эту ссылку откроется окно оформления заказа, и посетитель сможет совершить одну покупку.

После того как ваш домен платежной ссылки по умолчанию (ваш собственный веб-сайт) будет одобрен Paddle, вы можете превратить любой элемент на вашей странице в триггер для оверлея оформления заказа с помощью атрибутов данных HTML.

1. Добавьте следующие два тега <script> на вашу страницу в head или body:

   src/pages/my-product-page.astro

   <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
   <script type="text/javascript">
     Paddle.Setup({
       token: '7d279f61a3499fed520f7cd8c08' // замените токеном на стороне клиента
     });
   </script>

2. Превратите любой элемент на вашей странице в кнопку Paddle Checkout, добавив класс paddle_button:

   src/pages/my-product-page.astro

   <a href="#" class="paddle_button">Buy Now</a>

3. Добавьте атрибут data-items, чтобы указать priceId и quantity вашего продукта Paddle. Вы также можете дополнительно передавать другие поддерживаемые атрибуты данных HTML для предзаполнения данных, обработки успешного оформления заказа или стилизации вашей кнопки и оверлея оформления заказа:

   src/pages/my-product-page.astro

   <a
     href="#"
     class="paddle_button"
     data-display-mode="overlay"
     data-theme="light"
     data-locale="en"
     data-success-url="https://example.com/thankyou"
     data-items='[
       {
         "priceId": "pri_01gs59hve0hrz6nyybj56z04eq",
         "quantity": 1
       }
     ]'
   >
     Buy now
   </a>

Paddle.js

Заголовок раздела Paddle.js

Вместо передачи атрибутов данных HTML вы можете отправлять данные в оверлей оформления заказа с помощью JavaScript для передачи нескольких атрибутов и еще большей настройки. Вы также можете создавать рабочие процессы обновления с помощью встроенного оформления заказа.

Прочитайте подробнее об использовании Paddle.js для создания встроенного оформления заказа.

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

Заголовок раздела Полнофункциональные решения электронной коммерции

Для более гибкой настройки корзины покупок на вашем сайте и процесса оформления заказа вы можете подключить более полнофункционального поставщика финансовых услуг (например, Snipcart) к вашему Astro проекту. Эти платформы электронной коммерции также могут интегрироваться с другими сторонними сервисами для управления учетными записями пользователей, персонализации, инвентаризации и аналитики.

Snipcart

Заголовок раздела Snipcart

Snipcart - это мощная платформа для интернет-магазина на HTML/JavaScript.

Snipcart также позволяет интегрироваться со сторонними сервисами, такими как службы доставки, включать вебхуки для продвинутой интеграции электронной коммерции между вашей корзиной покупок и другими системами, выбирать из нескольких платежных шлюзов (например, Stripe, Paypal и Square), настраивать шаблоны электронной почты и даже предоставляет живую среду тестирования.

Совет

Хотите получить готовое решение Snipcart? Посмотрите astro-snipcart, полностью функциональный шаблон сообщества Astro, включающий опциональную систему дизайна, готовый к интеграции с вашим существующим аккаунтом Snipcart.

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

Заголовок раздела Базовое использование

Ниже приведен пример настройки оформления заказа Snipcart и добавления кнопок “Добавить в корзину” и “Оформить заказ сейчас” на страницу Astro. Это позволит вашим посетителям добавлять товары в корзину без немедленной отправки на страницу оформления заказа.

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

1. Добавьте скрипт как показано в инструкциях по установке Snipcart на вашу страницу после элемента <body>.

   src/pages/my-product-page.astro

   <body></body>
   <script>
     window.SnipcartSettings = {
       publicApiKey: "ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ_API",
       loadStrategy: "on-user-interaction",
     };
   
     (function()...); // доступно в документации Snipcart
   </script>

2. Настройте window.SnipcartSettings с любыми доступными настройками Snipcart, чтобы контролировать поведение и внешний вид вашей корзины.

   src/pages/my-product-page.astro

   <script>
     window.SnipcartSettings = {
       publicApiKey: "ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ_API",
       loadStrategy: "manual",
       version: "3.7.1",
       addProductBehavior: "none",
       modalStyle: "side",
   
     };
   
     (function()...); // доступно в документации Snipcart
   </script>

3. Добавьте class="snipcart-add-item" к любому HTML-элементу, например, к <button>, чтобы добавить товар в корзину при нажатии. Также включите любые другие элементы данных для общих атрибутов товаров Snipcart, таких как цена и описание, а также любые необязательные поля.

   src/pages/my-product-page.astro

   <button
     class="snipcart-add-item"
     data-item-id="astro-print"
     data-item-price="39.99"
     data-item-description="A framed print of the Astro logo."
     data-item-image="/assets/images/astro-print.jpg"
     data-item-name="Astro Print"
     data-item-custom1-name="Frame color"
     data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
     data-item-custom2-name="Delivery instructions"
     data-item-custom2-type="textarea"
   >
   
     Add to cart
   </button>

4. Добавьте кнопку оформления заказа Snipcart с классом snipcart-checkout, чтобы открыть корзину и позволить гостям завершить покупку с помощью модального окна оформления заказа.

   src/pages/my-product-page.astro

   <button class="snipcart-checkout">Click here to checkout</button>

Snipcart JavaScript SDK

Заголовок раздела Snipcart JavaScript SDK

Snipcart JavaScript SDK позволяет вам программно конфигурировать, настраивать и управлять вашей корзиной Snipcart.

Это позволяет вам выполнять такие действия, как:

• Получать необходимую информацию о текущей сессии Snipcart и применять определенные операции к корзине.
• Прослушивать входящие события и динамически запускать обратные вызовы.
• Прослушивать изменения состояния и получать полный “снимок” состояния корзины.

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

astro-snipcart

Заголовок раздела astro-snipcart

Есть два созданных сообществом пакета astro-snipcart, которые могут упростить использование Snipcart.

• @lloydjatkinson/astro-snipcartAstro-шаблон: Этот шаблон Astro включает в себя опциональную систему дизайна для полноценного решения электронной коммерции из коробки. Узнайте больше на его собственном обширном сайте документации, включая мотивацию создания astro-snipcart как предоставление удобного, нативного для Astro способа взаимодействия с API Snipcart.

• интеграция @Adammatthiesen/astro-snipcart: Эта интеграция была сильно вдохновлена astro-snipcart и предоставляет компоненты Astro (или компоненты Vue), которые вы можете добавить в ваш существующий проект Astro для создания продуктов, управления корзиной и многого другого. Более подробную информацию можно найти в полном руководстве.

Ресурсы сообщества

Заголовок раздела Ресурсы сообщества

• Практический опыт: интернет-магазин с Astro?