1.0.4 • Published 3 years ago

frames-react-native-wrapper v1.0.4

Weekly downloads
48
License
ISC
Repository
-
Last release
3 years ago

This project is a simple React Native wrapper of Checkout.com Frames.

Install

npm install frames-react-native-wrapper

Demo

Image of Demo

Example Usage

import { Frames } from "frames-react-native-wrapper";

/**
 * ...other code
 */

<Frames
    config={{
        debug: true,
        publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73',
        localization: {
            cardNumberPlaceholder: 'Card number',
            expiryMonthPlaceholder: 'MM',
            expiryYearPlaceholder: 'YY',
            cvvPlaceholder: 'CVV',
        },
        style: {
            base: {
                fontSize: '17px',
            },
        },
    }}
    ready={() => {}}
    frameActivated={(e) => {}}
    frameFocus={(e) => {}}
    frameBlur={(e) => {}}
    frameValidationChanged={(e) => {}}
    paymentMethodChanged={(e) => {}}
    cardValidationChanged={(e) => {}}
    cardSubmitted={() => {}}
    cardTokenized={(e) => {}}
    cardTokenizationFailed={(e) => {}}
    submitCardCreator={(submitCard) => {}}
/>

Props

proprequireddescription
configtrueSee Checkout.com Frames.
readyfalseTriggered when Frames is registered on the global namespace and safe to use.
frameActivatedfalseTriggered when the form is rendered.
frameFocusfalseTriggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes.
frameBlurfalseTriggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes.
frameValidationChangedfalseTriggered when a field's validation status has changed. Use it to show error messages or update the UI.
paymentMethodChangedfalseTriggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon.
cardValidationChangedfalseTriggered when the state of the card validation changes.
cardSubmittedfalseTriggered when the card form has been submitted.
cardTokenizedtrueTriggered after a card is tokenized.
submitCardCreatortrueReturn static function submitCard for tokenization