Braintree Local Payment Methods

This page provides an overview of the payments methods provided by the Braintree Local Payment Methods adapter in the IXOPAY platform. It also includes a full list of all configuration options available to you when integrating Braintree Local Payment Methods within your payments landscape, as well as an overview of the parameters required when submitting a transaction via IXOPAY's API.

Payment Methods

Payment Method	Transaction Flows	Transaction Types
Blik	payment.js	Debit, Refund
Blik Non-Redirect	payment.js	Debit, Refund

Integration guide

Braintree requires you to display the PayPal Button on your Checkout page. This is handled by the payment.js integration.

​1. Embed the payment.min.js in your page

<script data-main="payment-js" src="https://gateway.ixopay.com/js/integrated/payment.1.3.min.js"></script>

note

It is important to set the data-main="payment-js" attribute on the script tag.

​2. Provide a DIV element on your page for the Local Payment Method button

<div id='localPaymentButtonDiv'></div>

​3. Initialize the payment.js with the following parameters:

• ID of the DIV element
• Javascript function to create a debit transaction and provide paymentId as transactionToken
• Javascript function to handle payment completion
• Javascript function to handle error events
• Javascript function to handle cancellation events
• Local Payment Method options (see examples below)

Example 1: Blik

<script>
  var payment = new PaymentJs('1.3');

  errorHandler = function (error) {
    // handle error events here
  }

  cancellationHandler = function (data) {
    // handle cancellation event here - called if user cancelled payment process
  }

  completeHandler = function (data) {
    // handle completed transaction
  }

  paymentIdHandler = function (paymentId) {
    // create a debit transaction including the paymentId in the request under the transactionToken parameter
  }

  let blikButtonDiv = document.getElementById('blikButtonDiv')

  var localPaymentMethodOptions = {
    paymentType: 'blik',
    amount: '9.99',
    currency: 'PLN',
    firstName: 'Max',
    lastName: 'Mustermann',
    email: '[email protected]', 
    address: { // NOTE: Address is optional. If present, then make sure it's complete and valid, otherwise the transaction will FAIL.
      streetAddress: 'Mokotowska 34',
      extendedAddress: 'Zlota Jesien 64',
      locality: 'Warsaw',
      postalCode: '02-697',
      countryCode: 'PL'
    },
    fallbackUrl: '[email protected]',
    fallbackButtonText: 'Please retry'
  };

  payment.initBraintreeLocalPayment(
    'public-integration-key',
    blikButtonDiv,
    paymentIdHandler,
    completeHandler,
    errorHandler,
    cancellationHandler,
    localPaymentMethodOptions
  );
</script>

Example 2: Blik Non-Redirect

<!-- Payment methods selection form fields-->

<!-- This field is mandatory. Id and name have to be  __blikToken.-->
<input type="hidden" name="__blikToken" id="__blikToken" />

<!-- This field is optional and is used to collect Blik code from the UI. Id of the element has to be blikCode. If present, then authCode does not need to be passed with localPaymentMethodOptions. -->
<input type="text" id="blikCode" name="blikCode"/>

<!-- This field is mandatory. It can be styled and is used for payment initiation.-->
<div id="blikButtonDiv"> </div>
<!-- end of HTML -->

<script>
  var payment = new PaymentJs('1.3');

  errorHandler = function (error) {
    // handle error events here
  }

  cancellationHandler = function (data) {
    // handle cancellation event here - called if user cancelled payment process
  }

  completeHandler = function () {
    // handle completed transaction
  }

  paymentIdHandler = function (paymentId) {
      // blikTokenElement has to be updated with paymentId so the transaction can be updated with it.
      var blikTokenElement = document.getElementById('__blikToken');

      blikTokenElement.value = paymentId;
  }

  let blikButtonDiv = document.getElementById('blikButtonDiv')

  var localPaymentMethodOptions = {
    paymentType: 'blik',
    amount: '9.99',
    currency: 'PLN',
    firstName: 'Max',
    lastName: 'Mustermann',
    email: '[email protected]', 
    address: { // NOTE: Address is optional. If present, then make sure it's complete and valid, otherwise the transaction will FAIL.
      streetAddress: 'Mokotowska 34',
      extendedAddress: 'Zlota Jesien 64',
      locality: 'Warsaw',
      postalCode: '02-697',
      countryCode: 'PL'
    },
    authCode: '123456', // Blik auth code from the Blik application
      // NOTE: authCode can also be automatically fetched from an element with an id 'blikCode'(example above). 
      // In this case, the localPaymentMethodOptions.authCode is not required.
  };

  payment.initBraintreeLocalPayment(
    'public-integration-key',
    blikButtonDiv,
    paymentIdHandler,
    completeHandler,
    errorHandler,
    cancellationHandler,
    localPaymentMethodOptions
  );
</script>

​4. After the end customer has completed the payment, we rely on incoming webhooks from Braintree. Therefore, it can take up to 2 minutes before we update the transaction status.

• Blik: The transaction is created with a pending_postback status during the payment process by calling paymentIdHandler().
• Blik Non-Redirect: The transaction is created with an await_redirect status during the payment process by calling paymentIdHandler(). Debit transaction result includes a redirectUrl parameter to Hosted payment page, where end customer should be redirected to.