@moonpay/moonpay-react

This packages makes the MoonPay Web SDK easy to use in React.

Setup

To get started, install the required packages.

npm install @moonpay/moonpay-react

Provider

The MoonPayProvider allows you to use MoonPay components throughout your app, abstracting the complexity of managing the loaded SDK instance.

import { MoonPayProvider } from '@moonpay/moonpay-react';

export default function App() {
  return (
    <MoonPayProvider apiKey="pk_test_123">
      <Home />
    </MoonPayProvider>
  );
}

This provider allows you to initialise MoonPay components throughout your app as needed. You can also pass any of our other SDK config properties to our React components. For example, here's how you might initialise the widget with some query params and event handlers:

import { MoonPayBuyWidget } from '@moonpay/moonpay-react';

export default function Buy() {
  return (
    <MoonPayBuyWidget
      variant="embedded"
      onLogin={() => console.log('Customer logged in to MoonPay!')}
      baseCurrencyCode="usd"
      quoteCurrencyCode="eth"
      quoteCurrencyAmount="0.89342"
    />
  );
}

Or, if you prefer to keep your handlers and params separate:

import { MoonPayBuyWidget } from '@moonpay/moonpay-react';

export default function Buy() {
  const handlers = {
    onLogin: () => {
      console.log('Customer logged into MoonPay!');
    },
    // more handlers ...
  };

  const params = {
    baseCurrencyCode: 'usd',
    quoteCurrencyCode: 'eth',
    quoteCurrencyAmount: '0.89342',
    // more params ...
  };

  return <MoonPayBuyWidget variant="embedded" {...handlers} {...params} />;
}

In the below example, since we're using the overlay variant, it won't show by default when it renders. Instead, we can use a simple state value to control whether it's visible.

import { MoonPayBuyWidget } from '@moonpay/moonpay-react';

export default function Buy() {
  const [isMoonPayVisible, setIsMoonPayVisible] = useState(false);

  return (
    <div>
      <MoonPayBuyWidget variant="overlay" visible={isMoonPayVisible} />
      <button onClick={() => setIsMoonPayVisible(true)}>Show widget</button>
    </div>
  );
}

If you use the walletAddress or walletAddresses param, you must sign the widget URL using your secret key on the server side. The widget has provided prop calls your signing function on the URL anytime it's initialised or changed, and updates the URL, ensuring it's always up to date.

import { MoonPayBuyWidget } from '@moonpay/moonpay-react';

export default function Buy() {
  return (
    <MoonPayBuyWidget
      variant="overlay"
      walletAddress="0x0...0"
      onUrlSignatureRequested={async (url) => await yourSigningFunction(url)}
    />
  );
}