Пользовательская форма оплаты в полосе не отображается должным образом - PullRequest
Новая
       18

Пользовательская форма оплаты в полосе не отображается должным образом

0 голосов
/ 10 мая 2018

Пользовательские формы не отображаются должным образом.

Вывод по ссылке.

https://screenshots.firefox.com/Esrmcoq8LUIzgVWB/127.0.0.1

Пожалуйста, помогите мне.

Я просто скопировал и вставил 3 кода, которые Stripe дает на странице элементов.

HTML в html-файле, CSS в файле css, связанный с html, и js в файле js, связанный с html

Результат неутешителен и совсем не показывает, что находится в разделе «результат».

Я вижу только текст: кредитная или дебетовая карта и кнопка «Отправить платеж», без стилизации,

Я что-то упустил? Очевидно, да: р

base.html 

{% load staticfiles %}


 <!doctype html>
 <html lang="en">
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{% static 'css/starter-template.css' %}" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

 </head>

 <body>



{% block content %}
{% endblock%}

{% block default %}
{% endblock%}


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/slim.min.js' %}" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="{% static 'js/popper.min.js' %}"> </script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% block script %}

{% endblock %}
</body>
 </html>

main.css 

   h1{
        color: red;
    }

    .row{
        margin-right: 0;
        margin-left: 0;
    }

    body, html {
      height: 100%;
      background-color: #f7f8f9;
      color: #6b7c93;
    }

    *, label {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      font-size: 16px;
      font-variant: normal;
      padding: 0;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }

    button {
      border: none;
      border-radius: 4px;
      outline: none;
      text-decoration: none;
      color: #fff;
      background: #32325d;
      white-space: nowrap;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 14px;
      box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
      border-radius: 4px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.025em;
      text-decoration: none;
      -webkit-transition: all 150ms ease;
      transition: all 150ms ease;
      float: left;
      margin-left: 12px;
      margin-top: 31px;
    }

    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
      background-color: #43458b;
    }

    form {
      padding: 30px;
      height: 120px;
    }

    label {
      font-weight: 500;
      font-size: 14px;
      display: block;
      margin-bottom: 8px;
    }

    #card-errors {
      height: 20px;
      padding: 4px 0;
      color: #fa755a;
    }

    .form-row {
      width: 70%;
      float: left;
    }

    .token {
      color: #32325d;
      font-family: 'Source Code Pro', monospace;
      font-weight: 500;
    }

    .wrapper {
      width: 90%;
      margin: 0 auto;
      height: 100%;
    }

    #stripe-token-handler {
      position: absolute;
      top: 0;
      left: 25%;
      right: 25%;
      padding: 20px 30px;
      border-radius: 0 0 4px 4px;
      box-sizing: border-box;
      box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
        0 15px 35px rgba(50, 50, 93, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.1);
      -webkit-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
      transform: translateY(0);
      opacity: 1;
      background-color: white;
    }

    #stripe-token-handler.is-hidden {
      opacity: 0;
      transform: translateY(-80px);
    }

    /**
     * The CSS shown here will not be introduced in the Quickstart guide, but shows
     * how you can use CSS to style your Element's container.
     */


    .StripeElement {
      background-color: white;
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid transparent;
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
      border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    }

    .ElementsApp, .ElementsApp .InputElement {
      color: #32325d;line-height: 24px;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 16px;height: 24px;-webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill {
      color: #32325d;
      -webkit-text-fill-color: #32325d;
    }
    .ElementsApp .InputElement + .Input-placeholder--ie {
      opacity: 1;color: #aab7c4;
    }
    .ElementsApp .InputElement::-webkit-input-placeholder {
      opacity: 1;color: #aab7c4;
    }
    .ElementsApp .InputElement::-moz-placeholder {
      opacity: 1;color: #aab7c4;
    }
    .ElementsApp .InputElement:-ms-input-placeholder {
      opacity: 1;color: #aab7c4;
    }
    .ElementsApp .InputElement::placeholder {
      opacity: 1;color: #aab7c4;
    }
    .ElementsApp .InputElement.is-invalid {
      color: #fa755a;
    }
    .ElementsApp:not(.is-autofilled) .InputElement.is-invalid:-webkit-autofill {
      color: #fa755a;
      -webkit-text-fill-color: #fa755a;
    }
    .ElementsApp.is-invalid .Icon-fill--invalid {
      fill: #fa755a;
    }

checkout.html 

    {% extends 'base.html' %}

    {% block script %}

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

    <script>

        var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

        // Create an instance of Elements
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
          base: {
            color: '#32325d',
            lineHeight: '24px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
              color: '#aab7c4'
            }
          },
          invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
          }
        };

        // Create an instance of the card Element
        var card = elements.create('card', {style: style});

        // Add an instance of the card Element into the `card-element` <div>
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
          var displayError = document.getElementById('card-errors');
          if (event.error) {
            displayError.textContent = event.error.message;
          } else {
            displayError.textContent = '';
          }
        });

        // Handle form submission
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
          event.preventDefault();

          stripe.createToken(card).then(function(result) {
            if (result.error) {
              // Inform the user if there was an error
              var errorElement = document.getElementById('card-errors');
              errorElement.textContent = result.error.message;
            } else {
              // Send the token to your server
              stripeTokenHandler(result.token);
            }
          });
        });


    </script>

    {% endblock %}



    {% block content %}

    <form action="/charge" method="post" id="payment-form">
      <div class="form-row">
        <label for="card-element">
          Credit or debit card
        </label>
        <div id="card-element">
          <!-- a Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors -->
        <div id="card-errors" role="alert"></div>
      </div>

      <button>Submit Payment</button>
    </form>

    {% endblock %}

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

В вашем checkout.html,

вместо <div class="form-row">

используйте это, <div>

Это потому, что существует класс css с именем "form-row", который конфликтует с существующим.

0 голосов
/ 10 мая 2018

Код, который создает экземпляр вашего card элемента и монтирует его к вашему #card-element элементу DOM, должен вызываться, когда ваша форма / элемент загружена: https://stripe.com/docs/stripe-js/elements/quickstart#create-form

После загрузки вышеприведенной формы создайте экземпляр элемента и подключите его к созданному выше контейнеру элемента:

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

...