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 sign up for a Skrape account 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

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.