我應該如何將`cardNumberElement`、`cardExpiryElement`和`cardCvcElement`傳遞到`stripe.confirmCardPayment`的`payment_method.card`？

Question

在條紋文檔中，我可以輕松創建這樣的卡片

var cardElement = elements.create("card");

我只需將cardElement傳遞給confirmCardPayment

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardElement,
  },
});

但是，出於視覺風格 css 的原因，我必須將cardElement分成三部分，如下所示：

var cardNumberElement = elements.create("cardNumber");
var cardExpiryElement = elements.create("cardExpiry");
var cardCvcElement = elements.create("cardCvc");

然后我想打電話給stripe.confirmCardPayment ，我現在該怎么辦？

該文檔僅顯示cardElement方法，沒有拆分示例。

Answer 1

您可以傳入 CardNumber 元素。只要它們都是從元素 object 的同一實例創建的，confirmCardPayment function 將從所有已安裝的元素中提取相關信息以獲取到期/CVC，它也將正常工作.

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
  },
});

https://stripe.com/docs/js/setup_intents/confirm_card_setup#stripe_confirm_card_setup-with_element-payment_method-card

Answer 2

karllekko 的回答有效。

如果您使用 CardNumberElement、CardExpiryElement、CardCvcElement、'@stripe/react-stripe-js' 中的組件

你可以簡單地做：

payment_method: {
        card: elements.getElement(CardNumberElement), 
        .
        .
}

它會自動獲取其他組件的值。

Answer 3

持卡人姓名和ZIP/郵政編碼可以通過以下方式提交（使用常規輸入元素）：

stripe.confirmCardPayment("{PAYMENT_INTENT_CLIENT_SECRET}", {
  payment_method: {
    card: cardNumberElement,
    billing_details: {
       name: document.getElementById("inputCardholderName").value,
       address: {
          postal_code: document.getElementById("inputZip").value
       }
    }
  }
});