Lay a foundation with The Payment Block

The Payment Block enables you to collect contributions from your community. Accept donations, ticket purchases, and merchandise sales without needing to build your own form.

Live preview

Try it out. and submit the form.

Block builder

Use the form below to generate the HTML snippet for a Payment Block customized to fit your use case.

Required Settings

Note: This is a demo API key. If you’d like to use a live key, access yours in Admin. If you don’t have an account, sign up for free.

Options

The id attribute of an element in your HTML where the Block will render as a child.

Makes the form multi-stepped.
Default: Disabled

Allow users to create monthly recurring subscriptions.
Default: Disabled

Allow contributors to cover processing fees
Default: Show and opt-in

The donation amounts that will show up in the selectable buttons on the form, entered as a comma separated list in dollars.
Default: “3, 5, 10, 20, 50, 100”

The amount that should be chosen by default. Can be one of the preset options or any other dollar amount.

If the form should have a fixed amount and not allow the user to choose a different amount. This doesn't work with Preset or Initial amounts.

The text on the form submit button.
Default: "Donate"

The message displayed on a successful payment.
Default: "Thank you for your contribution."

The description of the payment, will be displayed in the header. HTML allowed.

A 6 or 3 digit hex color that will be applied as the form accent color.
Default: #1d56c6.

Display required “Occupation” and “Employer” fields.
Default: Disabled

The source of the supporter's payment, e.g. newsletter.
Default: "gw-payments-block"

Abstract shapes graphic Using The Payment Block

Include the Payment Block script element in any HTML page before the closing </body> tag. The data-target-id attribute can match any valid element id. This will be the parent element of the Block. Set your Groundwork API key as the value of the data-gw-api-key attribute. Don’t forget to verify you are using an API key from your Live environment before accepting payments.

Include the Payment Block script element in any HTML page.

<!doctype html>
  <html>
  <body>
    <h1>Make a Payment</h1>

    <!--Copy from here-->
    <div id="payment-block"></div>
    <script src="https://cdn.thegroundwork.com/payments-block/1.8.1/payments.min.js"
      data-gw-api-key=""
      data-target-id="payment-block"
      data-stepped="true"
      data-allow-subscriptions="true"></script>
    <!--To here-->
  </body>
  </html>
  

Note. Take care to only accept payments on web pages that use HTTPS. Doing so allows your community members to submit payment data without the risk of their information being stolen.

If you’re having trouble implementing a Block, don’t hesitate to reach out to support@timshel.com.