Создание страницы оформления заказа в HTML и CSS

Автор Усман Мохьюддин

Оставление корзины — это проблема, о которой вы должны знать, если у вас есть интернет-магазин; это происходит, когда пользователь покидает ваш интернет-магазин, не завершив процесс оформления заказа. Такое поведение может привести к высокому показателю оставленных корзин и низкому коэффициенту конверсии.

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

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

В этой статье показано, как можно создать привлекательную страницу оформления заказа с помощью HTML и CSS.

Что такое страница оформления заказа?

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

Каждый раз, когда покупатель закрывает окно, не завершив оформление покупки, вы теряете доход. Из каждых ста онлайн-покупателей шестьдесят восемь — то есть более двух третей — уходят, не завершив свой заказ.

«Средний показатель оставленных корзин составляет 68,8%» -baymard.com.

Исследование, проведенное Baymard Institute, о причинах отказа от заказа, показало, что большинство случаев связано с высокой дополнительной платой (доставка, налоги), принудительным созданием учетной записи или неоправданно сложным процессом оформления заказа.

Отказ от корзины приводит к тому, что интернет-магазины ежегодно теряют 18 миллиардов долларов США на продажах, поэтому это важный показатель, который необходимо отслеживать; высокий показатель может потенциально указывать на плохой пользовательский опыт или нарушенную воронку конверсии.

Что следует учитывать при создании страницы оформления заказа?

Каждая страница оформления заказа имеет следующие разделы:

  • Сводная информация о корзине
  • Личная информация (например, имя, электронная почта, контактная информация, адрес)
  • Способы доставки (например, FedEx, DHL)
  • Способы оплаты (например, PayPal, Visa, Apple Pay).

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

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

Простота использования

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

Доступность

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

Инициатива по обеспечению доступности веб-сайтов (WIP) установила определенные стандарты доступности веб-сайтов, и они рекомендуют учитывать четыре основных принципа при разработке веб-контента: ваш контент должен быть воспринимаемым, работоспособным, понятным и надежным. В данном случае под «надежным» содержанием подразумевается легко разбираемая структура HTML, совместимая с такими инструментами, как устройства для чтения с экрана.

Простой и не отвлекающий дизайн

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

При разработке страницы следует опираться на рекомендации SEO и устранить отвлекающие факторы.

«Чем меньше барьеров на пути пользователя, тем выше коэффициент конверсии», — Шерис Джейкоб.

Обработка ошибок

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

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

Удобство для мобильных устройств

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

Согласно прогнозам, в 2022 году на долю мобильных устройств будет приходиться 6,9% всех розничных транзакций, а к 2025 году эта доля возрастет до 10%.

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

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

Внутренний API

Иногда корзины покидаются из-за отсутствия вариантов способа оплаты; клиент не может завершить покупку, если вы не предлагаете способ оплаты, который он может использовать.

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

Например, хостируемая страница кассы Rapyd предлагает широкий спектр способов оплаты, а также включает мультивалютные опции, глобальный прием и даже встроенную защиту от мошенничества. Если разработчики ищут решение, которое обеспечивает сертификацию PCI-DSS (Payment Card Industry Data Security Standard) для обработки информации о кредитных картах, Hosted Checkout Page предлагает это с одной интеграцией API.

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

Реализация страницы оформления заказа на HTML и CSS

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

Этот учебник предполагает, что вы обладаете базовым пониманием HTML и CSS-фреймворка Bootstrap. jQuery и Font Awesome были использованы для валидации и шрифтов, соответственно.

Сначала вы создадите HTML-структуру для инициирования процесса оформления заказа. У вас будет основной класс-контейнер внутри тега

чтобы обернуть все вокруг:

<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">

    <title>Payment Process</title>
  </head>
  <body>
    <div class="container mb-5 mt-5">
        <div class="row">
            <a href="components/payment.html">Start Payment Process</a>
        </div>
    </div>
  </body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима

Добавление раздела корзины или сводки

Первый экран, с которым вы сталкиваетесь в процессе оформления заказа, — это корзина или раздел с кратким описанием.

Удобный для пользователя экран должен содержать:

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

Для этого раздела корзины вы можете использовать HTML и Bootstrap CSS для создания структуры и применения стилей, соответственно.

На этой странице есть два раздела: индикатор шагов и представление корзины. Вам нужно обернуть эти два раздела внутри класса-контейнера:

<div class="container mb-5 mt-5">
    <div class="row text-center">
        <div class="col-md-12 col-lg-12">
            <div class="row text-muted">
                <div class="h2 col-12">Rapyd</div>
                <div class="col-lg-12 col-md-12 dashhead-subtitle h6 text-capitalize text-muted">
                    <span id="viewCart" class="text-warning">Cart</span> &#187; <span id="viewInformation">Information</span> &#187; <span id="viewShipping">Shipping</span> &#187; <span id="payment" > <span id="enterpayment" >Enter Payment</span> &#187; <span id="confirm" >Confirm</span> </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="row mt-5">
                <div class="col-4">
                    <h5>Products</h5>
                </div>
                <div class="col-2">
                    <h5>Price</h5>
                </div>
                <div class="col-3">
                    <h5>Quantity</h5>
                </div>
                <div class="col-2">
                    <h5>Total</h5>
                </div>
                <div class="col-1">
                    <h5></h5>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    TOMS Unisex Syanno Black Canvas Shoes
                </div>
                <div class="col-2">
                    <span id="price_1">10</span>
                </div>
                <div class="col-3">
                    <div class="number">
                        <span class="minus">-</span>
                        <input class="txtQuantity" id="txtQuantity_1" type="text" value="1"/>
                        <span class="plus">+</span>
                    </div>
                </div>
                <div class="col-2">
                    <span id="total_1">10</span>
                </div>
                <div class="col-1">
                    <a href="#" class="text-danger">remove</a>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-4">
                    TOMS Kids Ninove Black Canvas Shoes
                </div>
                <div class="col-2">
                    <span id="price_2">20</span>
                </div>
                <div class="col-3">
                    <div class="number">
                        <span class="minus">-</span>
                        <input class="txtQuantity" id="txtQuantity_2" type="text" value="1"/>
                        <span class="plus">+</span>
                    </div>
                </div>
                <div class="col-2">
                    <span id="total_2">20</span>
                </div>
                <div class="col-1">
                    <a href="#" class="text-danger">remove</a>
                </div>
            </div>
        </div>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Добавление раздела для гостевой проверки, регистрации пользователя или входа в систему

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

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

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

Следующий код устанавливает возможность завершения заказа в качестве гостя или пользователя:

<div class="row flex-row-reverse">
    <div class="col-12 col-lg-4 float-right pl-1 pr-1 text-center text-lg-left">
        <button class="btn btn-outline-primary btn-lg col-xs-6 col-xs-offset-3" type="button">
                MEMBER CHECKOUT
        </button>
    </div>
    <div class="col-12 col-lg-4 float-lg-left pl-0 pr-0 text-center text-lg-right">
        <button class="btn btn-outline-warning btn-lg col-xs-6 col-xs-offset-3" type="button">
                GUEST CHECKOUT
        </button>
    </div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

Добавление секции ввода данных пользователя

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

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

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

Следующий код настроит раздел для приема данных пользователя, таких как имя, адрес электронной почты и контактная информация:

<div class="col-12 col-lg-6 justify-content-center border-lg-right">
    <div class="row justify-content-center">
        <div class="col-6" style="font-size: 18px;">
            Contact information
        </div>
        <div class="col-6">
            Already have an account? <a href="#" class="text-info">Log in</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="row mt-2">
                <div class="col-12">
                    <div class="w-75">
                        <input id="txtEmail" name="txtEmail" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="email" title="" placeholder="Please enter email" value="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-xl-12">
            <div class="row justify-content-center">
                <div class="col-12" style="font-size: 18px;">
                    Shipping address
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <select class="selectpicker countrypicker dropdown-header w-100" data-live-search="true" data-default="United States" data-flag="true"></select>
        </div>
        <div class="col-12 mt-4">
            <div class="row">
                <div class="col-6">
                    <div class="w-100">
                        <input id="txtFirstName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="First Name" value="" name="txtFirstName" required>
                    </div>
                </div>
                <div class="col-6">
                    <div class="w-100">
                        <input id="txtLastName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Last Name" value="" name="txtLastName" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 mt-4">
            <div class="w-100">
                <input id="txtAddress" name="txtAddress" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Addess" value="" required>
            </div>
        </div>
        <div class="col-12 mt-4">
            <div class="row">
                <div class="col-6">
                    <div class="w-100">
                        <input id="txtCityName" name="txtCityName" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="City Name" value="" required>
                    </div>
                </div>
                <div class="col-6">
                    <div class="w-100">
                        <input id="txtPostalCode" class="form-control" type="text" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Postal Code" value="" name="txtPostalCode" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 mt-4">
            <div class="w-100">
                <input id="txtPhoneNumber" name="txtPhoneNumber" class="form-control" type="number" data-container="body" data-placement="top" data-toggle="tooltip" title="" placeholder="Phone number" value="">
            </div>r 
        </div>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

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

После ввода следующего кода будет создан чекбокс для получения согласия:

<span class=" pl-4">
                            <input class="form-check-input" style="cursor:pointer;" type="checkbox" name="cbEmailOffers" id="cbEmailOffers">
                            <small class="txtEmail-field text-muted">Email me with news and offers</small>
                        </span>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Доставка очень важна в электронной коммерции. Электронный магазин должен иметь несколько способов доставки, чтобы пользователи могли выбрать наиболее подходящий для них.

Следующий код создаст экран с несколькими способами доставки:

<div class="container">
    <div class="row mt-4">
        <div class="col-xl-12">
            <div class="row justify-content-center">
                <div class="col-12" style="font-size: 18px;">
                    Shipping method
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="rbShippingMethods" id="rbFedEx" checked>
                <label class="form-check-label" for="rbFedEx">
                    FedEx
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="rbShippingMethods" id="rbDHL">
                <label class="form-check-label" for="rbDHL">
                    DHL
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="rbShippingMethods" id="rbExpress">
                <label class="form-check-label" for="rbExpress">
                    Express
                </label>
            </div>
        </div>
    </div>
</div>

Вход в полноэкранный режим Выход из полноэкранного режима

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

Создание раздела выбора способа оплаты

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

Кроме того, способы оплаты должны быть безопасными и защищенными от кражи или мошенничества.

Используя следующий код, вы можете создать экран с несколькими способами оплаты:


<div class="row mt-4">
    <div class="h4 col-12">Payment</div>
    <div class="col-12">
        All transactions are secure and encrypted.
    </div>
</div>

<div class="accordion mt-4" id="paymentMethods">
    <div class="card">
        <div class="card-header" id="creditDebit">
            <h6 class="mb-0 ml-4">
                <input class="form-check-input" type="radio" name="rbPayments" id="rbCreditAndDebit" data-toggle="collapse" data-target="#collapseCreditDebitInfo" aria-expanded="true" aria-controls="collapseCreditDebitInfo" checked>
                <label class="form-check-label" for="rbCreditAndDebit">
                    Credit & Debit Cards
                </label>
            </h6>
        </div>

        <div id="collapseCreditDebitInfo" class="collapse show" aria-labelledby="creditDebit" data-parent="#paymentMethods">
            <div class="card-body">
                Credit and debit card info if any.
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="paypal">
            <h6 class="mb-0 ml-4">
                <input class="form-check-input" type="radio" name="rbPayments" id="rbPayPal" data-toggle="collapse" data-target="#collapsePayPalInfo" aria-expanded="false" aria-controls="collapsePayPalInfo">
                <label class="form-check-label" for="rbPayPal">
                    PayPal
                </label>
            </h6>
        </div>
        <div id="collapsePayPalInfo" class="collapse" aria-labelledby="paypal" data-parent="#paymentMethods">
            <div class="card-body">
                PayPal Info
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="applePay">
            <h6 class="mb-0 ml-4">
                <input class="form-check-input" type="radio" name="rbPayments" id="rbApplePay" data-toggle="collapse" data-target="#collapseApplePayInfo" aria-expanded="false" aria-controls="collapseApplePayInfo">
                <label class="form-check-label" for="rbApplePay">
                    Apple Pay
                </label>
            </h6>
        </div>
        <div id="collapseApplePayInfo" class="collapse" aria-labelledby="applePay" data-parent="#paymentMethods">
            <div class="card-body">
                Apple Pay info
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="googlePay">
            <h6 class="mb-0 ml-4">
                <input class="form-check-input" type="radio" name="rbPayments" id="rbGooglePay" data-toggle="collapse" data-target="#collapseGooglePayInfo" aria-expanded="false" aria-controls="collapseGooglePayInfo">
                <label class="form-check-label" for="rbGooglePay">
                    Google Pay
                </label>
            </h6>
        </div>
        <div id="collapseGooglePayInfo" class="collapse" aria-labelledby="googlePay" data-parent="#paymentMethods">
            <div class="card-body">
                Google Pay info
            </div>
        </div>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

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

<div class="container mb-5 mt-5">
    <div class="row text-center">
        <div class="col-md-12 col-lg-12">
            <div class="row text-muted">
                <div class="h2 col-12">Rapyd</div>
                <div class="col-lg-12 col-md-12 dashhead-subtitle h6 text-capitalize text-muted">
                    <span id="viewCart" >Cart</span> &#187; <span id="viewInformation">Information</span> &#187; <span id="viewShipping">Shipping</span> &#187; <span id="payment" > <span id="enterpayment" class="text-warning">Enter Payment Card Info</span> &#187; <span id="confirm" >Confirm</span> </span>
                </div>
            </div>
        </div>
    </div>
    <div id="pnlCreditCardSection" class="mt-5">
        <div class="mx-auto">
            <div class="row justify-content-center">
                <div class="col-9 my-4 py-1">
                    <h2 class="text-center">Credit &amp; Debit Cards Information</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-7 mt-3 mt-lg-0 text-center mx-auto">

                    <!--Hosted Field for CC number-->
                    <div class="row mb-4">
                        <div class="col-lg-1 col-md-1"></div>
                        <div class="col-lg-3 col-md-3 col-12 text-left">
                            <span class="text-muted recorddetaillabel mr-1">Card Number *</span>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
                            <div class="row">
                                <div class="col-12 pr-1">
                                    <div class="input-group">
                                        <div class="w-100" aria-label="Card Number" aria-describedby="card-number-logo">
                                            <input type="number" class="center-block form-control" id="card-number" required/>
                                        </div>
                                        <div id="card-logo" class="pt-2 mx-2 input-group-append">
                                            <img alt="card image" src="https://files.readme.io/9018c4f-Visa.png" height="20px" id="card-number-logo">
                                        </div>
                                    </div>
                                    <span class="helper-text text-left" id="ccn-help"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Hosted Field for CC EXP-->
                    <div class="row mb-4">
                        <div class="col-lg-1 col-md-1"></div>
                        <div class="col-lg-3 col-md-3 col-12 text-left">
                            <span class="text-muted recorddetaillabel mr-1">Exp. Date *</span>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
                            <div class="row">
                                <div class="col-12 pr-1">
                                    <div class="input-group">
                                        <div class="mr-2" data-bluesnap="exp">
                                            <input type="date" value="2022-01-01" min="2000-01-01" class="center-block form-control" id="exp-date"/>
                                        </div>
                                    </div>
                                    <span class="helper-text text-left" id="exp-help"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Hosted Field for CC CVV-->
                    <div class="row mb-4">
                        <div class="col-lg-1 col-md-1"></div>
                        <div class="col-lg-3 col-md-3 col-12 text-left">
                            <span class="text-muted recorddetaillabel mr-1">Security Code *</span>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 text-lg-right text-md-right text-right text-sm-left">
                            <div class="row">
                                <div class="col-12 pr-1">
                                    <div class="input-group">
                                        <div class="mr-2" data-bluesnap="cvv">
                                            <input type="text" class="center-block form-control" id="cvv" required/>
                                        </div>
                                    </div>
                                    <span class="helper-text text-left" id="cvv-help"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="row flex-row-reverse">
            <div class="col-12 col-lg-6 float-right pl-1 pr-1 text-center text-lg-left">
                <button class="btn btn-outline-primary btn-lg col-xs-6 col-xs-offset-3" type="button" id="submit-button">Next</button>
            </div>
            <div class="col-12 col-lg-6 float-lg-left pl-0 pr-0 text-center text-lg-right">
                <input type="button" name="btnBack" value="Back" id="btnBack" class="btn btn-lg btn-outline-primary mb-3">
            </div>
        </div>
    </div>
</div>

Вход в полноэкранный режим Выйти из полноэкранного режима

Когда приведенный выше код будет отображен, на экране появится следующее окно.

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

Заключение

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

Следуя советам из этой статьи, вы можете использовать HTML и Bootstrap CSS для создания страницы оформления заказа, которая обеспечит хороший опыт оформления заказа и повысит эффективность вашего бизнеса.

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

Кроме того, следующие статьи помогут вам расширить свои знания о том, как создать страницу оформления заказа:

  • Шаги по созданию страницы оформления заказа
  • Как интегрировать страницу оформления заказа в корзину покупок

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

Вы можете сгенерировать страницу оформления заказа через API или непосредственно из клиентского портала и настроить ее даже одним нажатием кнопки.

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

Оцените статью
devanswers.ru
Добавить комментарий