Aeropage Documentation

Embedding Content

Stripe Pricing

Embed a Stripe Pricing table in your Aeropage project.

⁠

Create the Pricing Table

In Stripe follow the user interface to make a new pricing table.

Stripe Test Mode

Before you begin, consider whether you should be using stripe’s test mode!

⁠

Create a Pricing Table

Setup your pricing table with the products and configuration you want to use.

⁠

Stripe Documentation

⁠

Copy the code

Once completed, you can copy the code from the stripe interface. Don’t worry about the publishable key being visible, its intended to be public and doesn’t give any special access.

⁠

Checkout as Guest

If you don’t need to connect each checkout with an existing member, or you want to create members after they have checked out - you can use this option.

⁠

Embed in your Website

Copy the embed code from Stripe and add it to an embed code component.

Checkout with Membership

If your system lets people signup for free, then add a subscription later - you will need to make sure the checkout process is tied back to the member who started the checkout. In other words you want to make sure people are logged in and their client reference id exists before sending them to checkout.

Embed in your Website

Copy the embed code from Stripe and add it to an embed code component, then edit the code to make a few important changes.

Add an embed component and paste the code.

Add two extra parameters : client-reference-id and customer-email

Insert variables in the quotation marks as shown below.

⁠

Client Reference ID

To track subscriptions, you should ideally be using a client reference ID to connect which subscription is for which user - in most cases you would have a user login or signup before letting them complete checkout.

⁠

The client reference id connects subscriptions to the person who created them.

Customer Email

When someone checks out with stripe, they will be able to enter any email even if it doesn’t match the one you use in Airtable. If you have access to the user’s email in your system (they have logged in) it’s best to prefill it using the customer email parameter just in case something goes wrong with your client reference id.

⁠

The customer email makes sure they dont use a different email at checkout.

Example with placeholders

This is how your script would end up looking, with the copied values from stripe and the variables passed from your Aeropage users.

<stripe-pricing-table pricing-table-id="TABLE_ID"

publishable-key="PUBLIC_KEY"

client-reference-id="USER_RECORD_ID"

customer-email="USER_EMAIL">

</stripe-pricing-table>

Make sure you have selected a customer in the editor before testing.

Login Overlay

If someone checks out before they login - the client reference id and email values will be empty. To prevent this, it’s a good idea to overlay your pricing table with a frame that stops people clicking the buttons unless they’re logged in.

Login Block

You can add a login block to your page, its just a center modal block with a login component.

Add Frame

Create a frame in the block where your pricing table is, then change it to free position and max height and width.

Create Condition

Make a user condition - if the current user is a member of [your customers] hide the overlay.

Completed Checkouts

When a checkout is completed in Stripe, you will want to notify your database immediately so you can deliver the product or service the user paid for as soon as possible.