如何在Stripe中自定义信用卡表单？

Question

我正在使用 Stripe 配置支付网关，我有一个基本的结构，你可以看到你可以在 javascript 代码中添加样式，但没有东西可以构建下面代码的 HTML form 内容：

$(document).ready(function() {
var stripe = Stripe('pk_test_lf3erqZAzfBDiiNp1wfFkxgv');
var elements = stripe.elements();

var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};
var card = elements.create('card', {style: style});
card.mount('#card-element');

});

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form action="charge.php" 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>

注意: StackOverflow不会显示结果，您可以在https://jsfiddle.net/k16mk5z1/中查看代码的结果。

它的结果是以下内容：

如何按照以下方式自定义表单设计：

有一份文档提供了参考资料，但我无法理解它们。

注:

从Stripe的版本3开始，该新版本通过其JavaScript插件生成卡片表单的内容。

以前的版本2中有一个HTML表单结构。

- user8880927

Answer 1

您可以在Elements中使用单独的字段，例如：http://jsfiddle.net/ywain/whj357u9/

如果您还想收集持卡人的姓名，则需要使用常规的 <input> 字段，并在调用 createToken() 时提供其内容作为第二个参数：http://jsfiddle.net/ywain/eckhnz19/

编辑：如果您希望单独的卡片字段显示卡牌品牌图标，则需要自己重新实现该功能。使用 change 事件相对容易实现。以下是一个示例：http://jsfiddle.net/ywain/L96q8uj5/

- Ywain

---

我喜欢第一个例子，但它没有激活信用卡图像，你如何使该功能在第一个例子中激活。 - user8880927

那个例子很完美，你对Stripe很了解，我有一些对Stripe的疑问，在我的以后的问题中，希望你能回答我的问题 :) 敬礼！祝您有美好的一天 - user8880927

元素内置的卡品牌图标显示仅可与“全合一”小部件一起使用。如果您使用单独的字段，则需要使用自己的资产。在我上面链接的示例中，我使用了[PaymentFont]（https://paymentfont.com/），但您当然可以使用其他任何东西。 - Ywain

@Ywain，第一个示例是我想要的，但只需要cardNumberElement来创建令牌，所以CVC和Expiry元素是无用的？ - Tiktac

@Ywain，能否从用户输入中读取这些卡片元素的值？例如，将用户的卡片信息存储在数据库中。 - Tiktac

Answer 2

这是我用来代替 <div id="card-element"></div> 的HTML代码。

 <div class="input-group d-flex">
                  <label class="form-label w-50">Card number</label>
                  <div id="cc-number"></div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">MM/AA</label>
                      <div id="cc-expiry"></div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="input-group">
                      <label class="form-label">CVV</label>
                      <div id="cc-cvc"></div>
                    </div>
                  </div>
                </div>

通过这种方式，您可以自定义您的卡片设计，添加您的样式和类

var elements = stripe.elements();
var style = {
  base: {
    border: '1px solid #E8E8E8',
  },
};

var cardNumber = elements.create('cardNumber', {
  style: style,
  classes: {
    base: 'form-control w-full'
  }
});

var cardExpiry = elements.create('cardExpiry', {
  style: style,
  classes: {
    base: 'form-control'
  }
});

var cardCvc = elements.create('cardCvc', {
  style: style,
  classes: {
    base: 'form-control'
  }
});

cardNumber.mount('#cc-number');
cardExpiry.mount('#cc-expiry');
cardCvc.mount('#cc-cvc');

最后，使用这种方式创建card_token和payament_id

*请根据您的设计更改警报方法

stripe.createPaymentMethod({
        type: 'card',
        card: cardNumber,
        billing_details: {
          name: $('#fusername').val() + ' ' + $('#lusername').val(),
        },
      }).then(function (result) {
        if (result.error) {
          // Display error.message in your UI
          btn.removeClass("disabled").removeAttr('disabled').html('Crear cuenta');
          Swal.fire({
            type: 'error',
            title: `oops...`,
            text: result.error.message
          })
        } else {
          stripe.createToken(cardNumber).then(function (res) {
            if (res.error) {
              btn.removeClass("disabled").removeAttr('disabled').html('Crear cuenta');
              Swal.fire({
                type: 'error',
                title: `oops...`,
                text: result.error.message
              })
            } else {
              $('#payment_method_id').val(result.paymentMethod.id);
              $('#card_token').val(res.token.id);
              $('#signup-form').submit();
              // console.log(res.token.id);
              // console.log(result.paymentMethod.id);
            }
          });
        }
      });

你也可以在这里查看: https://jsfiddle.net/laravelsagmetic/jksacLfg/28/

- laravel sagmetic