在网站中自定义 Braintree Drop-in UI

Customizing Braintree Drop-in UI in web site

我正在测试网站中的 Braintree 支付集成。 使用以下 php 文件一切正常。 我唯一的问题是我需要西班牙语的 Drop-in UI,但我不知道在哪里更改它。现在它使用英语作为默认语言。

这是 main.php 部分:

<!-- braintree -->
    <script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
     <script>
        $.ajax({

            url: "token.php",
            type: "get",
            dataType: "json",
            success: function (data) {
                    braintree.setup(data,'dropin', { container: 'dropin-container'});
            }
        })
    </script>






<div class="container">



    <div class="jumbotron">
        <div class="row">
            <div class="col-md-12">


   <div class="container">
        <header class="header">
             <img  src="images/logohorizontal.png" alt="Cribbeo" width="200px">
            <h2>Aceptar y pagar puja de la subasta <?php echo $decrypted_referencia?></h2>
             <h2>Precio de la puja: <?php echo $decrypted_precio." €"?></h2>
        </header>
        <form action="payment.php" method="post" class="payment-form">
        <label for="firstName" class="heading">First Name</label><br>
        <input type="text" name="firstName" id="firstName"><br><br>

        <label for="lastName" class="heading">Last Name</label><br>
        <input type="text" name="lastName" id="lastName"><br><br>

        <label for="amount" class="heading">Amount (USD)</label><br>
        <input type="text" name="amount" id="amount"><br><br>

        <div id="dropin-container"></div>
        <br><br>
        <button type="submit">Pagar</button>

    </form>
    </div>

这是token.php:

<?php
require "boot.php";

echo json_encode(Braintree_ClientToken::generate());

这是boot.php:

<?php

//autoloading the packages in the vendor folder.
require "vendor/autoload.php";

//setting up braintree credentials
Braintree_Configuration::environment('sandbox');
Braintree_Configuration::merchantId('ggmqwvyb..');
Braintree_Configuration::publicKey('h46d4whb5..');
Braintree_Configuration::privateKey('af6387add..');

//Booting Done.

这是payment.php:

<?php


require "boot.php";

if (empty($_POST['payment_method_nonce'])) {
    header('location: index.php');
}

$result = Braintree_Transaction::sale([
  'amount' => $_POST['amount'], 
  'paymentMethodNonce' => $_POST['payment_method_nonce'],
  'customer' => [
    'firstName' => $_POST['firstName'],
    'lastName' => $_POST['lastName'],    
  ], 
  'options' => [
    'submitForSettlement' => true
  ]
]);

if ($result->success === true) {

} else
{
    print_r($result->errors);
    die();
}

//Now, i think all done. Let's test it out.
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Payment Report</title>

</head>
<body style="text-align: center; margin-top: 100px;">
    <form class="payment-form">
        <label for="ID" class="heading">Transaction ID</label><br>
        <input type="text" disabled="disabled" name="ID" id="ID" value="<?php echo $result->transaction->id ;?>"><br><br>

        <label for="firstName" class="heading">First Name</label><br>
        <input type="text" disabled="disabled" name="firstName" id="firstName" value="<?php echo $result->transaction->customer['firstName'] ;?>"><br><br>

        <label for="lastName" class="heading">Last Name</label><br>
        <input type="text" disabled="disabled" name="lastName" id="lastName" value="<?php echo $result->transaction->customer['lastName'] ;?>"><br><br>

        <label for="amount" class="heading">Amount (USD)</label><br>
        <input type="text" disabled="disabled" name="amount" id="amount" value="<?php echo $result->transaction->amount ." " . $result->transaction->currencyIsoCode ;?>"><br><br>

        <label for="status" class="heading">Status</label><br>
        <input type="text" disabled="disabled" name="status" id="status" value="Successful"><br><br>


        <br><br>


    </form>

</body>
</html>

完全披露:我在 Braintree 工作。如果您有任何其他问题,请随时联系 support.

JavaScript v2 SDK Drop-in UI 不支持翻译。我建议在集成 Drop-in 时使用 JavaScript v3 SDK 进行集成。然后您可以使用 locale 将语言首选项设置为西班牙语。例如,您的 Drop-in 脚本标签可能如下所示:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  locale: 'es_ES'
}, callback);

您可以在 our developer docs and a full list of available translations in our Github repo 中找到有关如何执行此操作的说明。

升级 JavaScript SDK 时需要注意的一件事是您需要在页面上包含不同的脚本。而不是:

<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>

如果你想升级到 JavaScript v3 SDK,你会包括这个:

<script src="https://js.braintreegateway.com/web/dropin/1.11.0/js/dropin.min.js"></script>