open-index/open-npm huggingface dataset:
npm package: @moonpay/moonpay-js
Description: The MoonPay javascript SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.
Author: sbsto
Latest version: 0.7.6

# @moonpay/moonpay-js

The MoonPay Web SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.

## Documentation

For detailed integration instructions and further documentation, please visit our [Documentation Site](https://moonpay.readme.io/docs/ramps-sdk-install-web).

## Installation

To install the package, use npm or yarn:

```bash
npm install --save @moonpay/moonpay-js
```

or

```bash
yarn add @moonpay/moonpay-js
```

## Prerequisites

Before using this package, make sure you have the following:

- An active MoonPay account.
- Your MoonPay API key.

## Usage

1. Import the `loadMoonPay` function.

```typescript
import { loadMoonPay } from '@moonpay/moonpay-js';
```

2. Call the `loadMoonPay` function to get the constructor for the `MoonPayWebSdk`.

```typescript
const moonPay = await loadMoonPay();

const widget = moonPay({
  flow: 'buy',
  environment: 'sandbox',
  params: {
    apiKey: 'pk_test_123',
  },
  variant: 'overlay',
});
```

3. Call the `show` method on your instance

```typescript
widget.show();
```
npm package: @moonpay/moonpay-node
Description: The MoonPay NodeJS SDK allows you to easily use MoonPay server-side functions.
Author: sbsto
Latest version: 0.2.13

# @moonpay/moonpay-node

A node package for MoonPay server-side functions

## Setup

Set up the `MoonPay` class with your secret key.

Note: ⚠️ NEVER use your secret key in client side code. ⚠️

You will probably want to load the test key from an environment variable.

```typescript
const moonPay = new MoonPay('sk_test_...');
```

## Usage

Use the `moonPay` instance to access our functions.

### URL utilities

MoonPay URL utilities are namespaced under the `.url` property.

#### Signing your URL

If you include the `walletAddress` or `walletAddresses` query param, you'll need to sign the URL.

```typescript
const signature = moonPay.url.generateSignature(
  'https://buy.moonpay.com/?apiKey=pk_test_123&walletAddress=...',
);
```

Or, return the signed URL, using the `returnFullURL` option.

```typescript
const signedURL = moonPay.url.generateSignature(
  'https://buy.moonpay.com/?apiKey=pk_test_123&walletAddress=...',
  { returnFullURL: true },
);
```

#### Verifying a signature

Or, you can verify that a URL is correctly signed.

```typescript
const isSignatureValid = moonPay.url.isSignatureValid(
  '[...]/?apiKey=pk_test_123&signature=someSignature',
);
```

#### Generating a signed URL

You can also have us generate the full, signed URL, based on some input parameters.

```typescript
const params = {
  apiKey: 'pk_test_123',
  baseCurrencyCode: 'GBP',
};

const url = moonPay.url.generate({ flow: 'buy', params });
```
npm package: @moonpay/moonpay-react
Description: The MoonPay React SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.
Author: sbsto
Latest version: 1.10.6

# @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.

```tsx
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:

```tsx
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:

```tsx
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.

```tsx
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.

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

export default function Buy() {
  return (
    <MoonPayBuyWidget
      variant="overlay"
      walletAddress="0x0...0"
      onUrlSignatureRequested={async (url) => await yourSigningFunction(url)}
    />
  );
}
```
npm package: @moonpay/react-native-moonpay-sdk
Description: The MoonPay Mobile SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.
Author: tomislavhrenmp
Latest version: 1.1.8

# @moonpay/react-native-moonpay-sdk

The MoonPay React Native SDK enables you to integrate the MoonPay widget so you can facilitate crypto purchases within your platform.

## Documentation

For detailed integration instructions and further documentation, please visit our [Documentation Site](https://dev.moonpay.com/docs/ramps-sdk-install-rn).

## Installation

To install the package, use npm or yarn:

```bash
npm install --save @moonpay/react-native-moonpay-sdk
```

or

```bash
yarn add @moonpay/react-native-moonpay-sdk
```

## Prerequisites

Before using this package, make sure you have the following:

- An active MoonPay account.
- Your MoonPay API key.

## Usage

1. Import the `useMoonPaySdk` hook in you React Native component

```typescript
import { useMoonPaySdk } from '@moonpay/react-native-moonpay-sdk';
```

2. Invoke the hook with the passed configuration object

If you want to display the widget in a **WebView**:

```typescript
const { MoonPayWebViewComponent } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
});

return (
  <View>
    <MoonPayWebViewComponent />
  </View>
);
```

If you want to display the widget in an **In-App browser**:

1. Using [`react-native-inappbrowser-reborn`](https://www.npmjs.com/package/react-native-inappbrowser-reborn)

```typescript
import { InAppBrowser } from 'react-native-inappbrowser-reborn';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url);
      }
    },
  },
});

return (
  <View>
    <Button onPress={openWithInAppBrowser} />
  </View>
);
```

2. Using [`expo-web-browser`](https://docs.expo.dev/versions/latest/sdk/webbrowser/)

```typescript
import * as WebBrowser from 'expo-web-browser';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      await WebBrowser.openBrowserAsync(url);
    },
  },
});
```

3. Using [`Linking`](https://reactnative.dev/docs/linking)

```typescript
import { Linking } from 'react-native';

const { openWithInAppBrowser } = useMoonPaySdk({
  sdkConfig: {
    flow: 'buy',
    environment: 'sandbox',
    params: {
      apiKey: 'pk_test_123',
    },
  },
  browserOpener: {
    open: async (url: string) => {
      await Linking.openURL(url);
    },
  },
});

return (
  <View>
    <Button onPress={openWithInAppBrowser} />
  </View>
);
```