@ta-interaktiv/react-paywall

Tamedia Paywall Integration as React Component

A way to integrate the Tamedia paywall into your projects, in case you have to.

Installation

yarn add @ta-interaktiv/react-paywall

Usage

This component is already integrated into @ta-interaktiv/react-masthead and enabled by default. As long as you use the masthead as part of your project, you should be good to go. In other cases, refer to the example below.

Example outside of Masthead

import * as React from 'react'
import { Paywall as TamediaPaywall } from '@ta-interaktiv/react-paywall'
import { json } from 'd3-fetch'

export class MyComponent extends React.Component {
  state = {
    paywallConfiguration: {},
    paywallStatus: 0
  }

  render() {
    return (
      <div>
        {this.state.paywallStatus > 0
        && Object.entries(this.state.paywallConfiguration).length > 0
        && (<TamediaPaywall
            isEnabled={true}
            paywallConfiguration={this.state.paywallConfiguration}
            paywallStatus={this.state.paywallStatus}
          />)
        }
      </div>
    )
  }

  componentDidMount() {
    // Get data from the Newsnet API, likely using d3-fetch
    // and set it using setState

    json(`//api-endpoint`).then(data => {
      this.setState({
        paywallConfiguration: data.paywall,
        paywallStatus: data.configs.paywall_status
      })
    }
  }
}

In-App Behaviour

This component tracks the URL of the project. In case the appwebview query parameter is present, the component will not render the paywall, is in this case this should be handled by the app itself.

Documentation

Can be found here.