Braintree Integration

First you have to sign up. Registration is done on the testing environment and is for free. For production purposes, sign up on the production environment.

When you finish your registration, create an index.html file and copy&paste the complete code section below under the interactive example into it. The code of the interactive example can be found in the Apicart Payments Github repository.

How it works

In order to start using Apicart Payments we need to include the necessary dependencies

<!-- Braintree Dependencies -->
<script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

<!-- Apicart Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@apicart/core-sdk@1.0.0-alpha6/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apicart/payments-sdk@1.0.0-alpha6/dist/payments.js"></script>

Then we switch the Apicart environment to dev.

Apicart.setDevEnv();

Before sending the first payment, we need to initialize the Apicart Payments.

const payments = new Apicart.Payments({
  token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza'
});

Braintree also requires some target for the Dropin widget, so we need to add a small html structure into the page.

<div class="braintree-container-wrapper">
  <div class="braintree-container"></div>
  <p>
    <button class="braintree-submit-payment btn btn-primary btn-lg">Submit payment</button>
  </p>
</div>

Now we can initialize the Braintree Dropin widget and send the payment.

const initBraintree = async (e) => {
  const response = await payments.gatewayAction('braintree', 'clientToken');

  if (response.status === 'DONE') {
    braintree.dropin.create({
      authorization: response.data.clientToken,
      container: '.braintree-container',
      paypal: {
        flow: 'vault'
      }
    }, function (createErr, instance) {
      document.querySelector('.braintree-submit-payment').addEventListener('click', () => {
        instance.requestPaymentMethod((requestPaymentMethodErr, payload) => {
          if (requestPaymentMethodErr) {
            alert('Payment failed. Error "' + requestPaymentMethodErr + '"');
            return;
          }

          sendPayment(payload.nonce);
        });
      });
    });

  } else {
    alert('Error during the payment: ' + response.description);
  }
};

const sendPayment = async (paymentNonce) => {
  const variableSymbol = '123';

  const response = await payments.pay('braintree', 'nonce', variableSymbol, {
    amount: 10 * 100, // Every price must be mulitplied by 100
    nonce: paymentNonce,
    customer: {
      email: 'test@example.com',
      firstName: 'John',
      lastName: 'Doe'
    }
  });

  if (response.status === 'DONE') {
    alert('Your order was successfully paid.');
    window.location.href = window.location.href;

  } else {
    alert('Error during the payment: ' + response.description);
  }
};

initBraintree();

 

Complete code

Below is the complete code from which we have created the snippets shown above.

<!-- Braintree Dependencies -->
<script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

<!-- Apicart Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@apicart/core-sdk@1.0.0-alpha6/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apicart/payments-sdk@1.0.0-alpha6/dist/payments.js"></script>

<script>
  Apicart.setDevEnv();
  const payments = new Apicart.Payments({
    token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza'
  });

  const initBraintree = async (e) => {
    const response = await payments.gatewayAction('braintree', 'clientToken');

    if (response.status === 'DONE') {
      braintree.dropin.create({
        authorization: response.data.clientToken,
        container: '.braintree-container',
        paypal: {
          flow: 'vault'
        }
      }, function (createErr, instance) {
        document.querySelector('.braintree-submit-payment').addEventListener('click', () => {
          instance.requestPaymentMethod((requestPaymentMethodErr, payload) => {
            if (requestPaymentMethodErr) {
              alert('Payment failed. Error "' + requestPaymentMethodErr + '"');
              return;
            }

            sendPayment(payload.nonce);
          });
        });
      });

    } else {
      alert('Error during the payment: ' + response.description);
    }
  };

  const sendPayment = async (paymentNonce) => {
    const variableSymbol = '123';

    const response = await payments.pay('braintree', 'nonce', variableSymbol, {
      amount: 10 * 100, // Every price must be mulitplied by 100,
      nonce: paymentNonce,
      customer: {
        email: 'test@example.com',
        firstName: 'John',
        lastName: 'Doe'
      }
    });

    if (response.status === 'DONE') {
      alert('Your order was successfully paid.');
      window.location.href = window.location.href;

    } else {
      alert('Error during the payment: ' + response.description);
    }
  };

  initBraintree();
</script>

Configuring Braintree payment gateway

If you copy the complete code above into the index.html and open it in the browser (you should be at least on http://localhost, otherwise the payment can be blocked), you should see the payment form.

Any payment you send using that form will use the Apicart Sandbox tokens. In order to use your own tokens and see your own statistics in Braintree administration, you have to configure the payment gateway in your administration.

So lets configure it.

Create E-commerce in 5 minutes

Try it. It is for free.