Как добавить кнопки оплаты с простой полосой в таблицы цен в Divi

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

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

Давайте начнем!

Sneak Peek

Вот краткий обзор кнопок оплаты Stripe, которые мы создадим в этом руководстве.

Начиная

Для этого учебного пособия вам понадобится следующее:

• Тема Divi (установлена ​​и активна)
• Учетная запись Stripe
• Плагин Stripe Payments для WordPress от WP Simply Pay (установлен и активен)
• Мы также будем использовать макет страницы цен на цифровые продукты, доступный БЕСПЛАТНО в Divi Builder.

О Плагине

Stripe Payments для WordPress от WP Simply Pay - это плагин, который позволяет вам начать сбор платежей по кредитной карте с помощью Stripe, используя простую вставку шорткода. Фактически вы можете создавать формы оформления заказа и кнопки оплаты вручную без использования плагина, но поскольку этот плагин упрощает работу и предлагает несколько удобных функций (например, страницы подтверждения платежа и страницы сбоя платежа), я подумал, что в долгосрочной перспективе это будет более полезно. . Для этого урока я буду использовать БЕСПЛАТНУЮ версию плагина Lite. Профессиональная версия плагина предоставит вам больший контроль над стилем ваших форм, а также поддержку таких вещей, как настраиваемые поля, настраиваемые суммы и функции подписки.

Настройка форм Stripe с помощью плагина

После того, как вы установили и активировали плагин, перейдите в Simple Pay Lite > Настройки . Затем на вкладке Stripe Keys вам нужно будет ввести ключи API вашей учетной записи Stripe. Для этого урока я буду использовать только тестовые ключи, но вам нужно будет убедиться и активировать свою учетную запись Stripe и сгенерировать несколько живых ключей api, если вы хотите начать собирать реальные деньги.

Вы можете найти свои ключи API, войдя в свою учетную запись Stripe и нажав Разработчики > Ключи API .

Вам нужно будет скопировать публикуемый ключ и секретный ключ в настройки плагина.

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

Установите для стиля кнопки оплаты значение «Нет (унаследовано от темы)». Все, что это делает, - это убирать CSS, используемый для стилизации кнопки с синей полосой по умолчанию. Это немного упростит ситуацию, когда мы добавим собственный CSS для стилизации кнопки в Divi.

Затем сохраните изменения.

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

Создание форм оплаты Stripe

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

Чтобы создать новую форму оплаты, перейдите на панель управления WordPress и выберите Simple Pay Lite> Добавить новую.

Присвойте платежной форме название (это название не будет отображаться в интерфейсе).

Затем на вкладке «Варианты оплаты» введите единовременную сумму.

Затем щелкните вкладку «Отображение формы на странице» и измените текст кнопки оплаты по умолчанию на «Купить сейчас» (или что угодно). Вы также можете выбрать текст обработки кнопки оплаты.

На вкладке "Отображение наложения кассы" обновите следующее:

Название компании
описание предмета
Логотип / URL изображения
Включить "Запомнить меня": ДА

Эти параметры определяют, что будет отображаться во всплывающем окне формы оформления заказа для этого конкретного продукта.

Как только вы закончите, обязательно опубликуйте / обновите платежную форму.

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

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

После того, как все ваши платежные формы будут созданы, вы можете просмотреть свои платежные формы, перейдя в Simple Pay Lite> Платежные формы. Там у вас будет легкий доступ к шорткодам.

Добавление кнопок оплаты Stripe в макет страницы Divi

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

Затем выберите вариант «Выбрать готовый макет».

Откройте пакет макета цифрового продукта и щелкните, чтобы перейти на страницу с ценами на цифровой продукт.

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

На отдельной вкладке вернитесь на страницу форм оплаты и возьмите шорткод, который хотите добавить в таблицу цен.

Затем вернитесь к макету страницы цен и откройте настройки таблицы цен для одной из таблиц цен в макете.

Выньте текст кнопки (он вам не нужен, поскольку шорткод будет служить кнопкой), а затем вставьте шорткод под содержимым в поле содержимого.

Вы увидите кнопку без стиля, под которой выделен текст «тестовый режим». У кнопки нет стиля, потому что мы выбрали вариант использования стилей темы для кнопки вместо синей кнопки по умолчанию. Текст в тестовом режиме просто напомнит вам, что вы не используете форму оплаты в реальном времени. Текст тестового режима, очевидно, исчезнет после использования живых ключей API.

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

Протестируйте одну из кнопок, чтобы убедиться, что наложение платежной формы работает правильно. Это должно выглядеть так…

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

Стилизация полосовых кнопок оплаты в соответствии с макетом

Чтобы стилизовать кнопки оплаты Stripe, мы собираемся добавить несколько пользовательских CSS в настройки нашей страницы. Во-первых, нам нужно выяснить, какой селектор мы будем использовать для стилизации кнопки. Вы можете найти это, используя инструменты разработчика вашего браузера. Щелкните правой кнопкой мыши на кнопке Stripe и выберите «Inspect». В html-коде вы можете видеть, что кнопка имеет CSS-класс «simpay-payment-btn».

Это селектор, который нам нужен для настройки стиля кнопки.

Если мы хотим согласовать стиль наших кнопок оплаты Stripe с кнопками, используемыми в нашем готовом макете, мы можем проверить одну из кнопок Divi, уже стилизованных на странице, чтобы получить нужный нам код CSS.

Теперь откройте настройки страницы и добавьте следующий Custom CSS на вкладке Advanced:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

Вот и все! Посмотрим на окончательный результат.

Настройка страниц подтверждения платежа и сбоя платежа

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

Это полезно для сопоставления стилей этих страниц с вашим веб-сайтом без использования настраиваемого CSS.

Последние мысли

Stripe может быть чрезвычайно удобным решением для сбора онлайн-платежей. А с помощью плагина Simple Payments for WordPress вы можете настроить и запустить базовую функциональность Stripe Checkout на своем сайте Divi за считанные минуты. Кроме того, если вы воспользуетесь преимуществами готовых макетов Divi, вы можете добавить и стилизовать свои кнопки оплаты Stripe в соответствии с вашим макетом, просто скопировав и вставив код CSS, уже созданный для вас. В результате получился полнофункциональный и безопасный инструмент обработки платежей, который может собирать платежи от посетителей, даже не покидая страницы.

Не стесняйтесь изучить другие способы приема платежей Stripe на своем веб-сайте WordPress.

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

Ваше здоровье!