Skip to content

captaincole/open-paywall

Repository files navigation

Open Paywall - The First Open Source Cross-Framework Paywall Component

Built With Stencil

This project is currently in Alpha stages of development. Feel free to fork it and use as pleased.

Integrating a paywall into your website to get paid for your content should be easy. Unforutantly, payment provider systems do a great job at accepting payments, but a poor job of making it easy to integrate the paywall into your website. Their implementations hide behind fancy javascript that statically defines your payments.

Open Paywall makes it dead simple to integrate payments into your system. Add our script tag, and then include this simple html component in your website that can be built with any framework, or no framework at all.

<head>
  <script src="https://unpkg.com/[email protected]/dist/open-paywall.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
</head>
...
<body>
  <div class="premium-container">
    <open-paywall provider="stripe" cost="1500" access-token="your-token">
      <div class="premium-content">Your Permium Content Here!</div>
    </open-paywall>
  </div>
...
</body>
<script>
  document.addEventListener('paymentMade', (event) => {
    console.log('Payment Made');
    document.querySelector('.premium-content').style.display = 'block';
  });
<script>

How It Works

First you select your provider. At the moment we only handle stripe.js integrations but we plan on adding several more later on in the project.

Then you configure a certain price and product id for your purchase. The product ID could be related to a individual purchase item, or a group of items. In more advanced configurations you can set access based on Group Configurations

Add paywall either around your content, as a redirect link, or as a top level object. Then viola, you now have premium content!

Custom Backend Support -- Or Use Our Backend Templates

In the /backend directory, you can find a sample backend application that can be easily deployed to your favorite serverless environment (Lambda etc...) to handle transactions. We are working on providing a one click service that will launch this backend service preconfigured for you.

Cross Framework Component? How Is That Even Possible

Got front end framework fatigue? Well we won't add to that. Our components work accross frameworks and even with vanilla html!

Integrate with Angular

It becomes quite simple to integrate with Angular. First, include the script tag in your index.html file

<head>
  <script src="https://unpkg.com/[email protected]/dist/open-paywall.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Then, in each module you intend to use your paywall, add the CUSTOM_ELEMENTS_SCHEMA to the schemas modules, like below

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Integrate with React

Just include the two script tages into your index.html file in the /public folder of your react app. Then, integerate your paywall component in any render function.

<!-- public/index.html -->
<head>
  <script src="https://unpkg.com/[email protected]/dist/open-paywall.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
</head>
// my-component.js
render() {
...
  <open-paywall provider="stripe" cost="1500" access-token="your-token">
    <div class="premium-content">Your Permium Content Here!</div>
  </open-paywall>
...
}

For Developers

Coming Soon