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>
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.
Answer
Solution:
You can use localization: https://stripe.com/docs/js/appendix/supported_locales
Create your Stripe instance with locale:
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
locale: 'fr'
});