Stripe Examples For ApostropheCMS

These modules add client-side integration examples for Stripe packages to page types in ApostropheCMS. One example primarily uses Alpine.js, while the other uses HTMX.

The Stripe-ApostropheCMS packages used in these examples are:

• apostrophe-stripe-checkout
• apostrophe-stripe-products

Alpine.js example screenshots

HTMX example screenshots

Installation

Use your preferred package manager to install the following packages:

npm install stripe-examples@npm:@stepanjakl/apostrophe-stripe-examples

npm install stripe-checkout@npm:@stepanjakl/apostrophe-stripe-checkout

npm install stripe-products@npm:@stepanjakl/apostrophe-stripe-products

npm install read-only-field@npm:@stepanjakl/apostrophe-read-only-field

Usage

First, add installed modules to your configuration in the app.js root file:

require('apostrophe')({
  shortName: 'project-name',
  modules: {
    // Custom fields
    'read-only-field': {},

    // Stripe Checkout
    'stripe-checkout': {},
    'stripe-checkout/session': {},

    // Stripe Products
    'stripe-products': {},
    'stripe-products/product': {},

    // Stripe Examples
    'stripe-examples': {},
    'stripe-examples/example-alpine-page': {},
    'stripe-examples/example-htmx-page': {}
  }
});

Then, set global variables inside the .env file. It's important to set the STRIPE_TEST_MODE variable to anything other than false to enable test mode.

PORT='4000'
APOS_BASE_URL='http://localhost:4000'
APOS_RELEASE_ID='a4-boilerplate'
APOS_MONGODB_URI='mongodb://localhost:27017/a4-boilerplate'

STRIPE_KEY='sk_test_xyz'
STRIPE_TEST_MODE='false'
STRIPE_DASHBOARD_BASE_URL='https://dashboard.stripe.com'
STRIPE_WEBHOOK_ENDPOINT_SECRET='whsec_xyz'

Read more on how to create a secret Stripe API key

The webhook signing secret is generated and displayed on the initial output of the listen command - more on this below.

Lastly, to activate the example page types, integrate them into the core module configuration located at modules/@apostrophecms/page/index.js:

module.exports = {
  options: {
    types: [
      {
        name: 'default-page',
        label: 'Default'
      },
      {
        name: '@apostrophecms/home-page',
        label: 'Home'
      },
      {
        name: 'stripe-examples/example-alpine-page',
        label: 'Stripe - Example with Alpine.js'
      },
      {
        name: 'stripe-examples/example-htmx-page',
        label: 'Stripe - Example with </> htmx'
      }
    ]
  }
};