Super pretty payment inputs for React Native. It exports a bunch of hooks and utility components to help you deliver a sweeter payment experience, faster. It uses bignumber.js to avoid floating point rounding errors.
Using Yarn:
yarn add react-native-pretty-paymentThis solution is most effective when comprised with an internationalization library with support for currency, such as
react-intl.
Firstly, you don't actually need any of the included UI to begin accepting payment information; all of the important business logic and props are retained inside a call to usePaymentButtons:
import {usePaymentButtons} from 'react-native-pretty-payment';
import BigNumber from 'bignumber.js';
const [valueAsString, value, {...helpers}] = usePaymentButtons(new BigNumber(1), {
min: new BigNumber(1),
max: new BigNumber(75),
maximumFractionDigits: 2,
});From this point, you're free render as you please, with the assurance that input and output values are going to remain bounded to the parameters supplied in the initial invocation of usePaymentButtons.
For a full demonstration, please check out the included Example.
usePaymentButtons is used to synthesize all of the form validation logic and related props required to pass into a payment input layout.
type usePaymentButtonsParams = {
readonly min: BigNumber; // min required payment
readonly max: BigNumber; // max required payment
readonly maximumFractionDigits: number; // maximum digits the user can enter
}type usePaymentButtonsResult = [
valueAsString: string, // currently entered value as a string
value: BigNumber, // currently entered value as a non-lossy numeric representation
helpers: PaymentButtonsHelpers, // props and useful functions to help build your form
]type PaymentButtonsHelpers = {
readonly overflow: boolean; // signalling value exceeds max
readonly underflow: boolean; // signalling value is less than min
readonly getDigits: () => readonly ButtonProps[]; // returns all digit props
readonly getBackspace: () => ButtonProps; // returns backspace props
readonly getPeriod: () => ButtonProps; // returns decimal point props
readonly hasPeriod: boolean; // defines whether the user has tapped the decimal point
readonly numberOfFractionalDigits: number; // the number of decimal points that have been entered
}type ButtonProps = {
readonly onPress: onPressHandler; // callback used to change the entered payment value
readonly disabled: boolean; // whether the input is disabled
readonly children: string; // which value is being rendered [0123456789\.<]
};