tabby_flutter_inapp_sdk

Description:

tabby flutter inapp sdk

Tabby Flutter SDK #
Use the Tabby checkout in your Flutter app.
Requirements #

Dart sdk: ">=2.14.0 <3.0.0"
Flutter: ">=2.5.0"
Android: minSdkVersion 17 and add support for androidx (see AndroidX Migration to migrate an existing app)
iOS: --ios-language swift, Xcode version >= 12

Getting started #
Add flutter_inappwebview as a dependency in your pubspec.yaml file.
On iOS please make sure you've added in your Info.plist #
Feel free to edit descriptions according to your App
<key>NSCameraUsageDescription</key>
<string>This allows Tabby to take a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This allows Tabby to select a photo</string>
copied to clipboard
On Android please make sure you've added in your AndroidManifest.xml #
.....
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


<application ....>
<!-- Add a provider to be able to upload a user id photo -->
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths" />
</provider>
.....
copied to clipboard
Usage #

You should initialise Tabby SDK. We recommend to do it in main.dart file:

TabbySDK().setup(
withApiKey: '', // Put here your Api key, given by the Tabby integrations team
);
copied to clipboard

Create checkout session:

final mockPayload = Payment(
amount: '340',
currency: Currency.aed,
buyer: Buyer(
email: '[email protected]',
phone: '500000001',
name: 'Yazan Khalid',
dob: '2019-08-24',
),
buyerHistory: BuyerHistory(
loyaltyLevel: 0,
registeredSince: '2019-08-24T14:15:22Z',
wishlistCount: 0,
),
shippingAddress: const ShippingAddress(
city: 'string',
address: 'string',
zip: 'string',
),
order: Order(referenceId: 'id123', items: [
OrderItem(
title: 'Jersey',
description: 'Jersey',
quantity: 1,
unitPrice: '10.00',
referenceId: 'uuid',
productUrl: 'http://example.com',
category: 'clothes',
)
]),
orderHistory: [
OrderHistoryItem(
purchasedAt: '2019-08-24T14:15:22Z',
amount: '10.00',
paymentMethod: OrderHistoryItemPaymentMethod.card,
status: OrderHistoryItemStatus.newOne,
)
],
);

final session = await TabbySDK().createSession(TabbyCheckoutPayload(
merchantCode: 'ae', // pay attention, this might be different for different merchants
lang: Lang.en,
payment: mockPayload,
));
copied to clipboard

Open on app browser to show checkout:

void openInAppBrowser() {
TabbyWebView.showWebView(
context: context,
webUrl: session.availableProducts.installments.webUrl,
onResult: (WebViewResult resultCode) {
print(resultCode.name);
// TODO: Process resultCode
},
);
}
copied to clipboard
Also you can use TabbyWebView as inline widget on your page:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Tabby Checkout'),
),
body: TabbyWebView(
webUrl: session.availableProducts.installments.webUrl,
onResult: (WebViewResult resultCode) {
print(resultCode.name);
// TODO: Process resultCode
},
),
);
}
copied to clipboard
TabbyPresentationSnippet #




For show TabbyPresentationSnippet you can add as inline widget on your page:
TabbyPresentationSnippet(
price: mockPayload.amount,
currency: mockPayload.currency,
lang: lang,
)
copied to clipboard
Example #
You can also check the example project.