Simple to use payment fragment using Stripe.
You need to provide an API endpoint for handling Stripe payment using post_url variable since handling payments requires a secret token from Stripe.
You can pay for the product by filling this form (provided by Stripe).
fragment = "stripe"
weight = 110
background = "secondary"
title = "Payment Fragment"
subtitle = "Doesn't work in demo"
post_url = "https://us-central1-syna-222118.cloudfunctions.net/function-1/charge"
stripe_token = "pk_test_36PckiAlsGm9KmHj9b034GAW"
product = "Example Product"
[[prices]]
text = "20.00$"
currency = "usd"
[fields.email]
text = "Your email address"
+++
You can pay for the product by filling this form (provided by Stripe).
You can pay for the product by filling this form (provided by Stripe).
fragment = "stripe"
weight = 120
background = "secondary"
title = "Payment Fragment with Multiple Choices"
subtitle = "Doesn't work in demo"
post_url = "https://us-central1-syna-222118.cloudfunctions.net/function-1/charge"
stripe_token = "pk_test_36PckiAlsGm9KmHj9b034GAW"
product = "Example Product"
[user_input]
default = "20.00"
currencies = ['usd', 'eur', 'cad'] # First currency will be used as default
[[prices]]
text = "20.00$"
currency = "usd"
[[prices]]
text = "30.00$"
currency = "usd"
[[prices]]
text = "50.00$"
currency = "usd"
[fields.email]
text = "Your email address"
+++
You can pay for the product by filling this form (provided by Stripe).
You can pay for the product by filling this form (provided by Stripe).
fragment = "stripe"
weight = 130
background = "secondary"
title = "Payment Fragment with Custom Value"
subtitle = "Doesn't work in demo"
post_url = "https://us-central1-syna-222118.cloudfunctions.net/function-1/charge"
stripe_token = "pk_test_36PckiAlsGm9KmHj9b034GAW"
product = "Example Product"
[user_input]
default = "20.00"
currencies = ['usd', 'eur', 'cad'] # First currency will be used as default
[fields.email]
text = "Your email address"
+++
You can pay for the product by filling this form (provided by Stripe).
Stripe fragment creates a form with a Stripe element inside, which is used to create payments for the users.
It requires a backend for creating the customer and charge for Stripe. An example can be found at here which can be deployed on Google Cloud Functions and works out of the box.
The use of a backend is also useful for saving other information from the user such as the product they selected (in case you are providing more than one products) or other metadata.
This fragment uses the Events api by default.
This event is published by the Pricing fragment. It can also be published by event urls.
type: string
If provided, this variable will override the preconfigured product variable and will be displayed on top of the form.
type: string
Payment metadata. This variable is not displayed to the user but will be sent to the server with the form data.
type: string
The price that will be charged to the user’s account. The value should follow the same rules as prices.text.
type: string
The currency in which the user will be charged. The value should follow the same rules as prices.currency.
type: string
Form data will be sent to this url. The url should point to an api which can handle Stripe’s charge customer api. An example is provided for more information.
type: string
Publishable API token from your Stripe account should
type: string
Your product’s name. This variable is optional.
type: object
type: string
Placeholder text shown in the email input.
type: array of objects
This variable is optional. If the array contains a single item, the form’s design will change to indicate that the price cannot be changed. If no values are provided, the form will fallback to user_input.
type: string
The price that will be charged to the user’s account. This variable is shown to the user as is but it will be converted to a number with no decimals when it is submitted. The value can be anything that can be formatted to a number, for example: 20.00$, 20, 19.95$/mo.
type: string
The currency in which the user will be charged. The value should be the three-letter ISO coded of the currency. You can find the appropriate ISO code here.
type: object
This variable will create a field and will display either the field itself or a button that will switch the form to editable mode. The field is displayed based on whether the prices field contains any items or not.
type: string
Default value in the editable price field. The value should follow the same rules as prices.text.
type: array of strings
The currency in which the user will be charged. The value should follow the same rules as prices.currency.
Global variables are documented as well and have been omitted from this page.
Highly customizable open source theme for Hugo based static websites
