SEPA Direct Debit
Client-Side Implementation
Installation
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:
- 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>
Initialization
- Initialize a
client
using either a tokenization key or a client token from your server - Create a SEPA component
- Callback
- 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 information
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)
Tokenize
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.
- Callback
- 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.
- Callback
- 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 →