Cara Mengintegrasikan Tabby dalam React Native: Panduan Langkah demi Langkah

Mengintegrasikan Tabby ke dalam apl React Native anda boleh menjadi proses yang lancar, tetapi tiada panduan komprehensif tersedia dalam talian yang menyediakan pendekatan langkah demi langkah. Artikel ini menyatukan maklumat daripada pelbagai sumber untuk memberi anda peta jalan yang jelas untuk melaksanakan Tabby dalam apl React Native anda.

Langkah 1: Pasang Tabby SDK
Untuk bermula, anda perlu memasang Tabby SDK untuk React Native. Jalankan arahan berikut dalam direktori projek anda:

npm saya tabby-react-native-sdk

Langkah 2: Kemas Kini Konfigurasi Khusus Platform

• Tatarajah iOS Untuk iOS, pastikan anda mengemas kini fail Info.plist anda dengan kebenaran berikut:

<key>NSCameraUsageDescription</key>
<string>This allows Tabby to take a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This allows Tabby to select a photo</string>

Anda boleh menyesuaikan perihalan agar sesuai dengan apl anda.

• Tatarajah Android Untuk Android, tambahkan kebenaran ini pada fail AndroidManifest.xml anda:

<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

Kebenaran ini memastikan Tabby boleh mengakses sumber yang diperlukan.

Langkah 3: Mulakan Tabby dalam Apl Anda
Untuk memulakan Tabby, tambah kod berikut pada titik masuk apl anda (App.tsx atau index.js):

import {Tabby} from 'tabby-react-native-sdk';

Tabby.setApiKey('__API_KEY_HERE__');

Kaedah Tabby.setApiKey() menetapkan kunci API anda, membenarkan apl anda untuk mengesahkan dengan perkhidmatan hujung belakang Tabby.

Ganti API_KEY_HERE dengan kunci API Tabby anda.

Langkah 4: Buat Aliran Pembayaran

• Tentukan Data Pembayaran Dalam skrin troli anda, sediakan data pembayaran yang diperlukan oleh Tabby:

const customerPayment = {
  amount: 340.0,
  currency: 'SAR',
  buyer: {
    email: 'successful.payment@tabby.ai',
    phone: '+971500000001',
  },
};

const myTestPayment = {
  merchant_code: 'your merchant code',
  lang: 'en',
  payment: customerPayment,
};

Objek CustomerPayment mentakrifkan butiran pembayaran pembeli, seperti amaun, mata wang dan maklumat hubungan. Objek myTestPayment termasuk butiran khusus pedagang seperti merchant_code dan bahasa pilihan.

Buat Butang Pencetus Sesi
Tambahkan butang pada UI anda untuk mencetuskan proses penciptaan sesi

<Button title="Proceed with Tabby" onPress={createCheckoutSession} />

Butang ini mencetuskan fungsi createCheckoutSession apabila ditekan, memulakan proses pembayaran.

Laksanakan Logik Penciptaan Sesi
Kendalikan tekan butang dengan fungsi berikut:

const createCheckoutSession = async () => {
  try {
    const {sessionId, paymentId, availableProducts} =
      await Tabby.createSession(myTestPayment);
    navigation.navigate('TabbyWebViewScreen', {
      url: availableProducts[0].webUrl,
    });
  } catch (error) {
    if (error.response) {
      console.error('Response:', error.response);
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
    }
    console.error('Error creating Tabby checkout session', error);
  }
};

Kaedah Tabby.createSession() mencipta sesi pembayaran dengan data pembayaran. Jika berjaya, respons termasuk butiran sesi seperti sessionId dan URL daftar keluar. Pengguna kemudiannya dilayari ke skrin baharu (TabbyWebViewScreen) untuk melengkapkan pembayaran.

Langkah 5: Buat Skrin Paparan Web Tabby
Sediakan skrin baharu untuk memaparkan aliran daftar keluar Tabby:

import React daripada 'react';
import {View, StyleSheet, Button} daripada 'react-native';
import {useNavigation, useRoute} daripada '@react-navigation/native';
import {TabbyPaymentWebView} daripada 'tabby-react-native-sdk';

const TabbyWebViewScreen = () => {
  const navigation = useNavigation();
  laluan const = useRoute();
  const {url} = route.params;

  const handlePaymentResult = mesej => {
    suis (mesej) {
      kes 'dibenarkan':
        console.log('Pembayaran Dibenarkan');
        navigation.goBack();
        pecah;
      kes 'ditolak':
        console.log('Bayaran Ditolak');
        navigation.goBack();
        pecah;
      kes 'tutup':
        console.log('Checkout Closed');
        navigation.goBack();
        pecah;
      kes 'tamat tempoh':
        console.log('Sesi Tamat Tempoh');
        navigation.goBack();
        pecah;
      lalai:
        pecah;
    }
  };

  kembali (
    <Lihat>

• Komponen TabbyPaymentWebView memuatkan URL pembayaran dan memaparkannya dalam paparan web.

• Fungsi handlePaymentResult mengendalikan hasil pembayaran (mis., dibenarkan, ditolak atau tamat tempoh) dan mengubah hala pengguna dengan sewajarnya.

• Butang "Kembali" membolehkan pengguna kembali ke skrin sebelumnya.

Langkah 6: Kendalikan Keputusan Pembayaran
Fungsi handlePaymentResult mengurus ubah hala pengguna berdasarkan hasil pembayaran:

dibenarkan:Pembayaran berjaya.
ditolak: Pembayaran telah ditolak.
tutup: Pengguna menutup proses pembayaran.
tamat tempoh: Sesi tamat tempoh.
Gunakan hasil ini untuk membimbing pengalaman pengguna dalam apl anda.

Sumber Tambahan

Tabby React Native SDK

Dokumentasi Tabby

Contoh Asli Tabby React

Terokai pautan ini untuk menyelami lebih mendalam ciri Tabby dan kes penggunaan lanjutan.

Atas ialah kandungan terperinci Cara Mengintegrasikan Tabby dalam React Native: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!