Braintree is a great payment gateway for accepting Credit Card payments on your webstore.

Creating A Braintree Account

To get started with accepting payments via Braintree you first need to create an account.


Once you have created your Braintree account please follow these steps:

  1. Go to Settings > Processing in your Braintree Account.
  2. Note down the Merchant Account ID for later use in the setup process.
  3. Go to Account > API Keys in your Braintree account and click View under Private Key.
  4. Copy down the Public Key and Private Key for later use in the setup process.
  5. Go to Settings > Webhooks in your Braintree account.
  6. Click Create Webhook URL.
  7. Enter the URL https://www.buycraft.net/ipn/braintree/{webstore ID}. You need to replace the webstore ID with the ID of your webstore. You can find this on the Webstores page of your Tebex Control Panel.
  8. Select the options Dispute "Opened" and Dispute "Won" notification options.
  9. Click Create Webhook.

Your Braintree account is now setup and you can proceed with the next setup steps.

Setup Braintree on your Tebex Store

  1. Go to Payments > Payment Gateways.
  2. Click Create Payment Gateway.
  3. Click the Create Braintree Gateway button.
  4. On that page enter the following options:

Options

  1. Braintree Environment - Select production if you are wanting to accept live payments from your players.
  2. Braintree Merchant ID - Enter the merchant ID that you have previously noted down.
  3. Braintree Merchant Account ID -  Enter the merchant Account ID of your Braintree account. It is vital that the currency of your Braintree account matches the currency you have set in your Tebex Store settings.
  4. Braintree Public Key - Enter the public key that you have previously noted down.
  5. Braintree Private Key - Enter the private key that you have previously noted down.


Once you have entered the above information, click create, and then Braintree will be live on your webstore.

Important Information Regarding Templates

If you are using an old version of a custom template on your webstore you will need to make the following changes to ensure Braintree works as expected.

Flat Template

In the checkout.html file you will need to add the following code before the {% if checkout.requestAddress %} code.

{% if checkout.braintree %}
  <div class="braintree-details hidden">
                                   
    <div class="bt-drop-in-wrapper">
        <div id="bt-dropin"></div>
    </div>
       
    <input id="nonce" name="payment_method_nonce" type="hidden" />                            
    <script src="https://js.braintreegateway.com/web/dropin/1.2.0/js/dropin.min.js"></script>
    <script>
       var form = document.querySelector('.gateway')[0];
       var client_token = "{{ checkout.braintree.braintree_client_token }}";
       var braintreeinstance;
                                   
       braintree.dropin.create({
       authorization: client_token,
       selector: '#bt-dropin',
         paypal: {
           flow: 'vault'
         }
       }, function (createErr, instance) {
         braintreeinstance = instance;
       });
                           
    </script>
                                   
  </div>
{% endif %}

Classic Template

In the checkout.html file you need to replace the following:

<input type="submit" name="{{ gateway.id }}" value="1" style="background:url('{{ gateway.image }}');" title="Click to checkout with {{ gateway.name }}. ({{ gateway.description }})" />


With this code:

{% if gateway.gateway == 20 %}
<input type="button" name="{{ gateway.id }}" value="1" style="background:url('{{ gateway.image }}');" title="Click to checkout with {{ gateway.name }}. ({{ gateway.description }})" />
{% else %}
<input type="submit" name="{{ gateway.id }}" value="1" style="background:url('{{ gateway.image }}');" title="Click to checkout with {{ gateway.name }}. ({{ gateway.description }})" />
{% endif %}


You also need to add the following code before the closing </form> tag:

{% if checkout.braintree %}
<div>                        
<div>
<div id="bt-dropin"></div>
</div>
   
<input id="nonce" name="payment_method_nonce" type="hidden" />                            
<script src="https://js.braintreegateway.com/web/dropin/1.2.0/js/dropin.min.js"></script>
<script>
var form = document.querySelector('.gateway')[0];
       var client_token = "{{ checkout.braintree.braintree_client_token }}";
       var braintreeinstance;
                               
       braintree.dropin.create({
         authorization: client_token,
         selector: '#bt-dropin',
         paypal: {
           flow: 'vault'
         }
       }, function (createErr, instance) {
        braintreeinstance = instance;
       });
</script>
<input type="submit" name="submit" value="1" style="background:url('/assets/img/gateways/20.png');" />                            
</div>
{% endif %}
Did this answer your question?