React Native In-App Payment Integration - functional approach

I’ve gotten so much good feedback from the Square team (and others) on this forum, I figured I’d contribute something for the next guy.

One of the problems that I ran into while integrating in-app payments into my React Native app was the the examples all take the old school Object Oriented approach, and I (and most of the RN community) prefer a functional approach.

Since I am still new to RN, this took a bit of reading and experimentation (I’ve never learned the OO appraoches). The sample code below is close to what I landed on.

Simple to integrate: On the component that you will start credit card processing, merge in the code below.

This code is lifted verbatim (except for some logging) from Square docs and reordered slightly:

Getting Started with the React Native Plugin for In-App Payments SDK

import { SQIPCore, SQIPCardEntry } from 'react-native-square-in-app-payments';


const ReviewOrderScreen = ({ route, navigation }) => {

    // ...

    const onStartCardEntry = async () => {

        await SQIPCore.setSquareApplicationId('sandbox-sq0idb-nyLT7WXGrzL-kk88hjhQRA');

        if (Platform.OS === 'ios') {
            await SQIPCardEntry.setIOSCardEntryTheme({
                saveButtonFont: {
                    size: 25,
                saveButtonTitle: 'Pay 💳 ',
                keyboardAppearance: 'Light',
                saveButtonTextColor: {
                    r: 255,
                    g: 0,
                    b: 125,
                    a: 0.5,

        await SQIPCardEntry.startCardEntryFlow(
            { collectPostalCode: false },

    const onCardNonceRequestSuccess = async (cardDetails) => {
        try {
            // take payment with the card details
            // await chargeCard(cardDetails);

            // payment finished successfully
            // you must call this method to close card entry
            await SQIPCardEntry.completeCardEntry(
        } catch (ex) {
            // payment failed to complete due to error
            // notify card entry to show processing error
            await SQIPCardEntry.showCardNonceProcessingError(ex.message);

    const onCardEntryComplete = () => {

    const onCardEntryCancel = () => {

    // ...

    return (

        // ...

        < ... onPress={() => { onStartCardEntry() } ... />

        // ...

Submitted in the hopes that someone will find it helpful.

1 Like

Thank you for sharing with the community!

Thank you for sharing this. I need your guidance on integration of Square Payment with iOnic app as well. you can find more details here - Integration with iOnic apps

Shirish - I had a lot of trouble getting in-app credit card processing working. Mostly the confusion was from the example code. Once I ditched that and just dug into the API Docs things got better.

I have some notes on this. I’ll drop them in this topic later in the day.

PS - Never heard of IOnick. Can’t help there at all.

ionic, flutter are some of the popular framework for iOS and android app development. You can think those as the non native framework.