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.
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'
});
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Laravel is a free open source PHP framework that came out in 2011. Since then, it has been able to become the framework of choice for web developers. One of the main reasons for this is that Laravel makes it easier, faster, and safer to develop complex web applications than any other framework.
https://laravel.com/
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.