将 tabby 集成到 react native 应用程序中可以是一个无缝的过程，但网上没有提供分步方法的综合指南。本文整合了多个来源的信息，为您提供在 react native 应用程序中实现 tabby 的清晰路线图。
第 1 步：安装 tabby sdk
首先，您需要安装适用于 react native 的 tabby sdk。在项目目录中运行以下命令：
npm 我 tabby-react-native-sdk
第 2 步：更新特定于平台的配置
<key>nscamerausagedescription</key> <string>this allows tabby to take a photo</string> <key>nsphotolibraryusagedescription</key> <string>this allows tabby to select a photo</string>
您可以自定义描述以适合您的应用。
<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 结账流程：
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 视图中。
-
“返回”按钮允许用户返回到上一屏幕。
第6步：处理付款结果
handlepaymentresult 函数根据付款结果管理用户重定向：
已授权：支付成功。
拒绝：付款被拒绝。
close：用户关闭结账流程。
已过期：会话已过期。
使用这些结果来指导应用中的用户体验。
其他资源
tabby react native sdk
虎斑猫文档
tabby react native 示例
探索这些链接以更深入地了解 tabby 功能和高级用例。
