https://github.com/gocardless/react-dropin
React bindings for the GoCardless Dropin checkout flow
https://github.com/gocardless/react-dropin
Last synced: about 1 year ago
JSON representation
React bindings for the GoCardless Dropin checkout flow
- Host: GitHub
- URL: https://github.com/gocardless/react-dropin
- Owner: gocardless
- License: mit
- Created: 2021-07-23T10:20:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-06T11:37:12.000Z (over 2 years ago)
- Last Synced: 2025-04-06T10:03:25.090Z (about 1 year ago)
- Language: TypeScript
- Size: 5.61 MB
- Stars: 6
- Watchers: 49
- Forks: 5
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GoCardless React Dropin
[](https://badge.fury.io/js/%40gocardless%2Freact-dropin)
React bindings for the GoCardless Dropin checkout flow.
## Installation
With npm:
```console
npm install --save @gocardless/react-dropin
```
With yarn:
```console
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](https://gocardless.github.io/react-dropin/?path=/story/dropin-gocardlessdropinbutton--base)
```typescript
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 (
open()}>
Start Dropin for {options.billingRequestFlowID} in{" "}
{options.environment}
);
};
// Example checkout flow, where we create a Billing Request Flow ID by talking
// with our backend API.
const App: FunctionComponent = () => {
const [flowID, setFlowID] = useState(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 ? (
) : (
);
};
```
## Storybook
Checkout the Storybook flow to see the `` 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/](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:
[release]: https://github.com/gocardless/react-dropin/releases/new
1. Update `package.json` with the new version number (ie, v1.0.0)
2. Push this commit to `master`, then [cut a new release][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.