User Experience Guide#

This guide is intended to help you build the best experience for your users. We've imagined a simple invoicing application (called 'Acme') to help illustrate the recommendations. The sections below serve as a checklist for things you should consider when integrating with GoCardless.

General recommendations#

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

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 at 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:

While adding a new customer#

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

When sending an invoice#

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

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.

Setting up the GoCardless integration#

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

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 — they won't receive payouts if they don't.

Requesting a customer to set up a Direct Debit#

During customer onboarding#

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.

Bulk requests#

Allow your users to make multiple mandate requests in bulk to save time when onboarding multiple customers at once.

Shareable mandate links#

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. See setting up Direct Debit mandates for how to implement this.

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.

Email notifications#

Your users will want to know what their customers will see and have control over what is sent to them. If your integration sends emails to customers requesting a mandate, offer a preview of the email and the option to edit the copy. See handling customer notifications for how to implement this.

On invoices#

Invoices and subscription pages are another natural touchpoint where merchants think about payment settings. Encourage them to request a mandate here too.

If you allow mandate requests when sending an invoice, surface it as a "Pay with Direct Debit" button on the invoice itself.

Confirmation screen#

Consider designing a confirmation screen for customers to land on after completing a mandate. Show a clear message confirming the Direct Debit is set up and what happens next.

Displaying mandate status#

Your users will want to see which customers have a Direct Debit set up and which ones they need to follow up with. Display the Direct Debit status clearly on both the customer list and the individual customer page.

Collecting a payment#

Once a Direct Debit mandate has been set up, your user can collect payments. The most common moment is when creating an invoice or subscription, so surface that option there. Explain clearly what options are available and how the payment process works.

Your users need to see the status of every payment. Display it clearly on an overview page like an invoices list as well as the individual invoice or subscription page.

If payments aren't collected automatically, allow users to choose when to collect — as soon as possible or at a later date. Make sure your implementation creates the payment early enough to hit the date the merchant needs.

Automating payments and Direct Debit requests#

Automation helps your users improve cash flow and reduces admin time. Once your user has collected their first payment, encourage them to automate collections and mandate requests. Lead with cash flow when prompting automation on invoices or subscriptions.

Lead with reduced admin when prompting automation of Direct Debit requests, and surface it at the right moment — for example, when adding a new customer.

If you support automatically retrying payments, draw your users' attention to it once it's relevant to them.

Clearly displaying error states#

When things go wrong, alert your users and help them understand the best action to take.

If a mandate has failed, been cancelled, or expired, notify your user and encourage them to contact their customer.

For payment failures:

• Highlight failed payments and clearly display the reason for the failure.
• Ensure invoices are not marked as paid, and make it as easy as possible to retry.
• Provide a way to resend a mandate request when a payment has failed due to a mandate issue.

What's Next?#