如何在條帶中的付款意圖示例中自定義付款方式

Question

我正在嘗試按照以下鏈接https://stripe.com/docs/payments/accept-a-payment 中顯示的示例進行操作。

我在客戶端有以下代碼

 var cardNumber = elements.create('cardNumber', {
    placeholder:'',
    style: style
});
var cardexpiry = elements.create('cardExpiry',{
    placeholder:'',
    style:style
});
var cardCVV = elements.create('cardCvc',{
    placeholder:'',
    style:style
});


// Add an instance of the card Element into the `card-element` <div>.
cardNumber.mount('#card-element');
cardexpiry.mount("#card-expiry")
cardCVV.mount("#card-cvv")

而不是這個

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

因為我想要一些 UI 操作。 根據鏈接中發布的代碼，我應該執行以下操作

var submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function(ev) {
 stripe.confirmCardPayment(clientSecret, {
   payment_method: {card: card}
 }).then(function(result) {
 if (result.error) {
  // Show error to your customer (e.g., insufficient funds)
  console.log(result.error.message);
 } else {
  // The payment has been processed!
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
    }
 }
});
});

但是，在上面的 payment_method 示例中，傳遞了卡對象，而在我的代碼中並非如此。 如何在 stripe.confirmCardPayment(clientSecret, { payment_method: {card: card} 中分別傳遞我的卡號和 exp/date 以及 CVC

Answer 1

有一個關於如何在不使用card element 時調用stripe.createToken()的類似問題。

根據createToken 的 Stripe 文檔：

您希望從中標記數據的 cardNumber 元素。 如果適用，Element 會從您在同一 Elements 實例上創建的其他元素中提取數據以進行標記化——您只需提供一個 Element 作為參數。

現在，特別是對於這種情況， confirmCardPayment 部分說：

通過在 data 參數中將 card 或cardNumber元素作為 payment_method[card] 傳遞，將 stripe.confirmCardPayment 與來自元素的支付數據一起使用。

基本上，您只需將cardNumber元素傳遞給payment_method["card"] ，它就會從您創建的其他元素中提取數據。

...
stripe.confirmCardPayment(clientSecret, {
  payment_method: {card: cardNumber}
})
...

Answer 2

我最終使用了這段代碼

var stripe = Stripe('#YOUR KEY');
var elements = stripe.elements();

/// STYLE HERE
var style = {
    base: {
        fontSize: '16px',
        color: "#32325d",
        '::placeholder': {
            color: '#CFD7E0',
            fontSize: '12px'
        }
    }
};

// Create an instance of the card Element.
var card = elements.create('card', {
    hidePostalCode: true,
    placeholder: '',
    style: style,



});
card.mount('#card-element');

card.addEventListener('change', function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = '';
    } else {
        displayError.textContent = '';
    }
});