SEPA Direct Debit

Client-Side Implementationanchor

availability

SEPA Direct Debit is available to eligible merchants using a custom client-side integration. It is only available in Android v4.13+, iOS v5.11+, and JavaScript v3 SDK. It's not currently available in Drop-in.

If you meet the criteria, Contact us to enable SEPA Direct Debit in your Sandbox or Production account.

Installationanchor

To set up the Braintree JavaScript v3 SDK, see the installation guide.

Then, load the sepa component. If you are using script tags to load files, be sure to at least include:

  1. HTML
<script src="https://js.braintreegateway.com/web/3.90.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.90.0/js/sepa.min.js"></script>

Initializationanchor

  1. Initialize a client using either a tokenization key or a client token from your server
  2. Create a SEPA component
  1. Callback
  2. Promise
braintree.client.create({
  client: clientInstance,
}, function (sepaErr, sepaInstance) {

  if (sepaErr) {
    console.error('Error creating client:', sepaErr);
    return;
  }

  // create a SEPA component
  return braintree.sepa.create({
    client: clientInstance,
    merchantId: "merchant-id",
  });
});

Collect informationanchor

Once your component is ready, collect the required bank account information from the customer.

Bank information:

  • accountHolderName (the name of the account owner)
  • iban (International Bank Account Number)

Customer information:

  • countryCode
  • billingAddress (optional)
  • customerId (customer id in the merchant's system)

Tokenizeanchor

Collect the required information from the customer, and pass it to your newly created SEPA component to call tokenize. The call to tokenize is then set up to be invoked as a result of a customer action, such as a button click.

For the specifics around tokenize, check out our reference documentation.

  1. Callback
  2. Promise
// These values come from the input fields of your own definition.
var accountHolderName = document.getElementById("account-holder-name").value;
var customerId = document.getElementById("customer-id").value;
var iban = document.getElementById("iban").value;
var mandateType = document.getElementById("mandate-type").value;
var countryCode = document.getElementById("country-code").value;

// This value is whatever element you want to use to trigger tokenization.
var sepaButton = document.getElementById("sepa-button")
// create a SEPA component
braintree.sepa.create({
    client: clientInstance,
    merchantId: "merchant-id",
}, function (sepaErr, sepaInstance) {
  if (sepaErr) {
    console.log("Error creating SEPA:", sepaErr)
    return
  }

  sepaButton.addEventListener('click', function() {
      sepaInstance.tokenize({
        accountHolderName: accountHolderName,
        customerId: customerId,
        iban: iban,
        mandateType: mandateType, // ONE_OFF OR "RECURRENT"
        countryCode: countryCode,
        merchantAccountId: "MERCHANT-ACCOUNT-ID",
      }, function (tokenizationErr, payload) {
        if (tokenizationErr) {
          // handle error
        }

        // Authorization complete, nonce retrieved successfully
        console.log("Nonce recieved:", payload.nonce)
      });
    })
})

Example of tokenize call with buyer's billing address.

  1. Callback
  2. Promise
// These values come from the input fields of your own definition.
var accountHolderName = document.getElementById("account-holder-name").value;
var customerId = document.getElementById("customer-id").value;
var iban = document.getElementById("iban").value;
var mandateType = document.getElementById("mandate-type").value;
var countryCode = document.getElementById("country-code").value;
var addressLine1 = document.getElementById("address-line1").value;
var addressLine2 = document.getElementById("address-line2").value;
var adminArea1 = document.getElementById("admin-area1").value;
var adminArea2 = document.getElementById("admin-area2").value;
var postalCode = document.getElementById("postal-code").value;

// This value is whatever element you want to use to trigger tokenization.
var sepaButton = document.getElementById("sepa-button")
// create a SEPA component
braintree.sepa.create({
    client: clientInstance,
    merchantId: "merchant-id",
}, function (sepaErr, sepaInstance) {
  if (sepaErr) {
    console.log("Error creating SEPA:", sepaErr)
    return
  }

  sepaButton.addEventListener('click', function() {
      sepaInstance.tokenize({
        accountHolderName: accountHolderName,
        customerId: customerId,
        iban: iban,
        mandateType: mandateType, // ONE_OFF OR "RECURRENT"
        countryCode: countryCode,
        merchantAccountId: "MERCHANT-ACCOUNT-ID",
        billingAddress: {
          addressLine1: addressLine1,
          addressLine2: addressLine2,
          adminArea1: adminArea1,
          adminArea2: adminArea2,
          postalCode: postalCode,
        }
      }, function (tokenizationErr, payload) {
        if (tokenizationErr) {
          // handle error
        }

        // Authorization complete, nonce retrieved successfully
        console.log("Nonce recieved:", payload.nonce)
      });
    })
})

Next Page: Server-side →