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