Integrace Braintree

Nejdříve se musíte zaregistrovat. Registrace je provedena na testovacím prostředí, které je zdarma. Pro produkční účely se musíte zaregistrovat na produkčním prostředí.

Jakmile dokončíte registraci, vytvořte soubor index.html a zkopírujte do něj kompletní kód ukázky v sekci níže.
Celý soubor interaktivní ukázky naleznete v repozitáři  Apicart Payments na Githubu.

Jak to funguje

Abychom mohli začít používat Apicart Payments a Braintree platební bránu, je potřeba načíst závislosti.

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

Následně se přepneme na vývojové prostředí.

Apicart.setDevEnv();

Před odesláním platby je potřeba inicializovat Apicart Payments.

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

Pro inicializaci braintree je potřeba přidat základní HTML strukturu.

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

Nyní můžeme inicializovat Braintree widget a odeslat platbu.

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,
    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();

 

Kompletní kód

Níže je kompletní kód skládající se z kousků kódu výše.

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

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

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

Konfigurace platební brány Braintree

Pokud si zkopírujete kompletní kód výše do souboru index.html mezi tagy <body></body> a otevřete ho v prohlížeči (musíte být alespo na http://localhost, jinak PayU vaše requesty zablokuje) měli byste vidět platební formulář.

Veškeré odeslané platby z tohoto formuláře používají Apicart Sandbox tokeny. Abyste mohli používat svoje tokeny a vidět své statistiky v administraci Braintree, je potřeba si nastavit platební metody u nás v adminu.

Takže si pojďme přidat platební metodu Braintree.

Vytvořte si e-shop do 5 minut

Zkuste to. Je to zdarma.