将 tabby 集成到 react native 应用程序中可以是一个无缝的过程，但网上没有提供分步方法的综合指南。本文整合了多个来源的信息，为您提供在 react native 应用程序中实现 tabby 的清晰路线图。
第 1 步：安装 tabby sdk 首先，您需要安装适用于 react native 的 tabby sdk。在项目目录中运行以下命令：
npm 我 tabby-react-native-sdk
第 2 步：更新特定于平台的配置
ios 配置 对于 ios，请确保使用以下权限更新您的 info.plist 文件：1
2
3
4
<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 文件中：1
2
3
<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）：
1
2
3
import {tabby} from tabby-react-native-sdk;
tabby.setapikey(__api_key_here__);
tabby.setapikey() 方法设置您的 api 密钥，允许您的应用程序通过 tabby 的后端服务进行身份验证。
将 api_key_here 替换为您的 tabby api 密钥。
第 4 步：创建付款流程
定义支付数据 在您的购物车屏幕中，设置 tabby 所需的付款数据：1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 中添加一个按钮来触发会话创建过程
1
<button title="proceed with tabby" onpress={createcheckoutsession} />
实现会话创建逻辑
使用以下函数处理按钮按下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 结账流程：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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 (
<View style={styles.container}>
<View style={styles.webViewContainer}>
<TabbyPaymentWebView
url={url}
onBack={() => navigation.goBack()}
onResult={handlePaymentResult}
/>
</View>
<Button title="Go Back" onPress={() => navigation.goBack()} />
</View>
);
};
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 功能和高级用例。
以上就是如何在 React Native 中集成 Tabby：分步指南的详细内容，更多请关注php中文网其它相关文章！