将 tabby 集成到 react native 应用程序中可以是一个无缝的过程，但网上没有提供分步方法的综合指南。本文整合了多个来源的信息，为您提供在 react native 应用程序中实现 tabby 的清晰路线图。
第 1 步：安装 tabby sdk
首先，您需要安装适用于 react native 的 tabby sdk。在项目目录中运行以下命令：
npm 我 tabby-react-native-sdk
第 2 步：更新特定于平台的配置
- ios 配置 对于 ios，请确保使用以下权限更新您的 info.plist 文件：
nscamerausagedescription this allows tabby to take a photo nsphotolibraryusagedescription this allows tabby to select a photo
您可以自定义描述以适合您的应用。
- 安卓配置 对于 android，请将这些权限添加到您的 androidmanifest.xml 文件中：
这些权限确保 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 中添加一个按钮来触发会话创建过程
按下此按钮会触发 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 结账流程：
import React from 'react';
import {View, StyleSheet, Button} from 'react-native';
import {useNavigation, useRoute} from '@react-navigation/native';
import {TabbyPaymentWebView} from 'tabby-react-native-sdk';
const TabbyWebViewScreen = () => {
const navigation = useNavigation();
const route = useRoute();
const {url} = route.params;
const handlePaymentResult = message => {
switch (message) {
case 'authorized':
console.log('Payment Authorized');
navigation.goBack();
break;
case 'rejected':
console.log('Payment Rejected');
navigation.goBack();
break;
case 'close':
console.log('Checkout Closed');
navigation.goBack();
break;
case 'expired':
console.log('Session Expired');
navigation.goBack();
break;
default:
break;
}
};
return (
navigation.goBack()}
onResult={handlePaymentResult}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
webViewContainer: {
marginTop: 50,
height: '95%',
backgroundColor: 'blue',
},
});
export default TabbyWebViewScreen;
tabbypaymentwebview 组件加载结帐 url 并将其显示在 web 视图中。
handlepaymentresult 函数处理付款结果（例如授权、拒绝或过期）并相应地重定向用户。
“返回”按钮允许用户返回到上一屏幕。
第6步：处理付款结果
handlepaymentresult 函数根据付款结果管理用户重定向：
已授权：支付成功。
拒绝：付款被拒绝。
close：用户关闭结账流程。
已过期：会话已过期。
使用这些结果来指导应用中的用户体验。
其他资源
tabby react native sdk
虎斑猫文档
tabby react native 示例
探索这些链接以更深入地了解 tabby 功能和高级用例。
