自定义条带元素 javascript 生成的表单

Question

根据我查看的文档和代码，这是创建表单以添加卡或接受卡的方式

  var style = {
    base: {
      fontSize: "16px",
      color: "#32325d",
      fontFamily:
        "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "rgba(0,0,0,0.4)"
      }
    }
  };
  var card = elements.create("card", { style: style });

  card.mount("#card-element");

这是根据文档https://stripe.com/docs/stripe-js 和给出的代码示例https://github.com/stripe-samples/saving-card-without-payment/blob/master/client/script.js

如何设置新表格的格式，以便将电子邮件、持卡人姓名、卡号、有效期和 cvv 放在不同的行上？

我正在使用 twitter 引导程序。另外我怎样才能省略邮政编码部分？

Answer 1

我最近刚刚在我正在从事的一个项目中发现了这一点，它比我预期的更具挑战性。下面的示例为计量计费方案创建付款方式。在学习过程中我最难理解的是在 createPaymentMethod 中，您会注意到它只传递了 cardNumber 元素，然后条带库会自动计算出其他元素。

HTML：

<div class="row">
        <div class="col-md-6 mb-3">
            <label for="cc-name">Name on card</label>
            <input type="text" class="form-control" id="cc-name" placeholder="" required>
            <small class="text-muted">Full name as displayed on card</small>
            <div class="invalid-feedback">
                Name on card is required
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-number" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-exp" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <div id="card-cvc" style="border:2px solid gray;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <button id="submit-button" type="button">

                <div class="spinner hidden" id="spinner"></div>

                <span id="button-text">Pay</span>

            </button>
        </div>
    </div>

Javascript：

$(document).ready(function () {

    // Create a Stripe client
    var stripe = Stripe('YOUR KEY');

    // Create an instance of Elements
    var elements = stripe.elements({
        locale: 'auto'
    });
    let displayError = document.getElementById('card-error');
    var style = {
        base: {
            color: "#32325d",
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
                color: "#aab7c4"
            }
        },
        invalid: {
            color: "#fa755a",
            iconColor: "#fa755a"
        }
    };

    var cardNumber = elements.create("cardNumber", { style: style });
    cardNumber.mount("#card-number");

    var cardExp = elements.create("cardExpiry", { style: style });
    cardExp.mount("#card-exp");

    var cardCvc = elements.create("cardCvc", { style: style });
    cardCvc.mount("#card-cvc");

    cardNumber.on('change', showCardError);
    cardExp.on('change', showCardError);
    cardCvc.on('change', showCardError);

    function showCardError(event) {
        
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    }

    $("#submit-button").on("click", function () {
        createPaymentMethod(cardNumber, 'CUSTOMER ID', 'PRODUCT ID');
    });

    function createPaymentMethod(cardElement, customerId, priceId) {
        return stripe
            .createPaymentMethod({
                type: 'card',
                card: cardElement,
                billing_details: {
                    name: $('#cc-name').val()
                }
            })
            .then((result) => {
                if (result.error) {
                    displayError.textContent = result.error;
                } else {
                    console.log('SUCCESS');
                    console.log(result);
                }
            });
    }

});