Skip to content

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

License

Notifications You must be signed in to change notification settings

iaphub/react-native-iaphub-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

62 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

IAPHUB

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published