Navbar

Overview

These docs will guide you through integrating with Plasso and demonstrate how to use Plasso’s products.
The docs are organized into two main groups:

In addition to these docs, you can also find helpful information about integrating with Plasso in our Help Center.

Flexkit

Introduction

Flexkit gives you the power to write and manage your own UI. Flexkit will handle all the hard parts for you: payments, subscriptions, authentication, etc.

Flexkit is not an embeddable form placed onto your site that you then have to tweak and customize. Instead, Flexkit works with your own code on your own site.

This gives you the freedom to completely own and control your UI. You don’t even have to write any code if you don’t want to. Flexkit only requires HTML to work. In most cases you’ll just be writing HTML and CSS 👍.

Watch this in depth video to help you get started: video coming soon

Setup

To setup Flexkit you’ll just need to add a <form> to your page and then add our custom Flexkit names and/or attributes. That’s it. No Javascript or any other coding required.

Copy/paste this snippet into your HTML just before the ending </body> tag.

<script src='https://plasso.com/embed/flexkit.1.1.js'></script>
<script>
  Plasso.Flexkit.setup();
</script>

To get Flexkit onto your page you’ll need to copy/paste the Flexkit code snippet into your page.

Here is an outline of the steps you need to take to get Flexkit working on your website:

  1. Add a HTML form to your page and add any Flexkit attributes necessary.
  2. Copy/paste the Flexkit <script> tag (code snippet) into your page.

After you’ve done those steps you’ll be all setup and ready to go with Flexkit. Then just follow the rest of these docs to build with Flexkit!

Forms

You can initialize your forms with Flexkit by adding the data-pl-form-type attribute to the form elements on your page. Flexkit will find those forms and then process them.

Flexkit will also add HTML class names to the form and elements within it at different times to help you better style your forms with CSS. Here is a list of class names and when they get added to the forms:

Class Name Description
pl-pending Added to the form element while a form is processing. Added when the form has been submitted. Removed when a form is finished processing. Form submission is disabled while this class is present.
pl-error Added to the form element when a form has finished processing and resulted in an error.
Also added to any form field element (i.e. <input>) if it is the cause of the error. Removed from field elements after they’ve been updated by the user.
Also added to the data-pl-message element.
pl-success Added to the form element when a form has finished processing and resulted in a success.
Also added to the data-pl-message element.
pl-cardtype-* Added to the parent element of a card number input field (pl-card-number) as numbers are entered by the user. Possible values are: visa, mastercard, amex, discover, dinersclub, unionpay, jcb, maestro, visaelectron, forbrugsforeningen, dankort.
Replace the * with a possible value. Final class example: pl-cardtype-visa

Use these classes to style your forms with CSS. For example, you can make your submit button have a animated spinner in it when the form has the pl-pending class, or make the error message text appear red when pl-error is present, etc.

Custom Success Message

<form data-pl-form-type="order" data-pl-space-id="space_id_here" data-pl-success-message="Thanks for buying!">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <button type="submit">Buy Now</button>
  <div data-pl-message></div>
</form>

If a form process successfully completes, Flexkit will put a success message into the data-pl-message element. You can optionally write your own success message using the data-pl-success-message attribute, which will override the default Flexkit message. You cannot override error messages.

Forwarding

<form data-pl-form-type="order" data-pl-space-id="space_id_here" data-pl-forward-url="http://mysite.com">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <button type="submit">Get Now</button>
  <div data-pl-message></div>
</form>

Submitting a form doesn’t change the browser’s state by default. If you’d like to reload the window after a form submission completes with a success status type, add the data-pl-reload-window attribute to the element. If instead you’d like to forward the user to a specific page after a form submission completes with a success status type, simply add a value to the data-pl-forward-url attribute to forward the user to a specified URL.

Orders

You can setup your forms for people to order Products, Plans or a combination of both. Every order made will be visible inside the Plasso dashboard. Customers will receive a receipt for their order as well.

Check out more live Flexkit examples, including more code samples.

Accepted Parameters:

For custom Data Items ( pl-data-* ), replace the * with the id of the Data Item.
Example: <input type="text" name="pl-data-abc123">

If pl-card-holders-name is not passed, pl-name will automatically be used as the card holder’s name instead.

Products

Products are items you can sell on a one-off basis. You create products inside the Plasso dashboard. After creating a product(s), you’ll need to grab its id and use it in your order forms.

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <button type="submit">Buy Now</button>
  <div data-pl-message></div>
</form>

To add a product to a form, add a form element (like an <input>) with the name pl-product-ids. You can have multiple pl-product-ids in a single form. Just be sure to follow HTML conventions and add a [] to the end of the pl-product-ids name. This will turn it into an array, enabling you to send over multiple product ids: name="pl-product-ids[]"

<input type="hidden" name="pl-product-ids[]" value="my_product_id">
<input type="hidden" name="pl-product-ids[]" value="new_tshirt">
<input type="hidden" name="pl-product-ids[]" value="conf_ticket">

To add multiple products to a form, you could simply add each one to the form as a hidden <input> field.

<label>
  <span>Donation</span>
  <span>$50</span>
  <input type="checkbox" name="pl-product-ids[]" value="my_product_id">
  <span>Select</span>
</label><label>
  <span>T-Shirt</span>
  <span>$28</span>
  <input type="checkbox" name="pl-product-ids[]" value="new_tshirt">
  <span>Select</span>
</label><label>
  <span>Album</span>
  <span>$10</span>
  <input type="checkbox" name="pl-product-ids[]" value="conf_ticket">
  <span>Select</span>
</label>

Below is an example of how you can use checkbox inputs with just a bit of CSS styling to make your order form look great without having to write any Javascript code. The behavior you see is not using any Javascript or complex CSS, it’s just standard HTML behavior.


The checkbox inputs have been left visible so you can see the behavior. If you’d like, you could hide those checkbox inputs with the following CSS:
input[type="checkbox"]{ display:none; }

Price and Quantity

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Price: <input type="text" name="pl-amounts[]" /></label>
  <label>Quantity: <input type="text" name="pl-quantities[]" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <button type="submit">Get Now</button>
  <div data-pl-message></div>
</form>

If you want to let the customer set their own price (amount) for a product just add an element with the name pl-amounts[]. You can optionally add a data-pl-min-amount attribute to the price element with the value being the minimum amount, example: 5.00.

Just like pl-product-ids[] you’ll need to make this an array so we can know which price goes with which product. Flexkit will match each price with each product id based on location in the array. If, for example, you are sending three product ids and three amountss, you’ll need to make sure that their values match up correctly:

pl-amounts[]: 12.99, 50, 36.30
pl-product-ids[]: cool_shirt, donation_plus, candy_bar

You can also set (or let the customer set) a quantity for each product. You’ll need to follow the same method as prices above and use the name pl-quantities[]:

pl-quantities[]: 2, 1, 28
pl-amounts[]: 12.99, 50, 36.30
pl-product-ids[]: cool_shirt, donation_plus, candy_bar

Additionally you (or the customer) can send specific product Variants with each product. You’ll need to follow the same method as above and use the name pl-variants[]:

pl-variants[][abc123]: 002_red_shirt
pl-quantities[]: 2, 1, 28
pl-amounts[]: 12.99, 50, 36.30
pl-product-ids[]: cool_shirt, donation_plus, candy_bar

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Price: <input type="text" name="pl-amounts[0]" /></label>
  <label>Quantity: <input type="text" name="pl-quantities[0]" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-product-ids[0]" value="my_product_id" />
  <input type="hidden" name="pl-variants[0][abc123]" value="002_red_shirt" />
  <input type="hidden" name="pl-variants[0][def456]" value="002_large" />
  <input type="hidden" name="pl-variants[0][ghi789]" value="004_cotton" />
  <button type="submit">Get Now</button>
  <div data-pl-message></div>
</form>

Since you can have multiple variants per product, you’ll need to add the Variant id as a key to the variant array item. Assuming a Variant id of abc123, you’d need to setup your input’s name like this: pl-variants[][abc123]. This ensures we can match the correct Variant values with the Variant id.

In order to send multiple Variants along with a specific Product id, you’ll need to ensure the array index for the pl-product-ids[] matches the index for the pl-variants[][abc123]. To do this you’ll need to explicitly set a unique index.
Example: pl-product-ids[0] and pl-variants[0][abc123]

Free Products

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <button type="submit">Get Now</button>
  <div data-pl-message></div>
</form>

You do not need to collect payment information if the product(s) chosen are free products. You can make a product free from within the Plasso dashboard.
This means you do not need to add any payment collection form fields to your order form.

Digital Products

<div data-pl-file-delivery></div>

If you are selling digital goods, and using Plasso to deliver files after a order has been made, you’ll need to make sure to setup your page to have an element with the data-pl-file-delivery attribute on it.

Below is an example of what Flexkit will put into the data-pl-file-delivery element.

<ul>
  <li><a href="download_1">Name of File 1</a></li>
  <li><a href="download_2">Name of File 2</a></li>
  <li><a href="download_3">Name of File 3</a></li>
</ul>

After the order is made, Flexkit will add a list of download links to the data-pl-file-delivery element. Your customer will be able to click the download links to get their files. The email receipt they receive after their order will also have links to the files.

Plans

Plans are payment subscriptions you create inside the Plasso dashboard. After creating a plan(s), you’ll need to grab its id and use it in your Sign Up forms. You must include a plan id in your sign up form for the form to work. To add a plan to a form, add a form element (like an <input>) with the name pl-plan-ids[].

<input type="hidden" name="pl-plan-ids[]" value="my_plan_id">

If you only have one plan you can add it to your sign up form as a hidden input field. Then everyone who signs up with that form will be signed up to that plan.

<select name="pl-plan-ids[]">
  <option value="gold_plan">Gold Plan</option>
  <option value="silver_plan">Silver Plan</option>
  <option value="bronze_plan">Bronze Plan</option>
</select>

If you have multiple plans you can put them all in a select field. Then the user can pick a plan to sign up to in your sign up form.
Example:

<input type="radio" name="pl-plan-ids[]" value="gold_plan">
<input type="radio" name="pl-plan-ids[]" value="silver_plan">
<input type="radio" name="pl-plan-ids[]" value="bronze_plan">

Alternatively, if you have multiple plans, you can use radio inputs. You could place these inside a <label> and use CSS to make them look anyway you want.

<label>
  <span>Gold Plan</span>
  <span>$29/month</span>
  <input type="radio" name="pl-plan-ids[]" value="gold_plan">
  <span>Select</span>
</label><label>
  <span>Silver Plan</span>
  <span>$19/month</span>
  <input type="radio" name="pl-plan-ids[]" value="silver_plan">
  <span>Select</span>
</label><label>
  <span>Bronze Plan</span>
  <span>$9/month</span>
  <input type="radio" name="pl-plan-ids[]" value="bronze_plan">
  <span>Select</span>
</label>

Below is an example of how you can use radio inputs with just a bit of CSS styling to make your sign up form look great without having to write any Javascript code. The behavior you see is not using any Javascript or complex CSS, it’s just standard HTML behavior.


The radio inputs have been left visible so you can see the behavior. If you’d like, you could hide those radio inputs with the following CSS:
input[type="radio"]{ display:none; }

Free Plans

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Password: <input type="password" name="pl-password" /></label>
  <input type="hidden" name="pl-plan-ids[]" value="my_plan_id" />
  <button type="submit">Sign Up</button>
  <div data-pl-message></div>
</form>

You do not need to collect payment information if the plan chosen is a free plan. You can make a plan free from within the Plasso dashboard.
This means you do not need to add any payment collection form fields to your sign up form.

Combination

A combination form is a form that includes Products as well as a Plan.

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <input type="hidden" name="pl-plan-ids[]" value="my_plan_id" />
  <button type="submit">Buy Now</button>
  <div data-pl-message></div>
</form>

You can add any number of both Products and Plans to an order form and sell both at one time.
To make a order form that has both Products and Plans, simply add product form elements and plan form elements to your form.

Coupons

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <label>Coupon Code: <input type="text" name="pl-coupon" /></label>
  <input type="hidden" name="pl-product-ids[]" value="my_product_id" />
  <input type="hidden" name="pl-plan-ids[]" value="my_plan_id" />
  <button type="submit">Buy Now</button>
  <div data-pl-message></div>
</form>

Coupon can be used on both product and plan orders. To add a coupon to a order form simply add a form element with the name pl-coupon. The value of this element should be a coupon code, example: AugustDiscount50

Accounts

Flexkit gives you an entire user authentication and user storage system out of the box. Using just Flexkit alone you’ll get a system that enables anyone to sign up for any of your Plans, thereby creating an account with you. We call these people that sign up for your plans: Members. There are seven main functions of Flexkit’s Member Account system:

Flexkit will automatically validate (ensure proper values) all the pl-* form fields for you when the user submits any of these forms. You do NOT need to write any Javascript code, it will all work by just setting up the HTML. Be sure to add an element with a data-pl-message attribute inside your form to display error/success messages from Flexkit.
Example: <div data-pl-message></div>
This is not required, but makes it super easy to display messages to the user.

Back-end Clients

If you’d like to restrict access and protect website content to only members, you’ll need to implement the Flexkit back-end client code. You can simply drop the back-end client into your server side code base. It will automatically work with the Flexkit front-end, no configuration is necessary.

The back-end client will ensure no-one can access your protected content unless they are a logged in member.

We have clients available for five languages. Their setup instructions can be found on their Github pages:

Sign Up

<form data-pl-form-type="order" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Password: <input type="password" name="pl-password" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <input type="hidden" name="pl-plan-ids[]" value="1" />
  <button type="submit">Sign Up</button>
  <div data-pl-message></div>
</form>

To add a sign up form to your page, all you need to do is add the data-pl-form-type attribute to your form element and set its value to order. Submitting the form will sign the user up to the pl-plan-ids[] you have set inside the form. Read more about Plans.

You can also add Products to your sign up forms. Making the sign up form capible of subscribing someone to any of your Plans in addition to buying any number of Products. Read more about combination orders.

Signing up doesn’t change the browser’s state by default. If you’d like to reload the window after a successful sign up, add the data-pl-reload-window attribute to the form element. If instead you’d like to forward the user to a specific page after a successful sign up, simply add a value to the data-pl-forward-url attribute to forward the user to a specified URL.

Required Parameters:

Log In

<form data-pl-form-type="memberLogIn" data-pl-space-id="space_id_here" data-pl-forward-url="http://mysite.com">
  <label>Email: <input type="text" name="pl-email" /></label>
  <label>Password: <input type="password" name="pl-password" /></label>
  <button type="submit">Log In</button>
  <div data-pl-message></div>
</form>

To add a log in form to your page, all you need to do is add the data-pl-form-type attribute to your form element and set its value to memberLogIn. Submitting the form will log the member into their account with you.

Logging in doesn’t change the browser’s state by default. If you’d like to reload the window after a successful log in, add the data-pl-reload-window attribute to the form element. If instead you’d like to forward the member to a specific page after a successful log in, simply add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

Required Parameters:

Log Out

Basic log out:
<a href="" data-pl-logout>Log Out</a>

Log out and reload the window when complete:
<a href="" data-pl-logout data-pl-reload-window>Log Out</a>

Log out and forward the window to a specified URL when complete:
<a href="http://mysite.com" data-pl-logout>Log Out</a>

To add a log out button to your page, all you need to do is add the data-pl-logout attribute to your element. Clicking an element with the data-pl-logout attribute will log the current member out from the system.

Logging out doesn’t change the browser’s state by default. If you’d like to reload the window after a successful log out, add the data-pl-reload-window attribute to the element. If instead you’d like to forward the member to a specific page after a successful log out, simply add a value to the href attribute if the element is an <a>. Otherwise you can add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

Forgot Password

<form data-pl-form-type="forgotPassword" data-pl-space-id="space_id_here" data-reset-url="http://mysite.com/reset-page">
  <label>Email: <input type="text" name="pl-email" /></label>
  <button type="submit">Forgot Password</button>
  <div data-pl-message></div>
</form>

It’s great practice to give your members a way to reset their passwords in-case they forget it. Implementing this Forgot Password form and the Reset Password is all you need to do to provide that feature to your members.

To add a Forgot Password form to your page, all you need to do is add the data-pl-form-type attribute to your form element and set its value to forgotPassword. Submitting the form will send an email to the member with a verification link. When they visit that link they will see your Reset Password form. From there they will be able reset their password.

You must to include the data-pl-reset-url attribute on the form. It defines the location of your Reset Password form, and is where members will be sent to from the verification email.

Submitting the Forgot Password form doesn’t change the browser’s state by default. If you’d like to reload the window after a successful forgot password submission, add the data-pl-reload-window attribute to the form element. If instead you’d like to forward the member to a specific page, simply add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

Required Parameters:

Reset Password

<form data-pl-form-type="resetPassword" data-pl-space-id="space_id_here" data-pl-forward-url="http://mysite.com/">
  <label>Password: <input type="text" name="pl-password" /></label>
  <button type="submit">Forgot Password</button>
  <div data-pl-message></div>
</form>

It’s great practice to give your members a way to reset their passwords in-case they forget it. Implementing this Reset Password form and the Forgot Password is all you need to do to provide that feature to your members.

To add a Reset Password form to your page, all you need to do is add the data-pl-form-type attribute to your form element and set its value to resetPassword. Submitting the form will change the member’s password to the password they’ve entered, and log them into the system.

Before a member can submit this Password Reset form, they will need to get a verification email. In order to get them a verification email you’ll need to setup the Forgot Password form and point your members to that form first.

Submitting the Reset Password form doesn’t change the browser’s state by default. If you’d like to reload the window after a successful reset password submission, add the data-pl-reload-window attribute to the form element. If instead you’d like to forward the member to a specific page, simply add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

Required Parameters:

Update Account

There are three different form types for updating a member’s account. Add the data-pl-form-type attribute to your form element and set its value to one of these form types: memberUpdateSettings, memberUpdatePassword or memberUpdatePaymentMethod.

Updating an account doesn’t change the browser’s state by default. If you’d like to reload the window after a successful account update, add the data-pl-reload-window attribute to the element. If instead you’d like to forward the member to a specific page after a successful account update, simply add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

memberUpdateSettings

<form data-pl-form-type="memberUpdateSettings" data-pl-space-id="space_id_here">
  <label>Name: <input type="text" name="pl-name" /></label>
  <label>Email: <input type="text" name="pl-email" /></label>
  <select name="pl-plan-ids[]">
    <option value="1">Gold Plan</option>
    <option value="2">Silver Plan</option>
  </select>
  <button type="submit">Save</button>
  <div data-pl-message></div>
</form>

This form will update the member’s account information when submitted.

Required Parameters:

For custom Data Items ( pl-data-* ), replace the * with the id of the Data Item.
Example: <input type="text" name="pl-data-abc123">

memberUpdatePassword

<form data-pl-form-type="memberUpdatePassword" data-pl-space-id="space_id_here">
  <label>Old Password: <input type="text" name="pl-old-password" /></label>
  <label>New Password: <input type="text" name="pl-new-password" /></label>
  <button type="submit">Change Password</button>
  <div data-pl-message></div>
</form>

This form will update the member’s password when submitted. You are required to send the member’s existing/current password as well as a new password.

Required Parameters:

memberUpdatePaymentMethod

<form data-pl-form-type="memberUpdatePaymentMethod" data-pl-space-id="space_id_here">
  <label>Card Holder's Name: <input type="text" name="pl-card-holders-name" /></label>
  <label>Card Number: <input type="text" name="pl-card-number" /></label>
  <label>Expiration: <input type="text" name="pl-card-exp" /></label>
  <label>CVC: <input type="text" name="pl-card-cvc" /></label>
  <button type="submit">Save</button>
  <div data-pl-message></div>
</form>

This form will add a new credit/debit card on the member’s account in place of the existing/current card. If pl-card-holders-name is not passed, the member’s name will automatically be used as the card holder’s name instead.

Accepted Parameters:

Delete Account

Basic delete account:
<a href="" data-pl-delete-account>Delete Account</a>

Delete account and reload the window when complete:
<a href="" data-pl-delete-account data-pl-reload-window>Delete Account</a>

Delete account and forward the window to a specified URL when complete:
<a href="http://mysite.com" data-pl-delete-account>Delete Account</a>

To add a delete account button to your page, all you need to do is add the data-pl-delete-account attribute to your element. Clicking an element with the data-pl-delete-account attribute will delete the current member’s account and log them out from the system.

Deleting and account doesn’t change the browser’s state by default. If you’d like to reload the window after a successful delete account, add the data-pl-reload-window attribute to the element. If instead you’d like to forward the member to a specific page after a successful delete account, simply add a value to the href attribute if the element is an <a>. Otherwise you can add a value to the data-pl-forward-url attribute to forward the member to a specified URL.

Attributes

Complete list of Flexkit HTML attributes. Flexkit attributes will always start with data-pl-.
Example: <a href="" data-pl-logout></a>
Adding any of the attributes below to your HTML elements will cause them to do special Flexkit things.

Attribute Name Description
data-pl-delete-account Turns the element into a Delete Account button. When clicked, Flexkit will delete the current member’s account (including their subscriptions) and log them out.
data-pl-file-delivery Flexkit will populate this element with a list of download links. Read more
data-pl-format Defines the format the value should be in. Formats do NOT need to be manually applied to Flexkit Name Values, they will automatically handle their own formatting. Supported values:
  • cardNumber
  • cardExpiration
  • cardCvc
  • numeric
  • price
data-pl-form-type Defines the form type and behavior. Adding this to a form element is REQUIRED for the form to be initialized by Flexkit. Supported values:
  • order
  • memberLogIn
  • memberResetPassword
  • memberUpdateSettings
  • memberUpdatePassword
  • memberUpdatePaymentMethod
data-pl-forward-url Forwards the window the the specified value when the corresponding action completes with a success status type. Example:
<form data-pl-forward-url="http://site.com">
data-pl-logout Turns the element into a Log Out button. When clicked, Flexkit will log the current member out.
data-pl-member Defines a Member Data element. Flexkit will automatically put the currently logged in member’s data into elements with this attribute. Read more
data-pl-message Action messages (success, error, validation, etc.) are automatically placed into this element for you. Elements with this attribute must be placed inside a <form> element. All messages put into this element are specific to its parent <form>.
data-pl-reload-window Reloads the window when the corresponding action completes with a success status type.
data-pl-reset-url Sets the location of your Reset Password form. Example:
<form data-pl-reset-url="http://site.com/reset-page">
data-pl-success-message Sets a custom message to be displayed when a form completes with a success status type. Example:
<form data-pl-success-message="Thanks for buying!">

Name Values

Complete list of Flexkit HTML form name values. These are the supported values for the name attribute on form items. Flexkit values will always start with pl-.
Example: <input type="text" name="pl-name">

All validation is automatically handled and processed by Flexkit when you use any of these values on your form elements. For example, when a user attempts to submit a form, Flexkit will ensure any form element with name="pl-email" is a valid email address before the form can be submitted. If it is not valid, an error message will be automatically added to the data-pl-message element for the user to read.

Name Value Description
pl-amounts Defines an Amount field type. Example value: 19.99
pl-billing-address Defines a Billing Address field type. Example value: 123 Cool Street
pl-billing-city Defines a Billing City field type. Example value: Carlsbad
pl-billing-state Defines a Billing State/Province field type. Example value: CA
pl-billing-zip Defines a Billing ZIP/Postal code field type. Example value: 92011
pl-billing-country Defines a Billing Country field type. Example value: USA
pl-card-holders-name Defines a Card Holder’s Name field type. Example value: Mr. Jeremy Fisher
pl-card-number Defines a Card Number (credit and/or debit) field type. Example value: 4242 4242 4242 4242
pl-card-exp Defines a Card Expiration date field type. This type will combine the month and year. Example value: 09/2019
pl-card-exp-month Defines a Card Expiration Month field type. Example value: 09
pl-card-exp-year Defines a Card Expiration Year field type. Example value: 2019
pl-card-cvc Defines a Card CVC field type. Example value: 387
pl-card-zip Defines a Card ZIP/Postal Code field type. Example value: 92011
pl-coupon Defines a Coupon Code field type. Example value: AugustDiscount50
pl-data-* Defines a custom Data field type. Replace the * with a Data field’s id. Example value: Hello World
pl-email Defines an Email Address field type. Example value: me@site.com
pl-name Defines a customer Name field type. Example value: Jane Doe
pl-password Defines a Password field type. You can optionally add a minlength HTML attribute on the password form element to define a minimum password length. Example: minlength="6"
pl-plan-amount Defines a Plan Amount field type. Example value: 22.98
pl-plan-ids Defines a Plan ID field type. Example value: my_plan
pl-plan-units Defines a Plan Units field type. Example value: 5
pl-post-notifications Defines a Post Notifications field type. Value can either be YES or NO
pl-product-ids Defines a Product ID field type. Notice the name is plural. Example value: my_product
pl-quantities Defines a Quantity field type. Example value: 14
pl-shipping-name Defines a Shipping Name field type. Example value: Gwen Stacy
pl-shipping-address Defines a Shipping Address field type. Example value: 837 Marvel Road
pl-shipping-city Defines a Shipping City field type. Example value: New York
pl-shipping-state Defines a Shipping State/Province field type. Example value: NY
pl-shipping-zip Defines a Shipping ZIP/Postal code field type. Example value: 11201
pl-shipping-country Defines a Shipping Country field type. Example value: USA
pl-space-id Defines a Space ID field type. Enter a Space ID for the value. Example value: abcde12345
pl-variants Defines a Variant field type. Enter a Variant SKU for the value. Example value: xyz987

A HTML class representing the card type will be added to pl-card-number elements as the card number is being entered. Possible classes are:

Member Data

Complete list of Flexkit Member data values. These values should be put inside a data-pl-member HTML attribute.
Example: <h1 data-pl-member="name"></h1>

Flexkit will automatically fill in all HTML elements, with the data-pl-member attribute, with the currently logged in member’s data. If the element has a value property, such as an input field, Flexkit will set it’s value property. Otherwise, Flexkit will set the HTML value.

Name Value Description
data-* Sets the value for the corresponding custom Data field. Replace the * with a Data field’s id. Example value: Hello World
email Sets the value to the member’s Email Address. Example value: me@site.com
name Sets the value to the member’s Name. Example value: Jane Doe
source-brand Sets the value to the member’s source brand name. This could be the brand name of a credit card or a bank. Example value: Visa
source-last4 Sets the value to the last four digits of the member’s source account number, either the last for digits of the card or bank account number. Example value: 4242

Events

Flexkit will send event notifications to the UI while it is processing things behind the scenes. It will automatically fill in the data-pl-message element with these notification messages to inform the user.

Event Object

Example event object:

{
  title: 'Plasso.cardFieldError',
  type: 'error',
  data: {
    text: 'Card Number field must be valid.',
    formId: 'form_id',
    formElement: <form>,
    field: 'field_name',
    fieldElement: <field>,
    downloads: {...},
    downloadsHtml: '<ul>...</ul>'
  }
}
Key Name Description
title
string
Name of the event. Alwas starts with: Plasso.
type
string
Type of event. Either: success or error
data
object
Deatils about the event.
data.text
string
Descriptive message about the event.
data.formId
string
HTML id of the form the event pertains to.
data.formElement
DOM
Javascript DOM element of the form the event pertains to.
data.field
string
Value of the HTML name attribute the form field the event pertains to.
data.fieldElement
DOM
Javascript DOM element of the form field the event pertains to.
data.downloads
object
Downloads object. Present when a order for a Product with digital files is successful.
data.downloadsHtml
string
HTML string. Link list of downloads. Present when a order for a Product with digital files is successful.
Plasso.eventListener = function(message) {
  if (message.title === 'Plasso.orderSuccess') {
    alert('Order successful!');
  }
  if (message.title === 'Plasso.orderError') {
    alert('Order failed! ' + message.data.text);
  }
};

You can also hook into our event listener system using Javascript.

Event Types

Below is a list of all the events we push to the UI and that you can hook into.

Event Name Description
accessError There is an authorization error trying to access API.
applicationError There is an error processing the member application.
applicationSuccess Successfully created a member application.
calculateTotalsSuccess Checkout totals successfully calculated.
calculateTotalsError There is an error trying to calculate the checkout totals.
cancelSubscriptionError There is an error cancelling a subscription.
cancelSubscriptionSuccess Successfully cancelled a subscription.
cardFieldError There is an invalid field value in the form.
deleteMemberSuccess Successfully deleted the member.
deleteMemberError Failed to delete the member.
forgotPasswordSuccess Verification email successfully sent.
forgotPasswordError Failed to send the reset verification email.
formTypeError Invalid form type. The data-pl-form-type value is not valid.
logInSuccess Member successfully logged in.
logInError Failed to log the member out.
logOutSuccess Successfully logged the member out.
logOutError Failed to log the member out.
memberDataSuccess Object containing the member’s data.
memberDataError Failed to retrieve member.
orderSuccess Successfully created an order.
orderError Failed to create a order.
orderComplete Order proocess has completed.
pauseSubscriptionError There is an error pausing a subscription.
pauseSubscriptionSuccess Successfully paused a subscription.
resetPasswordSuccess Password successfully reset.
resetPasswordError Failed to reset password.
shippingOptionError There is an error validating a shipping option.
subscriptionSuccess Successfully created a subscription for the member.
subscriptionError Failed to create a subscription for the member.
taxError There is an error calculating the tax.
tokenRetrievalError Failed to get Stripe token from public key.
updatePasswordSuccess Successfully updated the member’s password.
updatePasswordError Failed to update the member’s password.
updatePaymentSuccess Successfully updated the member’s payment method.
updatePaymentError Failed to update the member’s payment method.
updateMemberSuccess Successfully updated the member’s details.
updateMemberError Failed to update the member’s details.
unpauseSubscriptionError There is an error unpausing a subscription.
unpauseSubscriptionSuccess Successfully unpaused a subscription.