Stripe

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.

Payment Fragment

Doesn’t work in demo

You can pay for the product by filling this form (provided by Stripe).

Code

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).

Payment Fragment with Multiple Choices

Doesn’t work in demo

You can pay for the product by filling this form (provided by Stripe).

Example Product

20.00$ 30.00$ 50.00$

Code

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).

Payment Fragment with Custom Value

Doesn’t work in demo

You can pay for the product by filling this form (provided by Stripe).

Example Product

Code

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).

Documentation

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.

Events

This fragment uses the Events api by default.

Subscribers

pricing:change

This event is published by the Pricing fragment. It can also be published by event urls.

product

type: string

If provided, this variable will override the preconfigured product variable and will be displayed on top of the form.

description

type: string

Payment metadata. This variable is not displayed to the user but will be sent to the server with the form data.

price

type: string

The price that will be charged to the user’s account. The value should follow the same rules as prices.text.

currency

type: string

The currency in which the user will be charged. The value should follow the same rules as prices.currency.

Variables

post_url

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.

stripe_token

type: string

Publishable API token from your Stripe account should

product

type: string

Your product’s name. This variable is optional.

fields.email

type: object

fields.email.text

type: string

Placeholder text shown in the email input.

prices

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.

prices.text

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.

prices.currency

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.

user_input

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.

user_input.default

type: string

Default value in the editable price field. The value should follow the same rules as prices.text.

user_input.currencies

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.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites