I have form in modal, which include elements from Stripe. App is single app in Angular2. Problem is when user click on modal, type something without submitting form and close modal, on next opening modal is populated with previous data. It seems that I cannot change values of Stripe elements (for credit card number, cvv, postal code, exp date). I didn't manage to find any documented method for this from Stripe.js. I tried to change values of elements, Stripe blocks me. I tried to unmount and mount element again (in order to destroy and create it again), Stripe gives me multiple errors. Does anyone know how to reset Stripe elements in form so that form is clear on opening modal?

I have form in modal, which include elements from Stripe. App is single app in Angular2. Problem is when user click on modal, type something without submitting form and close modal, on next opening modal is populated with previous data. It seems that I cannot change values of Stripe elements (for credit card number, cvv, postal code, exp date). I didn't manage to find any documented method for this from Stripe.js. I tried to change values of elements, Stripe blocks me. I tried to unmount and mount element again (in order to destroy and create it again), Stripe gives me multiple errors. Does anyone know how to reset Stripe elements in form so that form is clear on opening modal?

• javascript
• angular
• typescript
• stripe.js

• 1 Four words: Learn how to ask – Alon Eitan Commented Mar 9, 2017 at 11:42

2 Answers 2

I think you should use element.clear()

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

Stripe Element Docs

simply unmount it(stripe element) first then mount.

Html part

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

Controller part

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