This is Chargebee’s React Native Software Development Kit (SDK). This SDK makes it efficient and comfortable to build a seamless subscription experience in your React Native App.
Post-installation, initialization, and authentication with the Chargebee site, this SDK will support the following process.
- Sync In-App Subscriptions with Chargebee: Integrate your App developed on React Native with Chargebee to process and track in-app subscriptions of the Apple App Store and Google Play Store on your Chargebee account. Thus you can create a single source of truth for subscriptions across Apple, Google, and Web stores. Use this if you are selling digital goods or services or are REQUIRED to use Apple's and Google's in-app purchases as per their app review guidelines (Apple and Google). For SDK methods to work, ensure that prerequisites (Apple and Google) are configured in Chargebee.
Note: If you are using the React native wrapper for performing web checkouts for physical goods, follow the set up for our 1.x SDK here.
The following requirements must be set up before installing Chargebee’s React Native SDK.
- Recommended React Native version 0.71.0 or higher. The minimum supported React Native version is 0.67.
- Requirements for Android https://github.com/chargebee/chargebee-android#requirements
- Requirements for iOS https://github.com/chargebee/chargebee-ios#requirements
To use Chargebee SDK in your React Native app, follow the below step.
yarn add @chargebee/react-native-chargebeeFor iOS, perform pod install after adding the SDK, to install the corresponding cocoapod package.
- For Android include the BILLING permission in your AndroidManifest.xml file.
<uses-permission android:name="com.android.vending.BILLING" />- For iOS enable In-App Purchase capability in Xcode by going to
Signing & Capabilitiesand adding theIn-App Purchasecapability.
This is an optional step that helps you to verify the SDK implementation using this example project. You can download or clone the example project via GitHub.
To run the example project, follow these steps.
-
Clone the repo - https://github.com/chargebee/chargebee-react-native.
-
To install the base dependencies, run
yarn bootstrapin the root directory -
To run the example app on Android, run
yarn example android. -
To run the example app on iOS, run
yarn example ios.
Prerequisites Before configuring the Chargebee ReactNative SDK for syncing In-App Purchases, follow these steps.
- iOS: Integrate the Apple App Store account with your Chargebee site. Android: Integrate Google Play Store account with your Chargebee site.
- iOS: On theSync Overview pageof theweb app, click View Keys and use the value of generated App ID as the SDK Key. Android: On the Sync Overview page of the web app, click Set up notifications and use the generated App ID value as the SDK Key.
- On the Chargebee site, navigate to Configure Chargebee > API Keys to create a new Publishable API Key or use an existing Publishable API Key.
Note: During the publishable API key creation you must allow read-only access to plans/items otherwise this key will not work in the following snippet. Read more.
Initialize the Chargebee ReactNative SDK with your Chargebee site, Publishable API Key, and SDK Keys by including the following snippets in your app delegate during app startup.
import Chargebee from '@chargebee/react-native-chargebee';
Chargebee.configure({
site: "SITE_NAME",
publishableApiKey: "API-KEY",
androidSdkKey: "Android SDK Key",
iOsSdkKey: "iOS SDK Key",
});This section describes how to use the SDK to integrate In-App Purchase information. For details on In-App Purchase, read more.
Every In-App Purchase subscription product that you configure in your account, can be configured in Chargebee as a Plan. Start by retrieving the IAP Product IDs from your Chargebee account using the following function.
import Chargebee from '@chargebee/react-native-chargebee';
const queryParams = new Map<string, string>();
queryParams.set('limit', '100');
try {
const result: Array<string> = await Chargebee.retrieveProductIdentifiers(queryParams);
console.log(result);
} catch (error) {
console.error(error);
}For example, query parameters can be passed as "limit": "100".
Retrieve the IAP Product objects with Product IDs using the following function.
import Chargebee, { Product } from '@chargebee/react-native-chargebee';
try {
const result: Array<Product> = await Chargebee.retrieveProducts(["Product ID from Google or Apple"]);
console.log(result);
} catch (error) {
console.error(error);
}You can present any of the above products to your users for them to purchase.
Pass the product and customer to the following function when your customer chooses the product to purchase.
id - Optional parameter. Although this is an optional parameter, we recommend passing it if available, before the user subscribes to your App. Passing this parameter ensures that the customer id in your database matches that in Chargebee. In case this parameter is not passed, then the id will be the same as the SubscriptionId created in Chargebee.
firstName - Optional parameter. Contains the first name of the customer.
lastName - Optional parameter. Contains the last name of the customer.
email - Optional parameter. Contains the email of the customer.
import Chargebee, {
Purchase,
Customer
} from '@chargebee/react-native-chargebee';
const customer: Customer = {
id: 'id',
firstName: 'fname',
lastName: 'lname',
email: '[email protected]',
};
try {
const result: Purchase = await Chargebee.purchaseProduct("product-id", customer);
console.log(result);
} catch (error) {
console.error(error);
}The above function will handle the purchase against Apple App Store or Google Play Store and send the in-app purchase receipt for server-side receipt verification to your Chargebee account. Use the Subscription ID returned by the above function to check for Subscription status on Chargebee and confirm the access - granted or denied.
The purchaseNonSubscriptionProduct function handles the one-time purchase against Apple App Store and Google Play Store and then sends the IAP receipt for server-side receipt verification to your Chargebee account. Post verification a Charge corresponding to this one-time purchase will be created in Chargebee. The Apple App Store supports three types of one-time purchases consumable, non_consumable and non_renewing_subscription. The Google Play Store supports two types of one-time purchases consumable and non_consumable.
import Chargebee, {
OneTimePurchase,
Customer
} from '@chargebee/react-native-chargebee';
const customer: Customer = {
id: 'id',
firstName: 'fname',
lastName: 'lname',
email: '[email protected]',
};
const productType = ProductType.NON_CONSUMABLE
try {
const result: OneTimePurchase = await Chargebee.purchaseNonSubscriptionProduct("product-id", productType, customer);
console.log(result);
} catch (error) {
console.error(error);
}The given code defines a function named purchaseNonSubscriptionProduct in the Chargebee class, which takes three input parameters:
product: An instance ofProductclass, representing the product to be purchased from the Apple App Store or Google Play Store.customer: Optional. An instance ofCBCustomerclass, initialized with the customer's details such ascustomerId,firstName,lastName, andemail.productType: An enum instance ofproductTypetype, indicating the type of product to be purchased. It can be eitherconsumable, ornon_consumable, ornon_renewing_subscription. Note thatnon_renewing_subscriptionis supported only in Apple App Store.
The function is called asynchronously, and it returns a Result object with a success or failure case, as mentioned are below.
- If the purchase is successful, it returns
OneTimePurchaseobject. which includes theinvoiceId,chargeId, andcustomerIdassociated with the purchase. - If there is any failure during the purchase, it returns error object that can be used to handle the error.
Use the method, retrieveSubscriptions to check the subscription status of a subscriber who has already purchased the product.
Use SubscriptionsRequest with query parameters- Subscription ID, Customer ID, or Status for checking the subscription status on Chargebee and confirming the access - *_granted or denied_*.
import Chargebee, { SubscriptionsRequest, Subscription } from '@chargebee/react-native-chargebee';
try {
const queryParams: SubscriptionsRequest = {customer_id : 'customer_id', subscription_id : 'subscription_id', status: 'active'}
const subscriptions: Subscription[] = await Chargebee.retrieveSubscriptions(queryParams);
console.log(subscriptions);
} catch (error) {
console.error(error);
}Use the Subscription ID for fetching the list of entitlements associated with the subscription.
const request: EntitlementsRequest = {
subscriptionId: 'subscription-id',
};
try {
const entitlements: Array<Entitlement> = await Chargebee.retrieveEntitlements(request);
} catch (error) {
console.log(error);
}Note: Entitlements feature is available only if your Chargebee site is on Product Catalog 2.0.
The restorePurchases() function helps to recover your app user's previous purchases without making them pay again. Sometimes, your app user may want to restore their previous purchases after switching to a new device or reinstalling your app. You can use the restorePurchases() function to allow your app user to easily restore their previous purchases.
To retrieve inactive purchases along with the active purchases for your app user, you can call the restorePurchases() function with the includeInactivePurchases parameter set to true. If you only want to restore active subscriptions, set the parameter to false. To associate the restored purchases to an existing customer, it is recommended to pass the necessary customer details, such as customerId, firstName, lastName, and email. This ensures that the customer details in your database match the customer details in Chargebee. If the customerId is not passed in the customer’s details, then the value of customerId will be the same as the SubscriptionId created in Chargebee.
Here is an example of how to use the restorePurchases() function in your code with the includeInactivePurchases parameter set to true.
import Chargebee, { RestoredSubscription } from '@chargebee/react-native-chargebee';
const customer: Customer = {
id: 'id',
firstName: 'fname',
lastName: 'lname',
email: '[email protected]',
};
try {
const restoredSubscriptions: RestoredSubscription[] = await Chargebee.restorePurchases(true, customer);
console.log(restoredSubscriptions);
} catch (error) {
console.error(error);
}The restorePurchases() function returns an array of subscription objects and each object holds three attributes subscriptionId, planId, and storeStatus. The value of storeStatus can be used to verify subscription status.
In the event of any errors/failures, the React native SDK will return an error object, which has the below format.
code - number. Chargebee Error code.
message - string. Error description.
userInfo - (ChargebeeErrorDetail) Optional Object. Contains additional error information.
The ChargebeeErrorDetail object is the below format:
apiErrorCode - string Optional. Error code from Chargebee backend.
httpStatusCode - number Optional. Http status code from Chargebee backend.
message - string Optional. Error description.
{
"code": "1000",
"message": "Sorry, we couldn't find the site abc-test",
"userInfo": {
"apiErrorCode": "site_not_found",
"httpStatusCode": 404,
"message": "Sorry, we couldn't find the site abc-test"
}
}These are the possible error codes and their descriptions:
| Error Code | Description |
|---|---|
| 1000 | INVALID_SDK_CONFIGURATION |
| 1001 | INVALID_CATALOG_VERSION |
| 1002 | CANNOT_MAKE_PAYMENTS |
| 1003 | NO_PRODUCT_TO_RESTORE |
| 1004 | INVALID_RESOURCE |
| 2001 | INVALID_OFFER |
| 2002 | INVALID_PURCHASE |
| 2003 | INVALID_SANDBOX |
| 2004 | NETWORK_ERROR |
| 2005 | PAYMENT_FAILED |
| 2006 | PAYMENT_NOT_ALLOWED |
| 2007 | PRODUCT_NOT_AVAILABLE |
| 2008 | PURCHASE_NOT_ALLOWED |
| 2009 | PURCHASE_CANCELLED |
| 2010 | STORE_PROBLEM |
| 2011 | INVALID_RECEIPT |
| 2012 | REQUEST_FAILED |
| 2013 | PRODUCT_PURCHASED_ALREADY |
| 3000 | SYSTEM_ERROR |
| 0 | UNKNOWN |
Synchronization of Apple App Store/Google Play Store Purchases with Chargebee through Receipt Validation
Receipt validation is crucial to ensure that the purchases made by your users are synced with Chargebee. In rare cases, when a purchase is made at the Apple App Store/Google Play Store, and the network connection goes off or the server was not responding, the purchase details may not be updated in Chargebee. In such cases, you can use a retry mechanism by following these steps:
- Save the product identifier in the cache once the purchase is initiated and clear the cache once the purchase/retry validation is successful.
- When the purchase is completed at Apple App Store/Google Play Store but not synced with Chargebee, retrieve the product from the cache and initiate validateReceipt() by passing
productIdandCustomeras input. This will validate the receipt and sync the purchase in Chargebee as a subscription.
Use the function available for the retry mechanism.
import Chargebee from '@chargebee/react-native-chargebee';
try {
const purchase = await Chargebee.validateReceipt(productId, customer)
} catch (error) {
console.log("error", error);
}import Chargebee, {
OneTimePurchase,
Customer
} from '@chargebee/react-native-chargebee';
const customer: Customer = {
id: 'id',
firstName: 'fname',
lastName: 'lname',
email: '[email protected]',
};
const productType = ProductType.NON_CONSUMABLE
try {
const result: OneTimePurchase = await Chargebee.validateReceiptForNonSubscriptions(productId, productType, customer)
} catch (error) {
console.log("error", error);
}See the contributing guide to learn how to contribute to the repository and the development workflow.
Chargebee is available under the MIT license. See the LICENSE file for more info.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent