При реализации вариантов оплаты в приложении всегда хорошая идея иметь процесс оплаты, который максимально короткий и простой. В этой статье мы собираемся создать модаль оформления заказа, чтобы обработать один раз платежи по веб-приложениям, используя Рейв , Django и JavaScript. Решить проблему использования пипс и Виртуальский вместе, мы будем использовать Пипнв создать нашу среду развития. Если вам нужна помощь настройки пиронв Пожалуйста, проверьте это руководство.
Настройка проекта
Первое, что мы сделаем, это установить Django. Затем мы начнем новый проект, который мы назовем Djangorave Отказ В этом проекте мы создадим наше первое приложение, которое мы позвоним Платежи Отказ Перейдите к вашему терминалу и введите следующие команды:
# install Django $ pipenv install django # activate the pipenv shell to start a new shell subprocess $ pipenv shell (rave-checkout-python) $ django-admin startproject djangorave (rave-checkout-python) $ python manage.py startapp payments
Обратите внимание, что виртуальная среда Rave-Checkout-Python Это просто часть моего кодового каталога, ваша может быть все, что вы выбрали. Давайте добавим недавно установленное приложение к Stall_apps Конфигурация в settings.py :
INSTALLED_APPS = [
'django.contrib',
'django.contrib.admin',
'django.contrib .auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#update the newly installed app
'payments.apps.PaymentsConfig',
]
Далее, в той же папке мы обновим URLS.PY Файл, чтобы включить Платежи приложение:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('payments.urls')),
]
Наш следующий шаг – создать домашнюю страницу для нашего приложения. В Djangorave Родительская папка, создайте папку с именем Шаблоны И в нем ваша домашняя страница:
(rave-checkout-python) $ mkdir templates (rave-checkout-python) $ touch templates/homepage.html
Тогда мы обновим settings.py Файл, чтобы Django может получить доступ к Шаблоны папка:
#djangorave/settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates'], # add this line
'APP_DIRS': True,
},
]
Мы просто заполним домашнюю страницу базовым сообщением сейчас:
# templates/homepage.html My First Django app
Тогда в Платежи Папка, мы создадим Просмотр .py Файл, где на основе класса Django и универсальные представления будут использоваться для оказания домашней страницы:
# payments/views.py
from django.views.generic.base import TemplateView
class HomePageView(TemplateView):
template_name = 'homepage.html'
Взгляд существует, но у него еще нет URL-пути. Давайте изменим это, создав URLS.PY В нашем Платежи Приложение, где мы назначаем путь к нашему мнению:
#payments/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.HomePageView.as_view(), name='homepage'),
]
На данный момент наше приложение достаточно хорошее, чтобы просматривать браузер. Давайте синхронизируем изменения, которые мы сделали до сих пор для нашей базы данных и запускают приложение на нашем локальном сервере:
# use the migrate command to sync to your database (rave-checkout-python) $ python manage.py migrate # start a local webserver with the runserver command (rave-checkout-python) $ python manage.py runserver
Это запускает ваше приложение на http://127.0.0.1:8000/ Отказ Перейдите к этому пути в вашем браузере, и вы должны увидеть домашнюю страницу:
Интегрировать Rave.
Второй этап построения этого приложения будет интегрировать Rave в приложение. Голова к восторжению Сайт и подписаться на аккаунт. На вашу приборную панель сначала переключайтесь из режима Live, чтобы проверить режим, затем перейдите к Настройки> API и получите ваши ключи API:
Скопируйте свои публичные и секретные ключи и вставьте их в нижней части вашего settings.py файл. Обязательно включите инвертированные запятые:
#settings.py
RAVE_PUBLIC_KEY = 'YOUR PUBLIC KEY HERE'
RAVE_SECRET_KEY = 'YOUR SECRET KEY HERE'
Строительство формы оформления оформления заказа
Теперь у нас есть наши ключи API, давайте добавим Rave’s встроенный скрипт нашему Homepage.html файл:
В вышеуказанном шаблоне вы заметите, что есть {{ключевая}} Атрибут, назначенный для Обвинитель постоянный. Он должен содержать стоимость нашего восторженного открытого ключа. Давайте обновим его значение в :
# payments/views.py
from django.conf import settings
from django.views.generic.base import TemplateView
class HomePageView(TemplateView):
template_name = 'homepage.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['key'] = settings.RAVE_PUBLIC_KEY
return context
Нажмите кнопку «Обновить» и «Базовая страница HTML», с которой мы можем работать:
Нажмите на Пожертвуйте здесь Кнопка и модальный, настраиваемый Rave, открывается для вас, чтобы сделать оплату:
Сделайте тестовый платеж, используя один из Rave Тестовые карточки здесь Отказ Давайте использовать 5531 8866 5214 2950 Убедитесь, что дата истечения срока действия и номер CVV также правильно вводится. При предложении OTP или PIN-файла используйте указанные значения в списке карт:
Чтобы подтвердить, что оплата была успешной, отправляйтесь на вашу Rave Dashboard и нажмите на Транзакции Чтобы получить доступ к истории вашей транзакции:
Проверка оплаты от конца пользователя
Уверены, что наши торговцы могут сказать, что платежи заносятся к своему разовому счету, но как пользователь может сказать, что их платеж был успешным? Давайте создадим страницу, которая отображает сообщение успеха для пользователя всякий раз, когда они делают успешный платеж. В Шаблоны Папка, создайте новый файл успех .html :
# templates/success.htmlYour payment was successful
Далее мы создадим представление для успех .html :
#payments/views.py
from django.shortcuts import render
from django.conf import settings
from django.views.generic.base import TemplateView
class HomePageView(TemplateView):
template_name = 'home.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['key'] = settings.RAVE_PUBLIC_KEY
context['logo'] = settings.WILDLIFE_LOGO
return context
# create the view here
class Success(TemplateView):
template_name = 'success.html'
Затем мы создадим шаблон URL для вида:
#payments/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('success.html', views.Success.as_view(), name='success') #add this line,
path('', views.HomePageView.as_view(), name='home'),
]
Наконец, мы включаем успех .html В функции обратного вызова в Homepage.html :
callback: function(response) {
var txref = response.tx.txRef;
console.log("This is the response returned after a charge", response);
if (
response.tx.chargeResponseCode == "00" ||
response.tx.chargeResponseCode == "0"
) {
document.location.href = "success.html"
// redirect to a success page
} else {
// redirect to a failure page.
}
x.close();
}
Кажется, мы приятно идти. Давайте сделаем тестовый платеж и посмотрите, как выглядит поток:
Резюме
В более практическом сценарии мы будем использовать более безопасное соединение, а также быть более осторожным при обращении с нашими ключами API, надежно хранив их в переменных среда. Если вам нужен исходный код этого демо, вы можете найти его здесь Отказ
Оригинал: “https://dev.to/fullstackmafia/how-to-build-a-custom-checkout-page-in-minutes-with-django-and-javascript-34jc”