Venmo - React Native SDK

/**

Initializes the Venmo integration from native android code.

@param activity The component activity instance from which the venmo integration is initialized.

@param currencyCode The currency that customer use for Venmo integration.

@param accountId The Venmo account id that customer use for Venmo integration.

@param onInitSuccess An optional callback invoked when the PSVenmoContext is successfully initialized.

@param onInitFailure An optional callback invoked when initialization fails, providing the [Exception] that caused the failure.

*/



fun initialize(

  activity: Activity? = null,

  currencyCode: String,

  accountId: String,

  onInitSuccess: (() -> Unit)? = null,

  onInitFailure: ((Exception) -> Unit)? = null

)
                                

/**

Initializes the Venmo integration from native android code.

@param fragment The fragment instance from which the venmo integration is initialized.

@param currencyCode The currency that customer use for Venmo integration.

@param accountId The Venmo account id that customer use for Venmo integration.

@param onInitSuccess An optional callback invoked when the PSVenmoContext is successfully initialized.

@param onInitFailure An optional callback invoked when initialization fails, providing the [Exception] that caused the failure.

*/



fun initialize(

  fragment: Fragment? = null,

  currencyCode: String,

  accountId: String,

  onInitSuccess: (() -> Unit)? = null,

  onInitFailure: ((Exception) -> Unit)? = null

)
                                

/**

Initializes the Venmo integration from typescript code.

@param currencyCode The currency that customer use for Venmo integration.

@param accountId The Venmo account id that customer use for Venmo integration.



function initializeVenmo(currencyCode: string, accountId: string)
                                

/**



Tokenization using Venmo from native android code.

@param readableVenmoTokenizeOptions Options for tokenizing Venmo data.

@param coroutineScope The [CoroutineScope] used to launch the tokenization request (defaults to [Dispatchers.IO]).

@param onTokenizeSuccess An optional callback invoked when tokenization is successful. Provides the resulting payment handle token as a [String].

@param onTokenizeFailure An optional callback invoked when tokenization fails. Provides the [Exception] that caused the failure.

@param onTokenizeCancelled An optional callback invoked when tokenization is cancelled by the user. Provides the [Exception] representing the cancellation reason.

*/



fun tokenize(

  readableVenmoTokenizeOptions: ReadableMap,

  coroutineScope: CoroutineScope = CoroutineScope(Dispatchers.IO),

  onTokenizeSuccess: ((String) -> Unit)? = null,

  onTokenizeFailure: ((Exception) -> Unit)? = null,

  onTokenizeCancelled: ((Exception) -> Unit)? = null

) 
                                

function tokenizeVenmo(readableVenmoTokenizeOptions: unknown) 
                                

import com.paysafevenmo.PaysafeVenmoModule



override fun onCreate() {

  super.onCreate()

  SoLoader.init(this, OpenSourceMergedSoMapping)



  registerActivityLifecycleCallbacks(object : Application.ActivityLifecycleCallbacks {

    override fun onActivityCreated(activity: Activity, savedInstanceState: Bundle?) {

      PaysafeVenmoModule.setupPaysafeSdk(

        "api-key",

        "TEST"

      )

      PaysafeVenmoModule.initialize(activity, "USD", "account-id")

    }



    override fun onActivityStarted(activity: Activity): Unit = Unit

    override fun onActivityResumed(activity: Activity): Unit = Unit

    override fun onActivityPaused(activity: Activity): Unit = Unit

    override fun onActivityStopped(activity: Activity): Unit = Unit

    override fun onActivitySaveInstanceState(activity: Activity, outState: Bundle): Unit = Unit

    override fun onActivityDestroyed(activity: Activity): Unit = Unit

  })

}
                                

import { NativeEventEmitter, Alert, Button, findNodeHandle, InteractionManager, TouchableOpacity, ActivityIndicator, NativeModules } from 'react-native';

import React, { useEffect, useState, useRef } from 'react';

import ParallaxScrollView from '@/components/ParallaxScrollView';

import { ThemedText } from '@/components/ThemedText';

import { ThemedView } from '@/components/ThemedView';

import { IconSymbol } from '@/components/ui/IconSymbol';

import { useRouter } from 'expo-router';

import * as Venmo from 'paysafe-venmo';



export default function screen() {

  const [isVenmoInitialized, setIsVenmoInitialized] = useState<boolean>(false);

  const [loadingVenmo, setLoadingVenmo] = useState<boolean>(true);

  const router = useRouter();



  useEffect(() => {

    const eventEmitterVenmo = new NativeEventEmitter(Venmo);

    let receivedEventVenmoInitialized = false;



    const subscriptionVenmoInitializationSuccess = eventEmitterVenmo.addListener(

      'VenmoInitializedSuccessful',

      () => {

        receivedEventVenmoInitialized = true;

        setIsVenmoInitialized(true);

        setLoadingVenmo(false);

      }

    );



    const subscriptionVenmoInitializationFailure = eventEmitterVenmo.addListener(

      'VenmoInitializationFailed',

      (error: { title?: string; message?: string }) => {

        receivedEventVenmoInitialized = true;

        setIsVenmoInitialized(false);

        setLoadingVenmo(false);



        const errorTitle = error?.title ?? 'Venmo Initialization Failed';

        const errorMessage = error?.message ?? 'Unknown error occurred while initializing Venmo.';

        Alert.alert(errorTitle, errorMessage);

      }

    );



    const subscriptionVenmoTokenizationSuccess = eventEmitterVenmo.addListener(

      'VenmoTokenizationSuccessful',

      (eventData) => {

        const token = eventData?.paymentHandleToken;

        router.push({

          pathname: '/paymentSuccessScreen',

          params: { token },

        });

      }

    );



    const subscriptionVenmoTokenizationFailure = eventEmitterVenmo.addListener(

      'VenmoTokenizationFailed',

      (error) => {

        Alert.alert('Payment Failed', error?.message ?? 'An error occurred during tokenization.');

      }

    );



    setTimeout(() => {

      if (!receivedEventVenmoInitialized) {

        setIsVenmoInitialized(false);

        setLoadingVenmo(false);

      }

    }, 30000);



    return () => {

      subscriptionVenmoInitializationSuccess.remove();

      subscriptionVenmoInitializationFailure.remove();

      subscriptionVenmoTokenizationSuccess.remove();

      subscriptionVenmoTokenizationFailure.remove();

    };

  }, []);



  const venmoTokenizeOptions = {

    amount: 10000,

    currencyCode: 'USD',

    transactionType: 'PAYMENT',

    merchantRefNum: 'merchant_ref_' + Math.floor(Math.random() * 1000000),

    billingDetails: {

      nickName: 'NickName',

      street: 'Street',

      city: 'City',

      state: 'AL',

      country: 'US',

      zip: '12345',

    },

    profile: {

      firstName: 'John',

      lastName: 'Doe',

      locale: 'EN_GB',

      merchantCustomerId: 'customer_123',

      dateOfBirth: {

        day: 1,

        month: 1,

        year: 1990,

      },

      email: 'email@mail.com',

      phone: '0123456789',

      mobile: '0123456789',

      gender: 'MALE',

      nationality: 'US',

    },

    accountId: '1002777190',

    merchantDescriptor: {

      dynamicDescriptor: 'dynamicDescriptor',

      phone: '0123456789',

    },

    shippingDetails: {

      shipMethod: 'NEXT_DAY_OR_OVERNIGHT',

      street: 'Street',

      street2: 'Street2',

      city: 'Marbury',

      state: 'AL',

      countryCode: 'US',

      zip: '36051',

    },

    customUrlScheme: 'customScheme',

    venmoRequest: {

      consumerId: 'customer-123243421',

      merchantAccountId: 'merch-acc-id',

      profileId: 'profile-id',

    },

  };



  const handleVenmoPayment = () => {

    try {

      Venmo.tokenizeVenmo(venmoTokenizeOptions);

    } catch (error: unknown) {

      setLoadingVenmo(false);

      Alert.alert('Error', `Venmo tokenization failed: ${error?.message || error}`);

    }

  };



  return (

    <ParallaxScrollView

      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}

      headerImage={

        <IconSymbol

          size={310}

          color="#808080"

          name="chevron.left.forwardslash.chevron.right"

          style={paymentsStyles.headerImage}

        />

      }>

      <ThemedView style={paymentsStyles.titleContainer}>

        <ThemedText type="title">Explore</ThemedText>

      </ThemedView>

      <ThemedText>Venmo Initialized: {isVenmoInitialized ? 'Yes' : 'No'}</ThemedText>



      {isVenmoInitialized && !loadingVenmo && (

        <Button title="Pay with Venmo" onPress={handleVenmoPayment} />

      )}

    </ParallaxScrollView