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:

1. Update package.json with the new version number (ie, v1.0.0)
2. 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.