# Integration Companion

Plan your GoCardless integration from end to end. Get oriented with the Billing Request — the API that powers our payment flows — then choose the integration path that suits your team and use the interactive guide below to map out the exact steps you'll need to build.

## **The Billing Request API**

**Card - What is a Billing Request**

---

**What is a Billing Request?**

A Billing Request helps create resources that require input or action from a customer. This single API supports all geographies and features offered by GoCardless.

---

**Card - What to use it for**

---

**What to use it for?**

Set up a Direct Debit, PayTo, or VRP mandate; take a one-off Instant Bank Payment via Open Banking; or combine both.

---

**Card - How it works**

---

**How it works?**

1. Create a Billing Request specifying your desired outcome
2. Complete the required actions
3. Use the Billing Request Flow to complete any remaining actions

---

## **Integration paths**

Pick the approach that fits the level of control you want over the customer experience.

**Card: Hosted Payment Pages**

###### Hosted payment pages

GoCardless handles the full customer UX. You redirect your customer to a GoCardless-hosted page to complete their mandate or payment authorisation, then we redirect them back.

**Best for:** Getting live quickly with minimal frontend work.

---

**Card: JavaScript Drop-in flow**

###### JavaScript Drop-in flow

Embed a GoCardless-managed modal directly into your page. Customers complete the payment flow without leaving your site, while GoCardless handles the UX inside the drop-in.

**Best for:** Keeping customers on your site with minimal integration effort

---

**Card: Custom payment pages**

###### Custom payment pages

You own the full customer UX and call the GoCardless API directly at each step. Requires more development effort but gives you complete control over design and flow.

**Best for:** Teams with engineering resources who want a fully branded experience.

---

### Billing Request Steps

| Step | Title                         | Description                                                                                     |
| ---- | ----------------------------- | ----------------------------------------------------------------------------------------------- |
| 1    | Create a Billing Request      | Use the API to create a Billing Request, specifying the mandate and/or payment to be set up.    |
| 2    | Collect customer details      | Collect your customer's name, email and address using the API before launching the flow.        |
| 3    | Collect bank account          | Collect the customer's bank account details via the API before launching the flow.              |
| 4    | Create a Billing Request Flow | Create a flow to generate a hosted or drop-in checkout experience for your customer.            |
| 5    | Redirect to flow              | Redirect the customer to the hosted payment page URL returned by the Billing Request Flow.      |
| 6    | Initialise drop-in            | Embed the Drop-in component in your checkout page and initialise it with the flow ID.           |
| 7    | Confirm payer details         | Confirm the payer's name, email and bank account on the Billing Request via the API.            |
| 8    | Select institution            | Let the customer select their bank from the list of supported institutions.                     |
| 9    | Create bank authorisation     | Create a bank authorisation to generate the URL the customer will use to authorise the payment. |
| 10   | Redirect to bank              | Redirect the customer to their bank's authorisation page to approve the payment.                |
| 11   | Fulfil Billing Request        | Fulfil the Billing Request to finalise the mandate and/or payment setup.                        |
| 12   | Handle webhooks               | Listen for webhook events to track the status of billing requests, mandates and payments.       |