javascript - 如何从Angular2中的Stripe元素中清除元素

Question

我有模态表单，其中包括来自 Stripe 的元素。应用程序是 Angular2 中的单个应用程序。问题是当用户单击模态时，键入内容而不提交表单并关闭模态，在下一个打开模态中填充以前的数据。似乎我无法更改 Stripe 元素的值（信用卡号、cvv、邮政编码、到期日期）。我没有设法从 Stripe.js 找到任何记录在案的方法。我试图改变元素的值，Stripe 阻止了我。我尝试再次卸载和安装元素（为了再次销毁和创建它），Stripe 给了我多个错误。有谁知道如何在表单中重置 Stripe 元素，以便在打开模式时表单清晰？

Answer 1

我认为你应该使用element.clear()

$stripe_card = elements.create('card', {style: style});
$stripe_card.mount(..);
...
$stripe_card.clear();

条纹元素文档

Answer 2

只需先卸载它（条带元素），然后再安装。

html部分

<form class="stripe_payment_form_div" ng-submit="saveCard()">
    <div class="stripe_card_element_div">
        <label for="stripe-card-element"></label>
        <div id="stripe-card-element" class="field"></div>
    </div>
    <div class="stripe_payment_completion_div_wrapper">
        <div class="stripe_payment_completion_div">
            <span class="stripe_card_save_btn_div">
                <button class="md-btn md-btn-primary" type="submit">Save Card</button>
            </span>
            <span class="stripe_card_cancel_btn_div">
                <a class="uk-text uk-text-center uk-text-middle" id="cancel_payment_method_btn">Cancel</a>
            </span>
        </div>                                    
    </div>
</form>

控制器部分

$scope.stripe = Stripe('#your stripe key');
$scope.stripeCard = null;
var stripeCardElementMoutingId = "#stripe-card-element";

function buildStripeCardElement() {
    if (null == $scope.stripe) {
        $scope.stripe = Stripe('#your stripe key');
    }

    var stripeElements = $scope.stripe.elements();
    var stripeCard = stripeElements.create('card', {
        style: {
            base: {
                iconColor: '#9cabbc',
                color: '#31325F',
                lineHeight: '40px',
                fontWeight: 300,
                fontFamily: 'Helvetica Neue',
                fontSize: '13px',
                fontSmoothing: 'antialiased',
                '::placeholder': {
                    color: '#9cabbc',
                },
            },
        }, hidePostalCode: true,
        iconStyle: 'solid'
    });

    return stripeCard;
}

var loadStripeElement = function () {
    //----- Load Stripe Card Element Div -----//
    $scope.stripeCard = buildStripeCardElement();
    $scope.stripeCard.mount(stripeCardElementMoutingId);

    $scope.stripeCard.on('change', function (event) {
        //----- Handle error messages in case of invalid input -----//
        stripeCreateTokenResponseHandler(event);
    });
};

$("#cancel_payment_method_btn").click(function () {
    //----- Below statements can be merge into a single function -----//
    $scope.stripeCard.unmount();
    $scope.stripeCard = buildStripeCardElement();
    $scope.stripeCard.mount(stripeCardElementMoutingId);
    
    $scope.stripeCard.on('change', function (event) {
        stripeCreateTokenResponseHandler(event);
    });
});

//------------- Load stripe element ------------------//
loadStripeElement();