Billing Request (Instant Bank Pay feature)

Using the JavaScript Drop-in

Note: Currently creating Direct Debit mandate for AUTOGIRO scheme is not supported

Depending on the verify setting, payers may be asked to verify themselves if GoCardless deems them a risk or scheme compliance requires it. Read more about using verified mandates here.

This guide shows how to use the Javascript Drop-in to allow customers to complete the Billing Request Flow without leaving the integrator’s site.

Use the Drop-in when you already have a frontend website, and want to benefit from having customers stay on your site, and avoiding site-to-site redirects.

Preview the React Drop-in

Installation

Create

React Drop-in Example

1import React, { useCallback, useState } from "react"; 2import { 3 useGoCardlessDropin, 4 GoCardlessDropinOptions, 5 GoCardlessDropinOnSuccess, 6} from "@gocardless/react-dropin"; 7 8// Display a button that opens the Dropin on click, starting a checkout 9// flow for the specified Billing Request Flow. 10const DropinButton = (options: GoCardlessDropinOptions) => { 11 const { open } = useGoCardlessDropin({ ...options }); 12 13 return ( 14 <button type="button" onClick={() => open()}> 15 Start Dropin for <code>{options.billingRequestFlowID}</code> in{" "} 16 <code>{options.environment}</code> 17 </button> 18 ); 19}; 20 21// Example checkout flow, where we create a Billing Request Flow ID by talking 22// with our backend API. 23const App: FunctionComponent = () => { 24 const [flowID, setFlowID] = useState<string | null>(null); 25 26 // Build your backend with an API endpoint that: 27 // 28 // 1. Creates a Billing Request for the resources you wish to create 29 // 2. Create a Billing Request Flow against (1) 30 // 3. Return the ID from (2) 31 // 32 // See an example of this at Taking an Instant Bank Payment: 33 // https://developer.gocardless.com/getting-started/billing-requests/taking-an-instant-bank-payment/ 34 React.useEffect(() => { 35 async function createFlow() { 36 // Expecting a JSON body like: 37 // { 38 // "flow_id": "BRF123456" 39 // } 40 let response = await fetch("/api/flows", { 41 method: "POST", 42 }); 43 const { flow_id } = await response.json(); 44 setFlowID(flow_id); 45 } 46 createFlow(); 47 }, []); 48 49 // Only show the button once we have a Billing Request Flow ID 50 return flowID === null ? ( 51 <div className="loader"></div> 52 ) : ( 53 <DropinButton billingRequestFlowID={flowID} environment={"live"} /> 54 ); 55};

What’s next?

First instant payment with mandate Direct Debit set up

Get started

Collect Verified Mandates

Collect Direct Debit Mandates

Billing Request overview

For partners

Go to Partner PortalTo learn more about technical and UX requirements