Orientation: Choosing Your Integration Flow, before you begin, please review the Official Integration Flow.
- Standard Flow (Full Checkout): Recommended for most merchants. Yuno handles the UI, security, and automatic updates for payment methods.
- Custom Flow (This SDK): Use this only if you require full control over the UX. Note: You will be responsible for manually handling payment statuses, 3DS transitions, and fraud routing data collection.
Basic payment flow
The simplest way to integrate Yuno using the pre-built payment method selection component.import React, { useState, useEffect } from 'react';
import { View, Button, Text, StyleSheet, ScrollView } from 'react-native';
import { YunoSdk, YunoPaymentMethods } from '@yuno-payments/yuno-sdk-react-native';
export default function PaymentScreen() {
const [checkoutSession, setCheckoutSession] = useState<string | null>(null);
const [paymentMethodSelected, setPaymentMethodSelected] = useState(false);
useEffect(() => {
initCheckout();
const subscription = YunoSdk.onPaymentStatus((state) => {
if (state.status === 'SUCCEEDED') {
Alert.alert('Success', 'Payment successful!');
}
});
return () => subscription.remove();
}, []);
const initCheckout = async () => {
const session = await fetch('https://api.example.com/checkout', {
method: 'POST',
body: JSON.stringify({ amount: { currency: 'USD', value: 2500 } }),
}).then(r => r.json());
setCheckoutSession(session.checkoutSession);
};
const processPayment = async () => {
await YunoSdk.startPayment(true);
};
return (
<ScrollView style={styles.container}>
<Text style={styles.amount}>$25.00</Text>
{checkoutSession && (
<YunoPaymentMethods
checkoutSession={checkoutSession}
countryCode="US"
onPaymentMethodSelected={(event) => {
setPaymentMethodSelected(event.isSelected);
}}
/>
)}
<Button
title="Pay Now"
onPress={processPayment}
disabled={!paymentMethodSelected}
/>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 20 },
amount: { fontSize: 32, fontWeight: 'bold', textAlign: 'center', marginBottom: 24 },
});
React Navigation integration
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { YunoSdk, YunoPaymentMethods } from '@yuno-payments/yuno-sdk-react-native';
const Stack = createStackNavigator();
function CheckoutScreen({ navigation }) {
const [checkoutSession, setCheckoutSession] = useState<string | null>(null);
const [paymentMethodSelected, setPaymentMethodSelected] = useState(false);
useEffect(() => {
initCheckout();
const subscription = YunoSdk.onPaymentStatus((state) => {
if (state.status === 'SUCCEEDED') {
navigation.navigate('Success');
}
});
return () => subscription.remove();
}, []);
const handlePayment = async () => {
await YunoSdk.startPayment(true);
};
return (
<ScrollView style={{ padding: 20 }}>
{checkoutSession && (
<YunoPaymentMethods
checkoutSession={checkoutSession}
countryCode="US"
onPaymentMethodSelected={(event) => {
setPaymentMethodSelected(event.isSelected);
}}
/>
)}
<Button
title="Continue to Payment"
onPress={handlePayment}
disabled={!paymentMethodSelected}
/>
</ScrollView>
);
}
export default function App() {
useEffect(() => {
YunoSdk.initialize({ apiKey: 'pk_test_key', countryCode: 'US' });
}, []);
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Checkout" component={CheckoutScreen} />
<Stack.Screen name="Success" component={SuccessScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
One-click payment (Vaulted Tokens)
const payWithCard = async (card) => {
const session = await createCheckoutSession();
await YunoSdk.startPaymentLite({
checkoutSession: session.id,
methodSelected: {
vaultedToken: card.vaultedToken,
paymentMethodType: 'CARD',
},
showPaymentStatus: true,
}, 'US');
};
Subscription enrollment
const enrollCard = async () => {
const customerSession = await createCustomerSession('cus_123');
await YunoSdk.enrollmentPayment({
customerSession: customerSession.id,
countryCode: 'US',
showPaymentStatus: true,
});
};
Context API integration
import React, { createContext, useContext, useState, useEffect } from 'react';
const PaymentContext = createContext(null);
export function PaymentProvider({ children }) {
const [isProcessing, setIsProcessing] = useState(false);
useEffect(() => {
const subscription = YunoSdk.onPaymentStatus((state) => {
setIsProcessing(false);
if (state.status === 'SUCCEEDED') { /* ... */ }
});
return () => subscription.remove();
}, []);
const processPayment = async () => {
setIsProcessing(true);
await YunoSdk.startPayment(true);
};
return (
<PaymentContext.Provider value={{ isProcessing, processPayment }}>
{children}
</PaymentContext.Provider>
);
}