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>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!
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.
Got front end framework fatigue? Well we won't add to that. Our components work accross frameworks and even with vanilla html!
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]
})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>
...
}Coming Soon
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent