Question

我在javascript中实现了带有Stripe元素的表单。

付款正常，我无法解决的唯一问题是，在第一次加载时，用于输入银行信息的字段加载失败，并且没有出现。

我试图以不同的顺序调用.js文件，也简化了代码，但是问题仍然存在。

这是我调用JS文件的方式：首先在标题中使用Stripe JS API：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8"/>
    <title> Set Order - Booda </title>
    <link rel = "stylesheet" href = "css/home.css" media = "screen"/>
    <script src = "https://js.stripe.com/v3/"> </script>
</head>
<body>

在页面底部，我的JS文件：

<script src="js/jquery.js"></script>
<script src="js/order.js"></script>

这是order.js文件的内容，其中包含显示Stripe表单的调用代码。

function onStripeReady()
{
    var stripe = Stripe('pk_test_rW6PoHny4jfGXix3FUTKDxJw');
    var elements = stripe.elements();
    var style = {
    base: {
        iconColor: '#666ee8',
        color: '#31325f',
        fontWeight: 400,
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4',
        },
        ':-webkit-autofill': {
          color: '#666ee8',
        },
      },
    };

    var cardNumberElement = elements.create('cardNumber', { style: style });
    var cardExpiryElement = elements.create('cardExpiry', { style: style });
    var cardCvcElement = elements.create('cardCvc', { style: style });

    cardNumberElement.mount('#card-number-element');
    cardExpiryElement.mount('#card-expiry-element');
    cardCvcElement.mount('#card-cvc-element');

    //  on submit
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      $(".ld").css("display","table");
          // address_zip: document.getElementById('email').value,
      var options = {
        name: document.getElementById('email').value,
      };
      var token = stripe.createToken(cardNumberElement, options).then(function(result) {
        if(result.error){
            $(".ld").fadeOut(500);
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          stripeTokenHandler(result.token);
        }});
    });
}

//  send token
function stripeTokenHandler(token) {
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);

  form.appendChild(hiddenInput);
  form.submit();
  $(".pay-btn").attr("disabled",true);
}

onStripeReady();

这很成问题，因为它迫使买方手动重新加载页面（F5），并且大多数人甚至在尝试任何操作之前就已经离开了页面。

当我检查来自控制台的请求时，我看到条带请求以这种方式失败：

另一方面，加载工作（在执行F5一次或两次之后）会显示很多请求（我不知道有这么多请求正常吗？）

是否存在一种我不尊重的良好做法，并引起了这种担忧？

第一次加载时未显示的条形表单字段

0 个答案: