Error in MercadoPagoCheckout.createPayment

* ERROR Payment checkout issue: [TypeError: Cannot read property 'createPayment' of null]

I'm using one of the examples to test the library, but it's not working, when I press to buy a sneaker, it returns the preferenceId, but I get this error above. I'm basically using all the code from the tennis example.

Screenshots

import { Provider as PaperProvider } from 'react-native-paper';
import ProductCard from './components/ProductCard';
import StatusBar from './components/StatusBar';
import { Appbar } from 'react-native-paper';

import * as React from 'react';
import { Alert, FlatList, SafeAreaView } from 'react-native';
import MercadoPagoCheckout from '@blackbox-vision/react-native-mercadopago-px';

import { getProducts, getPreferenceId } from './mercadopago-service';
import { ArrowLeftBlue } from '@packages/atoms';
import { key } from './types';

export default function PaymentForm({ navigation }: any) {
  const products = getProducts();

  const startCheckout = async ({ title, description, amount }: any) => {
    try {
      console.log('Starting checkout process'); // Debugging output
      const preferenceId = await getPreferenceId('payer@email.com', {
        title,
        description,
        quantity: 1,
        currency_id: 'ARS',
        unit_price: amount,
      });
      console.log('Generated preferenceId:', preferenceId); // Debugging output

      if (!preferenceId) {
        throw new Error('preferenceId is null or undefined');
      }

      const payment = await MercadoPagoCheckout.createPayment({
        publicKey: key,
        preferenceId,
      });

      if (payment.status === 'in_process') {
        Alert.alert(
          'Payment In Progress',
          'You will receive an email when the payment of the product is complete'
        );
      } else if (payment.status === 'rejected') {
        Alert.alert(
          'Payment Rejected',
          'Please retry payment. If error persists contact support'
        );
      } else {
        Alert.alert(
          'Payment succeed',
          'You will receive an email with the invoice of your product'
        );
      }
    } catch (err: any) {
      if (err.message.includes('cancel')) {
        Alert.alert(
          'Payment was cancelled',
          'You can keep checking out our products'
        );
      } else {
        Alert.alert(
          'Payment checkout issue',
          'Please retry payment. If error persists contact support'
        );
        console.error('Payment checkout issue:', err); // Log the error for debugging
      }
    }
  };

  return (
    <PaperProvider>
      <StatusBar />
      <SafeAreaView style={{ flex: 1 }}>
        <Appbar style={{ gap: 40, paddingLeft: 20 }}>
          <ArrowLeftBlue onPress={() => navigation.goBack()} />
          <Appbar.Content title="Products" />
        </Appbar>
        <FlatList
          data={products}
          keyExtractor={(item) => `${item.id}`}
          renderItem={({ item }) => (
            <ProductCard {...item} onPress={startCheckout} />
          )}
        />
      </SafeAreaView>
    </PaperProvider>
  );
}

Dependencies { "name": "app-merchant", "version": "1.0.0", "main": "index.js", "prettier": { "singleQuote": true }, "scripts": { "start": "expo start", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@blackbox-vision/react-native-mercadopago-px": "^0.8.0", "@mercadopago/sdk-react": "^0.0.19", "@packages/atoms": "", "@packages/constants": "", "@packages/context": "", "@packages/molecules": "", "@packages/organisms": "", "@packages/templates": "", "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-community/datetimepicker": "8.0.1", "@react-native-masked-view/masked-view": "^0.3.1", "@react-native-picker/picker": "2.7.5", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "@supabase/supabase-js": "^2.43.4", "@types/mercadopago": "^1.5.11", "@types/mercadopago-sdk-js": "*", "axios": "^1.7.2", "base64-arraybuffer": "^1.0.2", "expo": "~51.0.11", "expo-camera": "~15.0.10", "expo-dev-client": "~4.0.15", "expo-device": "~6.0.2", "expo-image-picker": "~15.0.5", "expo-notifications": "~0.28.7", "expo-status-bar": "~1.12.1", "expo-system-ui": "~3.0.6", "expo-web-browser": "^13.0.3", "jotai": "^2.8.3", "lottie-react-native": "6.7.0", "metro-resolver": "^0.80.9", "react": "18.2.0", "react-native": "0.74.2", "react-native-config": "^1.5.1", "react-native-gesture-handler": "^2.16.2", "react-native-paper": "^5.12.3", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.1", "react-native-screens": "^3.31.1", "react-native-svg": "15.2.0", "react-native-svg-transformer": "^1.4.0", "react-native-url-polyfill": "^2.0.0", "react-native-uuid": "^2.0.2", "socket.io-client": "^4.7.5" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/mercadopago-sdk-js": "^2.0.15", "@types/react": "~18.2.45", "typescript": "~5.3.3" }, "private": true }

BlackBoxVision / react-native-mercadopago-px

Error in MercadoPagoCheckout.createPayment #89