Skip to content
Web Monetization logo Web Monetization
GitHub

Pay-per-article tool

Use the Pay per Article tool to allow your visitors to make a one-time payment to unlock a single article or page on your site.

The content remains accessible to paying visitors even if they leave the page or close their browser. However, they may be asked to enter their wallet address so that the tool can confirm access rights.

Before you begin

Section titled “Before you begin”
  • Your visitor must have a wallet address with a compatible wallet to make a payment.
  • Only the address connected to the paywall will receive the payment, even if your site is monetized with multiple wallet addresses.
  • If your website uses Content Security Policy (CSP) headers, there are certain directives you must add to support the publisher tools embed script.

Create your paywall

Section titled “Create your paywall”
  1. Enter your wallet address.
    Blank wallet address field and continue button
  2. Click Continue.
  3. Set the one-time payment price of your content. This price will be shown on all pages using the paywall.
    Amount field showing a default amount of $2 USD
  4. Select how much of a page should remain visible when the paywall appears.Selection bar showing options for 25, 50, 75, and 100% coverage
  5. Enter the number of seconds, from 0 to 15, to wait before showing the paywall.
  6. Expand the Content section, then enter a title for the paywall or choose from the suggested options.Panel showing suggested titles and a field to enter a custom title
  7. Enter a subtitle, use the default, or delete the text entirely if you don’t want a subtitle to appear.
  8. Enter the text to display on the payment button, then click Done.Pay button label field showing unlock article as the default text
  9. Expand the Appearance section, then select the font and font size to use on the paywall.Panel showing the font family drop-down menu and a size slider
  10. Select the colors to use for the background, text, and theme.Panel showing background, text, and theme color previews. Selecting a preview opens a menu with a paint can icon and a set of preselected colors to choose fromClick the paint can icon to enter a hex value or use the color picker. The color picker tool with a field for the hex value at the bottom
  11. Select the payment button’s corner radius.Panel showing paywall button corner radius options of no, light, and pill rounding
  12. Review your changes in the preview panel. Preview panel showing how the paywall will appear to non-paying visitors

Generate your script

Section titled “Generate your script”
  1. Click Save and generate script.
    The save edits only and the save and generate script buttons side by side A wallet confirmation prompt appears.
    Confirmation prompt showing wallet address and confirm button
  2. Click Confirm. You’re directed to your wallet provider to sign in and confirm your ownership of the wallet address. After confirmation, you’ll return to the Pay per Article tool page.
  3. Copy the script that appears in the overlaid screen.
    Example script
    <script
      id="wmt-paywall-init-script"
      type="module"
      src="https://tools-cdn.webmonetization.org/paywall.js"
      data-wallet-address="https://walletprovider.com/MyWallet"
      data-tag="version1"
    ></script>
  4. Add the script to the <body> of each page you want to lock.
  5. Go to your site and check that the paywall appears correctly.

Set a different price per page

Section titled “Set a different price per page”

By default, each page that shows the paywall displays the amount entered during setup.

If you want a page to request a different amount, you can add the data-price attribute to that page’s script.

Pay per Article script with custom price
<script
  id="wmt-paywall-init-script"
  type="module"
  src="https://tools-cdn.webmonetization.org/paywall.js"
  data-price="1.57"
  data-wallet-address="https://walletprovider.com/MyWallet"
  data-tag="version1"
></script>

The price is fixed when the page loads, so a malicious actor cannot change the price.

Change your paywall configuration

Section titled “Change your paywall configuration”
  1. Enter your wallet address.
    Blank wallet address field and continue button
  2. Click Continue. If the confirmation prompt appears, you must first confirm your ownership of the wallet address.
  3. Make your changes, then click Save edits only. Your script remains the same. There’s no need to update your site’s code.
  4. Refresh a page on your site that uses the paywall script to verify your changes are live.

Content Security Policy (CSP) requirements

Section titled “Content Security Policy (CSP) requirements”

If your website uses Content Security Policy headers, you must add the following directives to allow the publisher tools embed script to work:

DirectiveValueDescription
script-srchttps://tools-cdn.webmonetization.orgAllows loading interactive tool script from the CDN
connect-srchttps://tools-api.webmonetization.orgAllows fetching configuration data from the API
img-srcdata: https://tools-cdn.webmonetization.orgAllows loading logos/thumbnails and inline SVG icons
style-srchttps://tools-cdn.webmonetization.orgAllows loading CSS files and dynamic theme styling (custom colors/fonts)
font-srchttps://tools-cdn.webmonetization.orgAllows loading custom web fonts

Pay per Article tool