React Native에 Tabby를 통합하는 방법: 단계별 가이드-JS 튜토리얼-php.cn

React Native에 Tabby를 통합하는 방법: 단계별 가이드

Barbara Streisand

풀어 주다： 2024-12-27 00:04:10

원래의

377명이 탐색했습니다.

How to Integrate Tabby in React Native: A Step-by-Step Guide

Tabby를 React Native 앱에 통합하는 과정은 원활할 수 있지만 온라인에서는 단계별 접근 방식을 제공하는 포괄적인 가이드가 없습니다. 이 문서는 여러 소스의 정보를 통합하여 React Native 앱에서 Tabby를 구현하기 위한 명확한 로드맵을 제공합니다.

1단계: Tabby SDK 설치
시작하려면 React Native용 Tabby SDK를 설치해야 합니다. 프로젝트 디렉터리에서 다음 명령을 실행하세요.

npm과 tabby-react-native-sdk

2단계: 플랫폼별 구성 업데이트

iOS 구성 iOS의 경우 다음 권한으로 Info.plist 파일을 업데이트해야 합니다.

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

로그인 후 복사

앱에 맞게 설명을 맞춤설정할 수 있습니다.

안드로이드 구성 Android의 경우 AndroidManifest.xml 파일에 다음 권한을 추가하세요.

<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” />

로그인 후 복사

이러한 권한은 Tabby가 필요한 리소스에 액세스할 수 있도록 보장합니다.

3단계: 앱에서 Tabby 초기화
Tabby를 초기화하려면 앱의 진입점(App.tsx 또는 index.js)에 다음 코드를 추가하세요.

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

Tabby.setApiKey('__API_KEY_HERE__');

로그인 후 복사

Tabby.setApiKey() 메서드는 API 키를 설정하여 앱이 Tabby의 백엔드 서비스에 인증할 수 있도록 합니다.

API_KEY_HERE를 Tabby API 키로 바꾸세요.

4단계: 결제 흐름 생성

결제 데이터 정의 장바구니 화면에서 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,
};

로그인 후 복사

customerPayment 객체는 금액, 통화, 연락처 정보 등 구매자의 결제 세부정보를 정의합니다. myTestPayment 개체에는 판매자_코드 및 기본 언어와 같은 판매자별 세부정보가 포함되어 있습니다.

세션 트리거 버튼 생성
세션 생성 프로세스를 시작하려면 UI에 버튼을 추가하세요

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

로그인 후 복사

이 버튼을 누르면 createCheckoutSession 기능이 실행되어 결제 프로세스가 시작됩니다.

세션 생성 로직 구현
다음 기능을 사용하여 버튼 누름을 처리합니다.

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);
  }
};

로그인 후 복사

Tabby.createSession() 메서드는 결제 데이터로 결제 세션을 생성합니다. 성공하면 응답에 sessionId 및 결제 URL과 같은 세션 세부정보가 포함됩니다. 그런 다음 사용자는 새 화면(TabbyWebViewScreen)으로 이동하여 결제를 완료합니다.

5단계: Tabby WebView 화면 만들기
Tabby 결제 흐름을 표시하는 새 화면을 설정하세요.

'react'에서 React를 가져옵니다.
'react-native'에서 {View, StyleSheet, Button}을 가져옵니다.
'@react-navigation/native'에서 {useNavigation, useRoute}를 가져옵니다.
'tabby-react-native-sdk'에서 {TabbyPaymentWebView}를 가져옵니다.

const TabbyWebViewScreen = () => {
  const 네비게이션 = useNavigation();
  const 경로 = useRoute();
  const {url} = 경로.매개변수;

  const handlerPaymentResult = 메시지 => {
    스위치(메시지) {
      '승인된' 경우:
        console.log('결제 승인');
        Navigation.goBack();
        부서지다;
      사례 '거부됨':
        console.log('결제 거부됨');
        Navigation.goBack();
        부서지다;
      사례 '닫기':
        console.log('결제가 종료되었습니다');
        Navigation.goBack();
        부서지다;
      '만료됨' 사례:
        console.log('세션이 만료되었습니다');
        Navigation.goBack();
        부서지다;
      기본:
        부서지다;
    }
  };

  반품 (
    <보기>

로그인 후 복사