Sıfırdan E-Ticaret Kartı: Ödeme Gateway'i React Native'de Kurma

1npm install @react-native-stripe-sdk/stripe-react-native
2npx pod-install

1import React, { useState } from 'react';
2import { View, Text, TouchableOpacity, Alert } from 'react-native';
3import { CardField, useStripe } from '@react-native-stripe-sdk/stripe-react-native';
4
5export default function PaymentScreen() {
6const { confirmPaymentMethod } = useStripe();
7const [loading, setLoading] = useState(false);
8
9const handlePayment = async () => {
10setLoading(true);
11try {
12const { paymentMethod, error } = await confirmPaymentMethod();
13
14if (error) {
15Alert.alert('Hata', error.message);
16} else {
17Alert.alert('Başarılı', `Ödeme ID: ${paymentMethod.id}`);
18// Sunucuya paymentMethod.id gönder
19}
20} catch (err) {
21Alert.alert('Hata', 'Ödeme işlemi başarısız oldu');
22} finally {
23setLoading(false);
24}
25};
26
27return (
28<View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
29<Text style={{ fontSize: 18, marginBottom: 20 }}>Kart Bilgilerinizi Girin</Text>
30<CardField
31postalCodeEnabled={true}
32placeholders={{
33number: '4242 4242 4242 4242',
34expiration: 'MM/YY',
35cvc: 'CVC',
36}}
37style={{ height: 50, marginVertical: 20 }}
38/>
39<TouchableOpacity
40onPress={handlePayment}
41disabled={loading}
42style={{
43backgroundColor: '#007AFF',
44padding: 15,
45borderRadius: 8,
46alignItems: 'center',
47}}
48>
49<Text style={{ color: '#fff', fontSize: 16, fontWeight: '600' }}>
50{loading? 'İşleniyor...': '₺100 Öde'}
51</Text>
52</TouchableOpacity>
53</View>
54);
55}

1import { StripeProvider } from '@react-native-stripe-sdk/stripe-react-native';
2
3export default function App() {
4return (
5<StripeProvider publishableKey="pk_test_xxxx">
6<PaymentScreen />
7</StripeProvider>
8);
9}