Customizing Braintree Drop-in UI in web site

I am testing a Braintree payment integration in a website. Everything is working fine using following php files. My only issue is that I need the Drop-in UI in spanish, and I don't know where to change it. Now it is using english as default language.

This is the main.php part:

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

This is token.php:

<?php
require "boot.php";

echo json_encode(Braintree_ClientToken::generate());

This is 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.

and this is 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>

Solution

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact
support.}

The JavaScript v2 SDK Drop-in UI does not support translations. I recommend integrating using the JavaScript v3 SDK when integrating the Drop-in. You can then use locale to set the language preference to Spanish. As an example, your Drop-in script tag may look something like this:

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

You can find an explanation of how to do so in our developer docs and a full list of available translations in our Github repo.

One thing to note when upgrading your JavaScript SDK is that you'll need to include a different script on your page. Rather than:

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

You would include this if you wanted to upgrade to the JavaScript v3 SDK:

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