web-dev-qa-db-ja.com

Elementsを使用してストライプチェックアウトにカード名義人の名前を追加する方法

カスタムフォームにフィールドを追加する必要があります。クレジットカードの名前を追加します。

私は次の方法で試しました：

var cardNameElement = elements.create('cardName', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNameElement.mount('#card-name-element');

<div id="card-name-element" class="field"></div>

ただし、これは機能しません。 documentation では、cardNumber、cardExpiry、cardCvc、postalCodeの4つの要素またはデータのみを検証する手順を実行できます。

クレジットカードの名前を追加して、stripe.js

私のコード：

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var style = {
  base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',

    '::placeholder': {
      color: '#CFD7E0',
    },
  },
};

var cardNumberElement = elements.create('cardNumber', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style
});
cardExpiryElement.mount('#card-expiry-element');

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

/*var postalCodeElement = elements.create('postalCode', {
  style: style
});
postalCodeElement.mount('#postal-code-element');*/


function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    //var form = document.querySelector('form');
    //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    //form.submit();
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(cardNumberElement).then(setOutcome);
});
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>

                <form action="" method="POST">
                        <input type="hidden" name="token" />
                        <div class="group">
                                <div class="card-container1">
                                        <label>
                                                <span class="title-card">Card number</span>
                                            <div id="card-number-element" class="field"></div>
                                            <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
                                    </label>
                            </div>
                                <div class="card-details">
                                        <div class="expiration">
                                                <label>
                                                        <span class="title-card">Expiry date</span>
                                                        <div id="card-expiry-element" class="field"></div>
                                                </label>
                                        </div>
                                        <div class="cvv">
                                                <label>
                                                        <span class="title-card">CVC</span>
                                                        <div id="card-cvc-element" class="field"></div>
                                                </label>
                                        </div>
                                </div>
                        </div>
                        <button type="submit">Pay $25</button>
                        <div class="outcome">
                                <div class="error"></div>
                                <div class="success">Success! Your Stripe token is <span class="token"></span></div>
                        </div>
                </form>

やりたいこと：

introducir la descripción de la imagen aquí

stripe-paymentsstripe.js
18
user8880927

Elementsは現在、カード所有者の名前の収集をサポートしていません。収集に焦点を当てています：

  • カード番号
  • 有効期限
  • CVC
  • 郵便番号（一部の国）

カード所有者の名前を収集する場合は、名前用に独自のフィールドを作成し、トークン作成中にAPIに送信する必要があります。

var card_name = document.getElementById('card_name').value;
stripe.createToken(card, {name: card_name}).then(setOutcome);

ここでjsfiddleのライブ例を見ることができます： https://jsfiddle.net/7w2vnyb5/

25
koopajah

私はしばらくこれについて馬鹿のように苦労したように。 2019年2月の時点で、tokenDataオブジェクトにカードの詳細に関する情報を追加できます。例えば：

let custData = {
                          name: 'Firstname Lastname',
                          address_line1: '21 Great Street',
                          address_line2: 'Shilloong',
                          address_city: 'Chicago',
                          address_state: 'Illinois',
                          address_Zip: '12345',
                          address_country: 'US'
              };

              stripe.createToken(card, custData).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);
                }
              });
            });
7
Tragaknight