This section of our guide is intended to help you build the best experience for your users.

For this section, we’ve imagined a simple invoicing application (called ‘Acme’) to help illustrate the points we’d like to draw your attention to. It’s difficult here to cover absolutely everything you’ll encounter when applying the recommendations below to your integration, but the sections of this guide should serve as a checklist for things you should consider when integrating with GoCardless.

In this guide, we’ll cover the following:

  1. General recommendations
  2. Discovering GoCardless while using your product
  3. Setting up the GoCardless integration
  4. Verifying in GoCardless
  5. Requesting a customer to set up a Direct Debit
  6. Collecting a payment
  7. Automating payments and Direct Debit requests
  8. Clearly displaying error states

General recommendations

Before we look at the different steps in the user journey, here are some high level recommendations that apply throughout:

  • A good integration doesn’t add more work to your user’s day, it decreases it. That’s why all the actions that take place most frequently (like taking payments and managing Direct Debit mandates) should live on your interface, whereas functionality that is needed less frequently (settings and help) should live in GoCardless.
  • Users might need help while they get started, so make sure you provide a way for them to get in touch if they need help and link to GoCardless resources if they’re relevant to the step of the journey they’re in (like the GC setup guide if they’re getting started).
  • Use clear and concise language when you write the copy for your interface, let users know where they are and what is happening at every step.

Discovering GoCardless while using your product

The first thing to consider is how to let your users know that they can use a GoCardless integration with your product. When you do that, provide a clear way for them to add the integration, explain the value of GoCardless in a clear and concise way and focus on our main benefits:

  • GoCardless is made for recurring payments.
  • GoCardless allows you to collect invoice payments and subscriptions.
  • GoCardless allows you to split payments into multiple instalments and collect payments in different currencies (if you support these features).

Display this information in steps of the journey where it will be relevant to them. These steps tend to be the following for the majority of our partners:

  • During onboarding

    Encourage them to add a payment method while they’re getting started with your product:

    Onboarding

  • While adding a new customer

    Encourage them to set up a payment method when they are adding a new customer:

    New customer page

  • When sending an invoice

    Bring GoCardless to their attention when they are thinking about invoicing their customer.

    New invoice page

  • On your settings page.

    If you offer a way to add a payment method from your settings page, make them aware that they can also add GoCardless now.

    Payment settings page

Setting up the GoCardless integration

Make the setup process as seamless as possible, connecting your product and GoCardless should be seamless and require as fewer steps as possible. At this point you should explain clearly what is happening and reassure your users.

Connect page

Verifying in GoCardless

Once the integration is set up, your user might need to verify their GoCardless account, you can check whether this is required through the API, and direct the user to our onboarding flow if needed. Ask them to verify in a way that is noticeable and feels important to them, they won’t receive payouts if they don’t.

Verify reminder

Requesting a customer to set up a Direct Debit

The next step for your user is to request a customer to complete a Direct Debit mandate so they can take payments from them. You should do this when they are onboarding a new customer, as that is the step where the user and their customer are thinking about payment settings.

New customer page

Another area where you should consider is allowing your users to make multiple requests in bulk.

Customers page with bulk actions

You can also provide a mandate setup link in your product that your merchants can copy and use wherever they like, for example in emails or on their website. You can find how to do this on this section.

Modal window for copying generic request link

You can also let your users know about the ability to import existing mandates they may have already set up using the GoCardless dashboard or via another integration (if you’ve included support for importing existing mandates in your integration).

Modal window with mandate import wizard

Your users will want to know what their customers will see and have control over what is sent to them. If your integration is going to send emails to their customers with a request to set up a Direct Debit mandate, you should offer them a preview of the email their customers will receive and the option to edit the email copy. You can find how to do this on this section.

Modal with email template settings

Another step in the journey where they might think about payment settings is on an invoice or subscription page, so you should aim to encourage them to request a Direct Debit mandate then.

New invoice when a Direct Debit is not set up

If you are going to allow your users to request a Direct Debit mandate when they are sending an invoice to their customer, this should appear as a “Pay with Direct Debit” button on the invoice itself.

Invoice preview when a Direct Debit is not set up

Consider designing a confirmation screen for your users’ customers to be redirected to once they’ve completed their Direct Debit mandate. Show them a clear message telling them that their Direct Debit has been set up, and what will happen next.

Direct Debit confirmation

Your users will want to see which customers have a Direct Debit set up and which ones they need to follow up with, so you should display the Direct Debit status clearly on the customers page as well as the individual customer page.

Customers page

Individual customer page

Collecting a payment

Once a Direct Debit mandate has been set up by the customer, your user can now collect payments from them. The most common step where users think about collection is when they are creating an invoice or subscription, so aim to surface that option on a new invoice or subscription page. Explain with clear language what are their options and provide information on how the payment process works.

New invoice when the Direct Debit is set up

Your users need to see the status of every payment, so you should display it clearly on an overview page like an invoices page as well as the individual page for an invoice or subscription.

Invoices page

Paid invoice

If your user hasn’t set up payments to be collected automatically, you should allow your users to choose when they want to collect the payment, either as soon as possible or at a later date. The technical solution you implement should create the payment enough in advance of this date to ensure it’s charged on the date required by the merchant.

Modal window for manual collection of a payment

Automating payments and Direct Debit requests

Automation helps your users improve cash flow and reduces the time they spend on admin. Once your user has collected their first payment and seen the value of GoCardless for themselves, you should encourage them to automate payment collections and requests to their customers to set up a Direct Debit mandate. Focus on the aspect of improved cash flow when you ask them to automate payments and do it on a relevant step like creating a new invoice or subscription.

Callout to automate payments

Focus on the reduced admin aspect when you ask them to automate Direct Debit requests and do it at a relevant step like adding a new customer.

Callout to automate Direct Debit requests

If you are supporting automatically retrying payments, you could draw your users’ attention to it once it’s relevant to them.

callout to automate payment retries

Clearly displaying error states

You should also think about how to provide a good user experience when things don’t go well.

If a mandate has failed, has been cancelled or has expired, you should notify & encourage your user to contact their customer.

Customers page showing failed mandates

In the event that there are problems with any payment, you should alert your users and help them understand the best thing for them to do to act on them:

  • You should highlight failed payments, clearly display the reason for the failure, ensure the invoices are not marked as paid and make it as easy as possible for your users to retry these payments.
  • You should provide a way to resend a Direct Debit mandate request to customers whose payments have failed as a result of issues with a mandate.

Invoices page showing failed payments