Skip to main content

Direct Debit

Alongside card payments, ecommerce customers can pay by Direct Debit. The Direct Debit client lets a customer set up a Direct Debit instruction to pay, capturing their personal and bank details, validating the account, and presenting the Direct Debit Guarantee before the instruction is created.

The Direct Debit client is presented next to the card client as a Direct Debit tab in the checkout, so the customer can choose how they want to pay.

info

The Direct Debit client mirrors the card client, so a host application subscribes to the same set of events for either payment method.

Payment Journey​

The customer completes the Direct Debit set-up in three steps, with the amount to pay shown at the top throughout.

1. Enter details​

The customer provides their personal details and bank account details.

Direct Debit details step

Personal Details

  • Title
  • First Name and Last Name
  • E-Mail Address — used for the mandate confirmation
  • Telephone Number
  • Postcode with Lookup Address — the customer enters their postcode and selects their address

Account Details

  • Account holder name
  • Account number
  • Bank sort code

The bank details are verified with a modulus check when the customer continues. The customer must also:

  • Tick to confirm they are the only person required to sign for the account. If more than one signature is required, the box is left unchecked and a paper Direct Debit Instruction is sent for completion.
  • Agree to the Terms and Conditions.

2. Confirm your details​

The customer reviews their personal and bank account details, including the Service User Number, and reads the Direct Debit Guarantee before confirming.

Direct Debit confirmation step

Selecting Sign up and Pay creates the Direct Debit instruction. Back returns to the details step to make changes.

3. Completion​

Once the Direct Debit is set up, the customer sees a confirmation with the payment reference, first payment date and a summary of the mandate. A confirmation email is sent, and the payment is protected by the Direct Debit Guarantee.

Features & Key Benefits​

  • Set up Direct Debit at checkout: Customers can pay by Direct Debit without leaving the payment flow.
  • Bank account validation: Sort code and account number are verified with a modulus check before the mandate is created.
  • Address lookup: Customers find and select their address from a postcode.
  • Prefill support: Known customer details can be pre-populated to reduce friction.
  • Direct Debit Guarantee: The guarantee is presented before the customer confirms.
  • Mandate confirmation: A confirmation is emailed to the customer once the Direct Debit is active.

Prefilled Data​

Known customer details can be passed in to pre-populate the form. The customer can edit any pre-filled value. Supported fields:

  • Title, first name, surname
  • Email, telephone number
  • Address (address lines, town/city, county, postcode, country)

Integration Flow​

  1. Create the transaction: The host provides the transaction details (client, amount, customer reference and any prefill).
  2. Render the client: The Direct Debit client renders as a tab alongside the card client.
  3. Customer completes the details: The customer enters and confirms their details; bank details are validated before confirmation.
  4. Direct Debit is created: On sign up, the mandate is created and the customer sees the completion screen.
  5. Host is notified: The client fires events the host listens for to track progress and completion.

Events​

The Direct Debit client fires the same events as the card client, so a host can subscribe once for either payment method:

EventWhen it fires
loadedThe client has loaded.
readyThe form is mounted and ready for input.
signUpStartedThe customer commits to signing up, so the host can lock the payment method choice.
transactionCompleteThe Direct Debit was set up successfully. Carries the signed result.
transactionFailedThe set-up attempt failed.
transactionErrorA correctable or load error occurred (the customer can retry).
renderErrorThe client could not render — for example invalid prefill data.