iaphub / react-native-iaphub-ui

Plug & Play react native component to sell in-app purchases, includes a beautiful Paywall with the content translated in 6 languages

As you know we're on a mission to make in-app purchase as easy as possible.
The react-native-iaphub is already doing that pretty well but we've decided to make things even easier!

Our React Native component react-native-iaphub-ui is providing all the UI necessary to sell in-app purchases!
You'll be able to display a beautiful paywall that is highly customizable and includes (so far) the translations in 6 languages (English, Spanish, French, German, Portuguese, Japanese).

Install component

npm install react-native-iaphub-ui --save
npm install react-native-iaphub --save // Peer dependency

Initialize IAPHUB

In order to initialize the IAPHUB SDK, you must render the IaphubDataProvider component in the main tree on your app (it should be executed when starting the app).

import {IaphubDataProvider} from 'react-native-iaphub-ui';

<IaphubDataProvider
  appId="5e4890f6c61fc971cf46db4d"
  apiKey="SDp7aY220RtzZrsvRpp4BGFm6qZqNkNf"
  lang="en"
  userId="9b30a87b-40c2-4435-8a0a-265145f2870f"
  allowAnonymousPurchase={false}>
    {/* App Code */}
</IaphubDataProvider>

Properties of the component:

Prop	Type	Description
appId	String	The app id is available on the settings page of your app
apiKey	String	The (client) api key is available on the settings page of your app
lang	String	Language ISO code (Possible values: 'en', 'es', 'de', 'fr', 'pt', 'jp')
userId	Boolean	Optional, user ID of the logged user
allowAnonymousPurchase	Boolean	Optional, if you want to allow purchases when the user isn't logged in (false by default)
userTags	Object	Optional, user tags
deviceParams	Object	Optional, device params
i18n	Object	Optional, i18n data (if you want to provide your own translations)
alert	Function	Optional, customize alert (React native Alert.alert by default)
showBuySuccessAlert	Boolean	Optional, show alert when a purchase is successful (true by default)
showBuyErrorAlert	Boolean	Optional, show alert when a purchase fails (true by default)
onError	Function	Optional, event triggered when an error occurs (err provided as argument)
onPurchase	Function	Optional, event triggered when a purchase is successful (transaction provided as argument)

Access IAPHUB data

Whenever it is needed, you can access the IAPHUB data (such as the active subscriptions or the products for sale) by using the IaphubDataConsumer component.
The component requires a callback for its children that will be executed with the IAPHUB data.
The component will also be automatically re-rendered everytime the data is updated.

import {IaphubDataConsumer} from 'react-native-iaphub-ui';

<IaphubDataConsumer>
  {(iaphubData) => /* Render here anything that needs the IAPHUB data */}
</IaphubDataConsumer>

Render paywall

You can render at any time a beautiful paywall by using the Paywall component.
The component requires the IAPHUB data. You should use the IaphubDataConsumer component in order to get it.

import {IaphubDataConsumer, Paywall} from 'react-native-iaphub-ui';

<IaphubDataConsumer>
  {(iaphubData) => <Paywall {...paywallProps} />}
</IaphubDataConsumer>

Preview of the component (the image and title isn't part of the component):

Properties of the component

Prop	Type	Description
style	Object	Style
isLoading	Boolean	Display a spinner when the data is loading
activeProducts	Array	List of active products
productsForSale	Array	List of products for sale
err	Object/String	Customize the error message when the list of products for sale is empty by providing the error code
lang	String	Language ISO code (Possible values: 'en', 'es', 'fr', 'pt', 'jp') ('en' by default)
i18n	Object	i18n data (if you want to provide your own translations)
defaultSelectedProductIndex	Number	Index of the product selected by default (0 by default)
theme	Object	Theme object to customize the styles of the components (see style customization below)
display	String	Orientation of the products for sale list (Possible values: 'horizontal', 'vertical') ('horizontal' by default)
alert	Function	Customize alert (React native Alert.alert by default)
showBuySuccessAlert	Boolean	Show alert when a purchase is successful (true by default)
showBuyErrorAlert	Boolean	Show alert when a purchase fails (true by default)
showRestoreSuccessAlert	Boolean	Show alert when a restore is successful (true by default)
showRestoreEmptyAlert	Boolean	Show alert when a restore didn't detect any transactions to restore (true by default)
showRestoreErrorAlert	Boolean	Show alert when a restore fails (true by default)
onBuyStart	Function	Event triggered when the user clicks on the buy button (product provided as argument)
onBuyEnd	Function	Event triggered when the user purchase is done (err, transaction provided as arguments)
onRestoreStart	Function	Event triggered when the user clicks on the restore button
onRestoreEnd	Function	Event triggered when the user restore is done
onShowManageSubscriptions	Function	Event triggered when the user clicks on the button to manage the subscriptions
onRefreshProducts	Function	Event triggered when the user clicks on the button to refresh the products (when the loading previously failed)

Render paywall optimized for a subscription group

A subscription group is needed when you offer the same subscription with different durations.
Since it is a pretty common practice we've developped a separate PaywallSubscriptionGroup component optimized to display a subscription group.

⚠ If the data provided doesn't have one (and only) subscription group, an error message will be displayed.

import {IaphubDataConsumer, PaywallSubscriptionGroup} from 'react-native-iaphub-ui';

<IaphubDataConsumer>
  {(iaphubData) => <PaywallSubscriptionGroup {...paywallProps} />}
</IaphubDataConsumer>

Preview of the component (the image and title isn't part of the component):

Properties of the component

The component has the same properties as the Paywall component.

Customize the paywall's style

You can customize any style of the component by using the theme property.
You simply have to provide an object containing the name and style of the component you're looking to customize.
You can find all the components and styles in our codebase here.

<Paywall
  theme={{
    Product: {
      root: {
        backgroundColor: 'red'
      }
    }
  }}
/>

Advanced paywall customization

If customizing the style isn't enough, you can easily replace any component of the paywall.
We recommend copying the component you're looking to replace in our codebase first and then modify it as much as you want.
The PaywallSubscriptionGroup is a good example of how we've customized the Paywall component to optimize it for a subscription group.

Example modifying the product title component:

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import withStyles from 'react-native-iaphub-ui/src/util/with-styles';
import style from 'react-native-iaphub-ui/src/util/style';

class CustomProductTitle extends Component {

  render() {
    var {product, isSelected, styles} = this.props;

    return (
      <Text style={[styles.root, style(styles.selectedRoot, isSelected)]}>
        {product.localizedTitle}
      </Text>
    );
  }

}

const styles = StyleSheet.create({
  // Root style
  root: {
    fontSize: 22,
    color: 'black',
    marginBottom: 10,
    textAlign: 'left'
  },
  // Root style when the product is selected
  selectedRoot: {
    color: 'white'
  }
});

export default withStyles(styles, 'ProductTitle')(CustomProductTitle);

import CustomProductTitle from './custom-product-title';

<Paywal {...props} ProductTitle={CustomProductTitle}/>

Translations

We're currently supporting 6 languages (English, Spanish, French, German, Portuguese, Japanese), if you need another language please open a new issue and we'll do our best to implement the language you've requested.