@gocardless/react-dropin
v0.3.5
Published
React bindings to the GoCardless Dropin checkout flow
Downloads
18,366
Maintainers
Readme
GoCardless React Dropin
React bindings for the GoCardless Dropin checkout flow.
Installation
With npm:
npm install --save @gocardless/react-dropin
With yarn:
yarn add @gocardless/react-dropin
Examples
This library exports React hook functions that you can use to trigger a GoCardless Dropin instance.
Here is a simple example of an App
that wants to create a Billing Request Flow
ID via its backend API, then provide a DropinButton
that the payer can click
to trigger the Dropin.
See this in action at the GoCardlessDropinButton story
import React, { useCallback, useState } from "react";
import {
useGoCardlessDropin,
GoCardlessDropinOptions,
GoCardlessDropinOnSuccess,
} from "@gocardless/react-dropin";
// Display a button that opens the Dropin on click, starting a checkout
// flow for the specified Billing Request Flow.
const DropinButton = (options: GoCardlessDropinOptions) => {
const { open } = useGoCardlessDropin({ ...options });
return (
<button type="button" onClick={() => open()}>
Start Dropin for <code>{options.billingRequestFlowID}</code> in{" "}
<code>{options.environment}</code>
</button>
);
};
// Example checkout flow, where we create a Billing Request Flow ID by talking
// with our backend API.
const App: FunctionComponent = () => {
const [flowID, setFlowID] = useState<string | null>(null);
// Build your backend with an API endpoint that:
//
// 1. Creates a Billing Request for the resources you wish to create
// 2. Create a Billing Request Flow against (1)
// 3. Return the ID from (2)
//
// See an example of this at Taking an Instant Bank Payment:
// https://developer.gocardless.com/getting-started/billing-requests/taking-an-instant-bank-payment/
React.useEffect(() => {
async function createFlow() {
// Expecting a JSON body like:
// {
// "flow_id": "BRF123456"
// }
let response = await fetch("/api/flows", {
method: "POST",
});
const { flow_id } = await response.json();
setFlowID(flow_id);
}
createFlow();
}, []);
// Only show the button once we have a Billing Request Flow ID
return flowID === null ? (
<div className="loader"></div>
) : (
<DropinButton billingRequestFlowID={flowID} environment={"live"} />
);
};
Storybook
Checkout the Storybook flow to see the <GoCardlessDropinButton />
in action.
You can use the Storybook knobs to configure the Billing Request Flow ID, from
which you can create your Dropin instance.
Stories are deployed to the gh-pages
branch of this repo, and hosted at
https://gocardless.github.io/react-dropin/.
Publishing
CircleCI is configured to publish changes for us, via a build pipeline.
To trigger a new package version:
- Update
package.json
with the new version number (ie, v1.0.0) - Push this commit to
master
, then cut a new release in GitHub with a tag name that matches the release (ie, v1.0.0)
This should trigger the CI pipeline, and the new package version will appear on npm shortly.