Payment Form Embeds

This feature is in beta and available to all users.

Payment Form Embeds allow you to create secure custom payment pages and collect payments anywhere on the web. When a payment is processed, we will attempt to locate the client; otherwise, we will create an external client. Upon successful payment, an email is sent to the workplace administrator and clients. Then, a payment record is saved to your workplace's database.

Step 1

Add the script tag right before the closing body. Be sure to replace {{workplace_url}} with the URL of your workplace.

<script src="https://{{workplace_url}}.thriveific.app/stripe-payment-form.js"></script>

Once you can include your workplace JavaScript file you then can include these HTML elements anywhere on your website where you wish a form to appear.

Step 2

Copy and paste the HTML element on your page where you would like the form to be displayed. You can customize HTML classes of the fields to match your website's current forms or CSS styling. By default, we use Bootstrap CSS classes as it's the most popular CSS Framework.

Payment Form Markup

For customization, we recommend consulting with a web developer. You can always reach out to support for basic customization.

Below is an example of a payment form with the default attributes; you can modify or change these default values; the example below with all the data attributes are not required. If you do not specify the data attributes, the defaults will be used.

<div
   payment
   data-labels="true"
   data-labels-class="form-control-label"
   data-fields="first_name, last_name, email, phone_number, amount"
   data-input-div=class="col-12 form-group"
   data-input-class="form-control"
   data-email-placeholder="who@company.com"
   data-btn-div-class="col-12 form-group"
   data-btn-text="Process Payment"
   data-btn-class="btn btn-primary btn-block"
   data-msg-class="text-center"
   data-error-msg-color="#DF4759"
   data-success-msg-color="#42BA96"
   data-success-msg="Thank you, your payment was processed successfully."
   data-top-alert="true"
   data-top-alert-success-class="alert alert-success mb-2"
   data-top-alert-error-class="alert alert-danger mb-2"
   data-redirect="false"
>
</div>

Minimal Example

Below is a form example that will use the default options. Being we show the default options in the above example this form will have the exact same effect.

<div payment></div>

Payment Form Example

Attribute Features

data-redirect

If you want the user to be redirected to a payment page after submission, you can specify the URL with this attribute.

Options: "https://example.com", "false", "success_page"

Default false

If the attribute is set to success_page the user will be redirected to a success page.

Form Embeds