个人中心
gpt4 book ai didi

javascript - Stripe 自定义付款表格未正确显示

转载 作者：行者123 更新时间：2023-11-29 17:45:15 24 4
gpt4 key购买 nike

自定义表单未正确显示。

输出在链接中。

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

请帮帮我。

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

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

结果令人失望，根本没有显示“结果”部分的内容。

我只能看到文本:信用卡或借记卡和提交付款按钮，完全没有样式，

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

基础.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>

主.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 %}

最佳答案

在您的 checkout.html 中，

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

使用这个， <div>

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

关于javascript - Stripe 自定义付款表格未正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50267000/

24 4 0
文章推荐： java - 无法从 mysql 数据库将图像添加到 pdf 文件
文章推荐： mysql - 避免特定 MySQL 列中的重复记录
文章推荐： javascript - 用于生产的 uglify/webpack 之后的每个类的 Class.name 始终为 'e'
文章推荐： javascript - 在 React 渲染方法上解构 Prop 时的性能问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com