如何在 stripe.js 中更改响应（错误/成功）语言

Question

我正在使用 stripe.js v2 为我正在为法国客户开发的应用程序处理付款，到目前为止一切正常，但是，当涉及到表单验证时，我想用法语显示错误英语，我在文档中读过它，我能找到的只是对我的情况不起作用的语言环境参数，这是我正在使用的表单的代码片段；

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

---

这是我正在使用的条纹 js 代码：

条纹 js 代码条纹 js 代码 II

---

现在，我在这里要做的是更改验证响应语言，因此，例如，如果用户碰巧错过了一个字段，或者用无效信息填充它，我希望响应是“Numéro de carte invalide”而不是“Invalid Card number”，对于字段验证的 rest 也是如此。

你觉得我怎么能做到？ 使用 javascript 或任何其他方法。

如果您需要知道，我正在使用 PHP//Laravel 作为后端。

谢谢你。

Answer 1

您可以使用本地化： https://stripe.com/docs/js/appendix/supported_locales

使用语言环境创建您的 Stripe 实例：

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', {
  locale: 'fr'
});