> For the complete documentation index, see [llms.txt](https://skrape-docs.gitbook.io/skrape/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skrape-docs.gitbook.io/skrape/libraries-and-sdk/react-native.md).

# React Native

Overall, the official React Native UI library for processing payments with Skrape is a useful tool for React Native developers who want to add payment processing capabilities to their apps. It provides a set of pre-built UI components that can be used to create a seamless and user-friendly payment experience, while also simplifying the integration process.

To use this library, developers will first need to [<mark style="color:green;">**sign up for a Skrape account**</mark>](https://skrape.io) and obtain an API key. Once the API key is obtained, it can be added to the React Native app and used to initialize the Skrape payment processing library. From there, developers can use the pre-built UI components to create a payment form, display transaction information, and handle payment events.

### Installation

Install skrape-payment with npm

```
npm install skrape-payment
```

###

### Usage/Example

```javascript
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { SkrapePayBtn } from "skrape-payment";


export default function App() {
  return (
    <View style={styles.container}>
      <SkrapePayBtn
        apiKey="skr_test_7e7bf500-cbd5-4fdc-bb7e-5cebb8d33bba"
        customStyle={styles.button}
        amount="1000"
        title="pay book"
        description="working v2 shsh shsh" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

// Some code
```

### API Reference

| Parameter   | Type   | Description                                                                                 |
| ----------- | ------ | ------------------------------------------------------------------------------------------- |
| apiKey      | string | The API key provided by Skrape, which is used to initialize the payment processing library. |
| customStyle | object | An object that defines custom styles for the payment button.                                |
| amount      | string | The amount of the payment.                                                                  |
| title       | string | The title of the payment form.                                                              |
| description | string | The description of the payment form.                                                        |

In the `App` function, the `SkrapePayBtn` component is used to create a button that initiates a payment process when clicked. The component takes several props, including:

* `apiKey`: This is the API key provided by Skrape, which is used to initialize the payment processing library.
* `customStyle`: This prop is used to apply a custom style to the button. In this case, the `styles.button` object is passed in to apply the styles defined in the `styles` object.
* `amount`: This prop is used to set the amount of the payment. In this example, it is set to "1000".
* `title`: This prop is used to set the title of the payment form. In this example, it is set to "pay book".
* `description`: This prop is used to set the description of the payment form. In this example, it is set to "working v2 shsh shsh".

The component is wrapped inside a `View` component with the `styles.container` styles, which centers the button on the screen.

Overall, this code demonstrates how to use the `SkrapePayBtn` component from the `skrape-payment` library to create a payment button in a React Native app. The component takes several props to customize the payment process, and is wrapped inside a `View` component to control its layout on the screen.