如何在 Stripe Elements (Angular) 上添加输入侦听器答案

【问题标题】：How to add an input listener on Stripe Elements (Angular)如何在 Stripe Elements (Angular) 上添加输入侦听器
【发布时间】：2020-07-15 15:25:34
【问题描述】：

我的目标是将我的组件变量numberOfCreditCard 与输入卡号绑定。模板：

<div class="example example2" id="example-2">
    <form>
        <div class="row">
            <div class="field">
                <div id="example2-card-number" class="input empty" #cardNumber></div>
                <label for="example2-card-number" data- 
                  tid="elements_examples.form.card_number_label">Card number</label>
                <div class="baseline"></div>
            </div>
        </div>
        .
        .
        .
    </form>
</div>

我不能只使用 ngModel，因为它不适用于 div 元素，所以我使用了我的条带元素：

const stripe = Stripe(environment.stripeAPIpublicKey);
const elements = stripe.elements();

let cardNumber2 = elements.create('cardNumber', {
    style: elementStyles,
    classes: elementClasses
});

根据官方文档https://stripe.com/docs/js/element/events/on_change?type=cardElement，我就是这样做的：

cardNumber2.on('changes', function(event) {
   console.log("new value in card number");
   // this.numberOfCreditCard = the value returned
});

问题是每次按下新键时控制台中都不会显示“卡号中的新值”，而这正是我想要的，以便获取事件并将其提供给我的变量。

我的目标是获取卡号的输入值，以便在漂亮的信用卡上显示数字，如下所示：https://codepen.io/mycnlz/pen/reLOZV

【问题讨论】：

标签： angular numbers listener element

【解决方案1】：

条带元素在 iFrame 中被隔离以符合 PCI 标准。您尝试采取的行动（与您描述的预期目的一样无辜）被特别阻止，因此您无法从您的用户那里“获取”信用卡号。

【讨论】：