Update Card Info

Use the following steps to create a Checkout page that collects your customer’s payment details and returns a Payment Method (if SCA (opens new window) is enabled) or a token (if SCA (opens new window) is disabled). Then we'll use the Stripe REST APIs to update the payment method used for future invoices.

TIP

We recommend to use the Stripe Customer Portal feature (opens new window)

If SCA is enabled

If SCA is enabled in your Stripe Payment settings, create a template in the front-end with the following code to allow users to update their card info via the new Stripe Checkout.

{% if currentUser %}

    {% do view.registerJsFile('https://js.stripe.com/v3/') %}
    <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>

    {% set stripeCustomer = craft.enupalStripe.getStripeCustomer(currentUser.email) %}  
    {% set pbk = craft.enupalStripe.getPublishableKey() %}
    {% set session = craft.enupalStripe.getSetupSession(currentUser.email, 'success-url/', 'cancel-url/') %}  
    
    {% set currentCard = 'No card' %}
    {# Check first for default payment method #}
    {% set paymentMethodId = stripeCustomer.invoice_settings.default_payment_method ?? null  %}

    {% if paymentMethodId %}
        
        {% set paymentMethod = craft.enupalStripe.getPaymentMethod(paymentMethodId) %}

        {% if paymentMethod.card is defined %}
            {% set currentCard = paymentMethod.card.brand ~ " ending in " ~ paymentMethod.card.last4 %}
        {% endif %}

    {% else %}

        {% set currentCard = stripeCustomer.default_source.brand ~ " ending in " ~ stripeCustomer.default_source.last4 %}

    {% endif %}

    <h1>Current Card:<h2> <code> {{currentCard}}</code>
     
    <form action="enupal-stripe/update-billing-info" method="POST" id="update-card">
        {{ csrfInput() }}
        <button>{{ 'Update Card Details'|t }}</button>
    </form>

    <script>
        $( document ).ready(function() {
            var stripe = Stripe('{{pbk}}');

            $('#update-card').on('click', function(e) {
                e.preventDefault();
                stripe.redirectToCheckout({
                    sessionId: '{{session.id}}'
                });
            });
         });
    </script>
{% endif %}

If SCA is disabled

If SCA is disabled in your Stripe Payment settings, create a template in the front-end with the following code to allow users to update their card info via the legacy Stripe Checkout modal window.

The redirect URL will have available the following variable: stripeCustomer

{% if currentUser %}
     {% set stripeCustomer = craft.enupalStripe.getStripeCustomer(currentUser.email) %}  
     
   
     {% set currentCard = stripeCustomer.default_source.brand ~ " ending in " ~ stripeCustomer.default_source.last4 %}

     <h1>Current Card:<h2> <code> {{currentCard}}</code>
     
    <form action="enupal-stripe/update-billing-info" method="POST">
    <input type="hidden" aria-hidden="true" name="redirect"
        value="{{ 'card-updated/'|hash }}">
    {{ csrfInput() }}
        <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="{{ craft.enupalStripe.getPublishableKey() }}"
        data-image="/path/to/your/logo.png"
        data-name="Your Website Name"
        data-panel-label="Update Card Details"
        data-label="Update Card Details"
        data-allow-remember-me=false
        data-locale="auto"
        data-email="{{ currentUser.email }}">
        </script>
    </form>
{% endif %}