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

Question

我的objective是将我的组件变量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
});

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

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

Answer 1

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

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

How to add an input listener on Stripe Elements (Angular)

numbers

element

listener

angular