Partners: User Experience Guide
User experience
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:
General recommendations
Discovering GoCardless while using your product
Setting up the GoCardless integration
Verifying in GoCardless
Requesting a customer to set up a Direct Debit
Collecting a payment
Automating payments and Direct Debit requests
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:
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 be seamless and require as fewer 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 to them, they won’t receive payouts if they don’t.
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.
Another area where you should consider is allowing your users to make multiple requests in bulk.
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.
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).
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.
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.
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.
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.
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 customer's page as well as the 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 the 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.
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.
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.
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.
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.
If you are supporting automatically retrying payments, you could draw your users’ attention to it once it’s relevant to them.
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.
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.
