web-dev-qa-db-ja.com

Stripeでクレジットカードフォームをカスタマイズする方法

Stripeを使用して支払いゲートウェイを構成していますが、javascriptコードにスタイルを追加できることがわかる基本的な構造がありますが、次のコードのHTMLformコンテンツを構成するものではありません。

$(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 /

その結果は次のとおりです。

introducir la descripción de la imagen aquí

フォームのデザインを次のようにカスタマイズするにはどうすればよいですか？

introducir la descripción de la imagen aquí

参考文献ですが、よく理解できません を示すドキュメントがあります。

注：

ストライプのバージョン3以降、この新しいバージョンは、javascriptプラグインを使用してカードフォームのコンテンツを生成します

以前のバージョン2では、フォームのHTML構造がありました。

stripe-payments
17
user8880927

要素では別のフィールドを使用できます。例： http://jsfiddle.net/ywain/whj357u9/

カード所有者の名前も収集する場合は、通常の_<input>_フィールドを使用し、createToken()を呼び出すときに2番目のパラメーターにその内容を指定する必要があります： http：/ /jsfiddle.net/ywain/eckhnz19/

編集：別のカードフィールドにカードブランドアイコンを表示する場合は、その機能を自分で再実装する必要があります。 changeイベントを使用すると、比較的簡単に行うことができます。次に例を示します。 http://jsfiddle.net/ywain/L96q8uj5/

32
Ywain