Reduxable-kiwi-subscription NPM

reduxable-kiwi-subscription

Reduxable for Kiwi and Google Play subscription

Install

$ yarn add reduxable-kiwi-subscription

Also you'll need two install and link other peer dependencies.

Android

iOS

react-native-in-app-utils

Usage

First define and configure the reduxable

// store.js
import { SubscriptionReduxable } from 'reduxable-kiwi-subscription';

const config = {
  playStoreSku: 'purchase-item-id',
  iosProductId: 'com.your.product.id',
  handlers: {
    onStepChange: data => console.warn('onStepChange', data),
    onFlowClose: () => console.warn('onFlowClose'),
    onFlowStart: () => console.warn('onFlowStart'),
    onFlowFinish: () => console.warn('onFlowFinish'),
    onUnsubscribe: () => console.warn('onUnsubscribe'),
    onFirstTimeSubscriptionWithSMS: () => console.warn('onFirstTimeSubscriptionWithSMS'),
    onRestoreSubscriptionWithSMS: () => console.warn('onRestoreSubscriptionWithSMS'),
    onSubscriptionWithPlayStore: () => console.warn('onSubscriptionWithPlayStore'),
    onShowLegalsRequest: (title, url, htmlSelector) => console.warn('onShowLegalsRequest'),
  },
  translations: {
    es: {
      unsubscribeStep: {
        headerText: '(ES) Unsubscribe header',
      }
    },
    pt: {
      unsubscribeStep: {
        headerText: '(PT) Unsubscribe header',
      }
    }
  }
}

export const subscription = new SubscriptionReduxable(config);

// In your reducers import `combineReducers` and `createStore` from `reduxable` instead of `redux`

createStore(combineReducers({
  ...,
  subscription,
}))

Then in you view use the SubscriptionModal component, assuming this is already connected to the store and wrapped with <Provider> component.

// MySubscriptionFlow.js
import { SubscriptionModal } from 'reduxable-kiwi-subscription';
import { subscription } from '@store';

class Example extends Component {
  componentDidMount() {
    subscription.startFlow();
    // or also
    // subscription.startCodeRedeemFlow()
  }

  render() {
    const colors = {
      modalOuterBackground: 'black',
      modalInnerBackground: 'white',
      background: 'white',
      text: 'black',
      buttonBackground: 'red',
      buttonText: 'white',
      inputUnderline: 'red',
    };

    const modalHeader = <View style={{backgroundColor: 'red', height: 70}} />
    const modalBackground = <View style={{backgroundColor: '#EEEEEE', flex: 1 }} />
    
    const benefits = [
      '- Get the best news',
      '- See cool videos',
      '- Know more about your heroes'
    ]

    return (
      <View>
        <SubscriptionModal
          modalHeader={modalHeader}
          modalBackground={modalBackground}
          colors={colors}
          subscription={subscription}
          benefits={benefits}
          fontFamily="monospace" // optional
          renderButton={(text, onPress) => <Button title={text} onPress={onPress} />} // optional
          renderBenefitsContent={() => <View />} // optional 
        /> 
      </View>
    );
  }
}

Methods

checkSubscription()

To check if a user is subscribed you should call to checkSubscription(). For iOS you must pass a receiptValidator function like following.

const iosReceiptValidator = async (productId, receipt) {
  // Send `productId` and `receipt` to a server for receipt validation
  // The server must return a JSON like { "valid": true | false }
}

const isSubscribed = await subscription.checkSubscription(iosReceiptValidator)