javascript - How to change response(error/success) language in stripe.js

I'm using stripe.js v2 to process payments for the application I'm developing for a French client , everything is working as it should so far, however, when it comes to form validation, I want to display the errors in French instead of english, I have read about it in the docs and all I could find is the locale param which didn't work for my case, here's a code snippet of the form I'm using;

<form enctype="multipart/form-data"
                      role="form"
                      action="{{route('payment')}}"
                      method="post"
                      class="require-validation"
                      data-cc-on-file="false"
                      data-stripe-publishable-key="{{ env('STRIPE_PUBLIC') }}"
                      data-locale="fr"
                      id="payment-form">
                    @csrf
                    <input type="hidden" name="total" value="{{$total}}">
                <div class="modal-body">
                    <!-- Credit card form tabs -->
                    <ul role="tablist" class="nav nav-pills rounded-pill nav-fill mb-3">
                        <li class="nav-item">
                            <a data-toggle="pill" href="#nav-tab-card" class="nav-link active rounded-pill">
                                <i class="fa fa-credit-card"></i>
                                Carte Crédit/Débit
                            </a>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="pill" href="#nav-tab-paypal" class="nav-link rounded-pill">
                                <i class="fa fa-paypal"></i>
                                Paypal
                            </a>
                        </li>
                        <li class="nav-item">
                            <a data-toggle="pill" href="#nav-tab-bank" class="nav-link rounded-pill">
                                <i class="fa fa-university"></i>
                                Banque
                            </a>
                        </li>
                    </ul>
                    <!-- End -->

                    <!-- Credit card form content -->
                    <div class="tab-content">

                        <!-- credit card info-->
                        <div id="nav-tab-card" class="tab-pane fade show active">

                            <div class='col-md-12 error form-group hide'>
                                <div class='alert-danger alert'>
                                    Corrigez les érreurs et réessayez! 
                                    // it is showing when getting errors, but it gets replaced after a 
                                    // second by stripe's error message
                                </div>
                            </div>

                            <div class="form-group required">
                                <label for="email" class="control-label"><span>Email</span></label>
                                <input type="email" name="email" placeholder="Votre Email" class="form-control" required autocomplete="off">
                            </div>

                            <div class="form-group required">
                                <label for="username" class="control-label"><span>Nom Complet</span></label>
                                <input type="text" name="username" placeholder="Votre Nom & Prénom" class="form-control" autocomplete="off">
                            </div>

                            <div class="form-group required">
                                <label for="cardnumber" class="control-label"><span>Numéro De Carte</span></label>
                                <div class="input-group">
                                    <input type="text" name="cardnumber" placeholder="Votre Numéro De Carte" class="form-control card-number" maxlength="20" autocomplete="off">
                                    <div class="input-group-append">
                                            <span class="input-group-text text-muted">
                                                <i class="fa fa-cc-visa mx-1"></i>
                                                <i class="fa fa-cc-amex mx-1"></i>
                                                <i class="fa fa-cc-mastercard mx-1"></i>
                                            </span>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group expiration required">
                                        <label class="control-label"><span class="hidden-xs">Date D'éxpiration</span></label>
                                        <div class="input-group">
                                            <input type="text" placeholder="Mois" name="month" class="form-control card-expiry-month required" maxlength="2" autocomplete="off">
                                            <input type="text" placeholder="Année" name="day" class="form-control card-expiry-year required" maxlength="2" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group cvc mb-4 required">
                                        <label class="control-label"><span>CVC</span></label>
                                        <input type="text" class="form-control card-cvc required" placeholder="Ex: 324" maxlength="4" name="cvc" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- End -->

                        <!-- Paypal info -->
                        <div id="nav-tab-paypal" class="tab-pane fade">
                            <p>Paypal is easiest way to pay online</p>
                            <p>
                                <button type="button" class="btn btn-primary rounded-pill"><i class="fa fa-paypal mr-2"></i> Log into my Paypal</button>
                            </p>
                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                        <!-- End -->

                        <!-- bank transfer info -->
                        <div id="nav-tab-bank" class="tab-pane fade">
                            <h6>Bank account details</h6>
                            <dl>
                                <dt>Bank</dt>
                                <dd> THE WORLD BANK</dd>
                            </dl>
                            <dl>
                                <dt>Account number</dt>
                                <dd>7775877975</dd>
                            </dl>
                            <dl>
                                <dt>IBAN</dt>
                                <dd>CZ7775877975656</dd>
                            </dl>
                            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                        <!-- End -->
                    </div>
                    <!-- End -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Payer</button>
                </div>
                </form>
Copy code

Here's the stripe js code that I'm using:

Stripe js code Stripe js code II

Now, what I'm trying to do here is change the validation response language, so, for example, if a user happens to miss a field, or fill it with invalid info, I'd like the response to be "Numéro de carte invalide" instead of "Invalid Card number", and the same for the rest of the fields' validation.

How do you think I can achieve it? using javascript or any other method.

I'm using PHP//Laravel for backend if you need to know.

Thank you.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.