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

在加载表单/元素时，应调用创建import java.text.DateFormat;//import Statements import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.*; public class Menu { public static void main(String[]args)//main class { String StringDate; //Code Implemented to convert user String input to Calendar Format DateFormat dateFormat = new SimpleDateFormat("DD/MM/YYYY", Locale.ENGLISH); Calendar newDates = Calendar.getInstance(); Calendar newsDate = Calendar.getInstance(); Calendar neweDate = Calendar.getInstance(); Calendar newDateCreated = Calendar.getInstance(); String newName;//menu class specific variables declared String newID; //These variables will be used to construct new policies and portfolios String newPolicyNum; String newPolicyType; String newStatus; String newPolicyName; Double newDailyRate; ArrayList<Portfolio> Portfolios = new ArrayList<Portfolio>(); ArrayList<Policy> Policies = new ArrayList<Policy>(); Scanner keyboard = new Scanner(System.in);//Scanner int menuChoice;//int to allow user input to navigate menu system do//do loop to run main menu { System.out.println(" --------------------Welcome to Insurance World------------------- "); System.out.println(" ----------Insurance That's Truely 'Out Of This World'------------ "); System.out.println(" |_________________________________________________________________|"); System.out.println("1)| Create An Insurance Portfolio |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("2)| Amend Portfolio Details |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("3)| Display a Portfolio |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("4)| Create An Insurance Policy |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("5)| Cancel A Policy |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("6)| Display a Policy |"); System.out.println(" |-----------------------------------------------------------------|"); System.out.println("7)| Exit Program |"); System.out.println(" |_________________________________________________________________|"); menuChoice = keyboard.nextInt();//menu input if (menuChoice == 1) //create a portfolio { int j = 1; for(int i = 0; i < j; i++) //counter is declared { //Portfolio initialised System.out.println("Please Enter The Name of The Portfolio Holder: "); newName=keyboard.nextLine(); System.out.println("Your ID Number is: " + i); newID = " " + i; System.out.println("Please Enter The DOB of The Portfolio Holder(DD/MM/YYYY): "); StringDate=keyboard.nextLine(); Portfolio temp = new Portfolio( newID, newName, newDates ); temp.setNumPolicies(0); temp.setDOB(newDates.getInstance()); temp.setDateCreated(newDateCreated); Portfolios.add(temp); System.out.println("Your Portfolio Will Look Like This: "); temp.displayPortfolio(); } } else if(menuChoice == 2) { //amend portfolio details int i; System.out.println("Please Enter The ID Number Of The Portfolio You Wish To Amend: "); i=keyboard.nextInt(); Portfolios.get(i); int amendChoice; System.out.println("What do you want to Change? "); System.out.println("1) Name of Portfolio Holder "); System.out.println("2) Date Of Birth of Portfolio Holder "); System.out.println("3) ID of Portfolio "); System.out.println("4) Exit Program "); amendChoice=keyboard.nextInt();//user input if(amendChoice == 1)//update Portfolio name { System.out.println("Please Enter the Updated Name of the Portfolio Holder: "); newName=keyboard.nextLine(); Portfolios.get(i).setName(newName); System.out.println("Your New Portfolio Will Look Like This: "); Portfolios.get(i).displayPortfolio(); } else if(amendChoice == 2)//update portfolio dob { System.out.println("Please Enter the Updated DOB of the Portfolio Holder: "); StringDate=keyboard.nextLine(); Portfolios.get(i).setDOB(newDates.getInstance()); System.out.println("Your New Portfolio will Look Like This: "); Portfolios.get(i).displayPortfolio(); } else if(amendChoice == 3)//update portfolio id { System.out.println("Please Enter the Updated ID of the Portfolio: "); newID=keyboard.nextLine(); Portfolios.get(i).setId(newID); System.out.println("Your New Portfolio Will Look Like This: "); Portfolios.get(i).displayPortfolio(); } else if(amendChoice == 4)//exit amend menu { System.out.println("Exiting Menu"); } else//validation { System.out.println("The Number You Entered isn't a Valid Choice"); } } else if(menuChoice == 3)//display portfolio details { System.out.println("Please Enter the ID of the Portfolio you wish to View: "); int i = keyboard.nextInt(); Portfolios.get(i).displayPortfolio(); } else if(menuChoice == 4)//create a new policy { int j = 1; for(int i = 0; i < j; i++) { System.out.println("Please Enter the Name of the Policy Holder: "); newPolicyName=keyboard.nextLine(); newPolicyNum = " " + i; newStatus = "PENDING"; System.out.println("Please Enter Your DoB (DD/MM/YYYY): "); StringDate = keyboard.nextLine(); System.out.println("Please Enter The Date You Want Your Policy To Start (DD/MM/YYYY): "); StringDate = keyboard.nextLine(); System.out.println("Please Enter The Date You Want Yourt Policy To End (DD/MM/YYYY): "); StringDate = keyboard.nextLine(); System.out.println("Please Enter Your Portfolio ID: "); int p = keyboard.nextInt(); int subMenuChoice;//Menu to Choose policy type System.out.println("Please Choose The type of Policy You Want: "); System.out.println("1) Motor Insurance Policy"); System.out.println("2) Home Insurance Policy"); System.out.println("3) Mobile Phone Insurance Policy"); System.out.println("4) Travel Insurance Policy"); subMenuChoice=keyboard.nextInt(); if(subMenuChoice==1) { newPolicyType = "Motor Insurance";//Policy type set System.out.println("Please Enter the Registration Number of your Car: "); String newRegNum = keyboard.nextLine();//newRegNum initialised System.out.println("Please Enter The Model of Your Car: "); String newModel = keyboard.nextLine();//newModel initialised System.out.println("Please Enter The Value Of Your Car: "); double newValue = keyboard.nextDouble();//newValue initialised newDailyRate = 0.0; Policy temp = new MotorPolicy(newRegNum, newModel, newValue, newPolicyNum, newPolicyName, newDates, newsDate, neweDate, newPolicyType, newDailyRate);//Policy initialised as a Motor Policy temp.setPortfolio(Portfolios.get(p));//new Policy is given a protfolio Policies.add(temp);//Policy added to Policy array System.out.println("We Will Calculate Your Motor Insurance Premium!"); temp.setPremium(((MotorPolicy) temp).calcMotorPremium(newsDate, neweDate, newValue));//policy premium calculated and stored System.out.println("We Calculated Your Premium to Be: £" + temp.getPremium()); temp.setDailyRate(temp.getPremium()/365);//daily rate set temp.setStatus("ACTIVE"); } else if(subMenuChoice==2) { newPolicyType = "Home Insurance";//Policy type set System.out.println("Please Enter the type of Property you wish to insure (bungalow, semi-detached etc): "); String newPropType = keyboard.nextLine();//newPropType initialised System.out.println("Please Enter The Postcode of the Property "); String newPostcode = keyboard.nextLine();//newPostcode initialised System.out.println("Please Enter The Value Of Your Property: "); double newValue = keyboard.nextDouble();//newValue initialised newDailyRate = 0.0; Policy temp = new HomePolicy(newPropType, newPostcode, newValue, newPolicyNum, newPolicyName, newDates, newsDate, neweDate, newPolicyType, newDailyRate);//new Policy initialised as a Home Policy temp.setPortfolio(Portfolios.get(p));//new Policy is given a protfolio Policies.add(temp);//Policy added to Policy array System.out.println("We Will Calculate Your Home Insurance Premium!"); temp.setPremium(((HomePolicy) temp).calcHomePremium(newsDate, neweDate, newValue)); System.out.println("We Calculated Your Premium to Be: £" + temp.getPremium()); temp.setDailyRate(temp.getPremium()/365); temp.setStatus("ACTIVE"); } else if(subMenuChoice==3) { newPolicyType = "Mobile Phone Insurance"; System.out.println("Please Enter The Model of the Phone "); String newModel = keyboard.nextLine(); System.out.println("Please Enter The Value Of Your Phone: "); double newValue = keyboard.nextDouble(); newDailyRate = 0.0; Policy temp = new MobilePhonePolicy(newValue, newModel, newPolicyNum, newPolicyName, newDates, newsDate, neweDate, newPolicyType, newDailyRate);//new Policy initialised as a Home Policy temp.setPortfolio(Portfolios.get(p));//new Policy is given a protfolio Policies.add(temp);//Policy added to Policy array System.out.println("We Will Calculate Your Mobile Phone Insurance Premium!"); temp.setPremium(((MobilePhonePolicy) temp).calcMobilePhonePremium(newsDate, neweDate, newValue)); System.out.println("We Calculated Your Premium to Be: £" + temp.getPremium()); temp.setDailyRate(temp.getPremium()/365); temp.setStatus("ACTIVE"); } else if(subMenuChoice==4) { newPolicyType = "Travel Insurance"; System.out.println("Please Enter A Destination from the List Below "); System.out.println("Europe - £10 per Day"); System.out.println("North America - £12 per Day"); System.out.println("South America - £14 per Day"); System.out.println("Asia - £15"); String newDestination = keyboard.nextLine(); newDailyRate = 0.0; Policy temp = new TravelPolicy(newDestination, newPolicyNum, newPolicyName, newDates, newsDate, neweDate, newPolicyType, newDailyRate);//new Policy initialised as a Home Policy temp.setPortfolio(Portfolios.get(p));//new Policy is given a protfolio Policies.add(temp);//Policy added to Policy array System.out.println("We Will Calculate Your Mobile Phone Insurance Premium!"); temp.setPremium(((TravelPolicy) temp).calcTravelPremium(newsDate, neweDate, newDestination)); System.out.println("We Calculated Your Premium to Be: £" + temp.getPremium()); temp.setDailyRate(temp.getPremium()/365); temp.setStatus("ACTIVE"); } else { System.out.println("The Number You Entered Doesn't Correspond To A Choice!");//Validation for policy choice menu } } } else if(menuChoice == 5) { //cancel policy int i; System.out.println("Please Enter the ID of The Policy You Want To Cancel: "); i = keyboard.nextInt(); System.out.println("Enter the Date you want to cancel your policy: "); StringDate = keyboard.nextLine(); Policies.get(i).cancelPolicy(neweDate); Policies.get(i).setStatus("CANCELLED"); } else if(menuChoice == 6) { //display policy int i; System.out.println("Please Enter The Policy Number of The Policy You Want to View: "); i = keyboard.nextInt(); Policies.get(i).toString(); } else { System.out.println("The Input you entered doesn't correspond to a choice!");//validation method } } while(menuChoice!=7);//exit condition { System.out.println("Exiting Program!"); } } }元素实例并将其挂载到card DOM元素的代码： https://stripe.com/docs/stripe-js/elements/quickstart#create-form

当上面的表单已加载时，创建一个Element实例并将其挂载到上面创建的Element容器中：

在元素加载完成之前调用您的代码，所以我认为这是问题所在。考虑在文档末尾移动#card-element块或在onload事件处理程序中执行JS。

Answer 2

在您的checkout.html中，

代替 <div class="form-row">

使用这个， <div>

这是因为存在一个名为“ form-row”的css类，该类与现有的类冲突。

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

2 个答案: