How to set up Braintree

Braintree is a gateway which can accept card and PayPal at the same time. To set up this gateway you will need to create an account from their website

Important: You will need to make sure that you have updated your custom templates to support this gateway!

Braintree settings:

After creating your account you will need to gather your  Merchant ID, Merchant Account ID, Public Key and Private  Key  so that you can enter them in your Buycraft gateway settings.

The Merchant account ID can be found under "Settings > Processing" at the bottom of the page:

The Public Key, Private Key and Merchant ID can be found by going to "Account > API Keys" in Braintree and then clicking "View" under "Private key":

Next, you can  copy all of these from the same page  into your Buycraft gateway settings:

Once this has been added you will need to go to "Settings > Webhooks" in your Braintree account and create a webhook URL of "https://www.buycraft.net/ipn/braintree/<Account ID>" (this will be displayed in your Buycraft gateway settings). You will need to select the Dispute "Opened" and "Won" notification options.

Buycraft gateway settings:

Once you have copied down all of the information above you will need to add the Braintree gateway in Buycraft from the "Settings > Payment gateways" page. after choosing the Braintree gateway you will need to enter the copied details: 

Make sure that your Merchant Account ID supports the same currency as your webstore's default currency which can set in "Settings > Webstore" in your Buycraft control panel.


Custom template changes

The following are the changes which you will need to make to your custom templates before you can support the Braintree gateway.

Flat:  

For the Flat template, you will need to add the following in the "checkout.html" page before "{% if checkout.requestAddress %}".

{% 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:

The classic template is a little more difficult to support, you will need to go to the "checkout.html" page in your template and 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:

{% 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 %}

Then add the following before the "</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 %}

Still need help? Contact Us Contact Us