Часть 2

В предыдущей статье мы узнали, как настроить наш проект и зарегистрировать новых клиентов в Stripe с помощью сигналов, используя изолированное приложение внутри нашего проекта. Сегодня мы продолжим наше путешествие по созданию надежного и простого способа приема платежей с помощью Stripe.

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

Что вы узнаете сегодня:

  • Создайте шаблон страницы продуктов и настройте URL-адрес.
  • Интерактивность внешнего интерфейса кода с помощью JavaScript.
  • Инициализируйте экземпляр внешнего интерфейса Stripe для получения защищенного сеанса от конечной точки создателя будущего сеанса.

Создайте страницу продуктов

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

Как обычный технический предприниматель с навыками программирования полного стека, нам нужно будет сменить шляпу на этом этапе и перейти от бэкэнд-разработки к фронтенд-разработке. Нам нужно будет работать с базовым шаблоном html, чтобы показать интерфейс нашего приложения и реализовать некоторые функции в javascript для обработки безопасного создания сеанса Stripe. Но не волнуйтесь! Мы скоро вернемся в увлекательную страну бэкэнда и разработки баз данных.

Шаблон страницы и URL-путь

Django нужны шаблоны для рендеринга представления в HTML. Итак, сначала создайте папку /templates внутри нашей /stripe_shop папки приложения. Django по умолчанию будет искать шаблоны в этой папке для всех установленных приложений.

Затем мы создадим базовый файл шаблона с именем shop.html с некоторыми компонентами Bootstrap, чтобы создать наш интерфейс. Обычно при работе с шаблонами вы настраиваете модульную систему, в которой общие компоненты, такие как навигация или заголовок, включаются в виде блоков в базовый шаблон, который вы просто можете визуализировать с вашим текущим содержимым страницы. Но на этот раз, поскольку мы обрабатываем только одну страницу, мы не собираемся создавать ничего необычного, но, по крайней мере, он не будет похож на веб-сайт 1999 года и не повредит вам глаза, пока вы его тестируете. Все преимущества как видите!

Скопируйте это основное содержание в stripe_shop/templates/shop.html

Теперь нам нужно добавить путь к представлению для рендеринга нашего шаблона магазина. Поскольку мы не обрабатываем и не передаем какой-либо контекст в шаблон, мы можем выполнять рендеринг напрямую, не добавляя функцию просмотра, используя TemplateView.as_view Django непосредственно в путях URL. Перейдите к настройкам пути URL-адреса вашего основного приложения myshop/urls.py и добавьте следующие строки:

...
from django.views.generic import TemplateView
urlpatterns = [
    ...
    path('', TemplateView.as_view(template_name='shop.html')),
]

Сначала мы импортируем класс TemplateView, чтобы отобразить шаблон как представление, затем мы вызываем шаблон непосредственно по пути по умолчанию. Теперь, если вы запустите сервер и откроете http://127.0.0.1:8000, вы должны увидеть нашу великолепную страницу нового продукта как страницу по умолчанию в нашем проекте.

Добавление функциональности JavaScript

Страница нашего продукта выглядит красиво, но кнопки не работают. Нам нужно добавить ванильный JavaScript для обработки создания безопасного сеанса Stripe. У нас еще нет готовой конечной точки в нашем приложении, но мы добавим ее позже. А пока добавьте эти строки в конец <head>tag в нашем шаблоне shop.html:

<script src="https://js.stripe.com/v3/"></script>

Это вызовет библиотеку JavaScript для обработки безопасных транзакций с помощью Stripe. Затем добавьте эту функцию в конец тега <body> в нашем шаблоне shop.html:

<script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe('...');

// Gets all buy buttons
var buttons = document.getElementsByClassName('buy-button');
for (i = 0; i < buttons.length; i++) {

  // for every button we will add a Stripe POST request action
  buttons[i].addEventListener('click', function(event) {
    var targetElement = event.target || event.srcElement;
    var productName =  targetElement.value;
    console.log('Buying: ' + productName);

    // Our endpoint with the chosen product name
    var url = '/create-checkout-session/' + productName

    // Create a new Checkout Session
    fetch(url, {
      method: 'POST',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(session) {
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then(function(result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using `error.message`.
      if (result.error) {
        alert(result.error.message);
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
    });

  });

}
</script>

Сначала вам нужно будет заполнить свой открытый ключ Stripe в конструкторе экземпляра Stripe, дважды проверьте, что вы действительно используете открытый ключ, а не частный. Поскольку мы не передаем в шаблон какой-либо переменный контекст, мы можем редактировать ключ непосредственно в html-коде, однако для более продвинутой системы я настоятельно рекомендую вам отобразить открытый ключ, который у нас уже есть в settings.py, и вы можете перейти к шаблону.

Следующая функция довольно проста: мы создаем массив с объектами кнопок и добавляем им прослушиватель событий для click событий на них. Затем мы используем свойство value на каждой кнопке, чтобы идентифицировать продукт, который пользователь выбирает для покупки. Используя асинхронное действие POST, мы получаем будущую конечную точку (мы еще не реализовали ее) в нашем проекте, чтобы начать безопасный сеанс проверки. Эта конечная точка получит productName от кнопок в качестве параметра в URL-адресе. Если у вас будет больше параметров для передачи в конечную точку, лучше всего обработать их внутри параметра body функции JavaScript fetch.

Если вы перейдете на страницу http://127.0.0.1:8000 и нажмете любую кнопку покупки, консоль JavaScript должна напечатать правильное название продукта, который вы покупаете. и он покажет ошибку типа POST http://localhost:8000/create-checkout-session/product_name 404 (Not Found), что правильно, потому что мы не создали путь URL-адреса или представление для обработки создания безопасного сеанса.

Что дальше?

Поздравляю! Сегодня вы создали интерфейс своего магазина, указав путь URL и шаблон. Вы также реализовали действия UX в обычном JavaScript для получения сеанса из конечной точки создателя будущего сеанса с правильным продуктом, связанным с кнопкой покупки.

В следующей части 3 этой серии мы закодируем представление создателя сеанса, которое является одним из наиболее важных компонентов проекта. До скорого!