Question

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

Answer 1

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

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

Stripe Element Docs

Answer 2

首先卸载它（条纹元素）然后安装。

Html部分

＆＃13;

<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>

＆＃13;

控制器部分

＆＃13;

$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();

＆＃13;

如何清除Angular2中Stripe元素的元素

2 个答案:

Html部分

控制器部分