条纹自定义付款表单未正确显示

Question

自定义表单未正确显示。

输出在链接中。

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

请帮帮我。

我只是复制并粘贴了Stripe在其元素页面中提供的3个代码。

html文件中的html，css文件中的CSS，连接到js文件中的html和js，连接到html

结果是令人失望的，并没有显示他们的“结果”部分中的内容。

我只能看到文字：信用卡或借记卡以及按钮提交付款，根本没有样式，

我错过了什么吗？显然是的：p

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 %

Answer 1

另一答案