Money Button Paywall

Paywalls allow you to reveal portions of content upon making a payment.

Slide the Money Button to learn how this paywall works.

Welcome to the secret club.

You're free to use the source code in this page.

Here's how to get started:

  1. Load the source code from this page into your favorite text editor.
  2. Open your web browser and navigate to the moneybutton.com Config page. You can make your own button there to ensure that you have the correct Bitcoin address and Button ID.
  3. Copy the button code and switch back to your text editor app and replace the <div class="money-button">. Make sure you don't include the <script> since it is already in the page at the end of the <body>.
  4. Add back in the attributes, data-on-payment and data-on-error:
    data-on-payment="handleSuccessfulPayment"
    data-on-error="handleFailedPayment"

Here's how this works:

  1. When the Money Button receives a successful payment, it calls handleSuccessfulPayment(payment).
  2. That function in turn calls unlockContent().
  3. unlockContent() adds a CSS class called, unlocked, to the unlockable DIV.
  4. The unlocked class is defined in CSS to use an animation to transition its opacity.
Note: The CSS uses both opacity and visibility properties becasue the opacity is necessary for the animation and the visibility is necessary for screen readers to skip the locked content.

Drop me a message on Twitter if you use the code so I can applaud your work.