Help Center

Help Center

Search our help center for quick answers.

How do I sell products using Flexkit in Webflow?

2 minute read

Customization and flexibility is a must-have when it comes to adding a payment integration to a CMS or site builder. Here’s how to integrate flexkit into your Webflow project. It’s helpful to follow along with our Flexkit Documentation here.

Be advised, that Webflow requires their users to pay for their Basic Hosting plan to use the HTML embed  (outlined in step 3)

 

Single Product Purchases

1) Create a Space in Plasso and add you products.

2) In Webflow, drag a new “Form Block” from the Add-Panel on your Webflow site and give the Form, not the Form Block Wrapper, a few custom attributes by navigating to the form settings tab.

flexkit1

Name: data-pl-form-type "order"

  • This is telling flexkit that the form type is used for a purchase.

Name: data-pl-success-message ="Success!"

  • This is the message displayed after a successful purchase.

Name: data-pl-space-id = "SPACE-ID"

  • This is telling Flexkit which space your referring to.

 

2) Next, add any input form fields to your form (as seen below) and assign the appropriate Name under “Input Settings”. For example, the Name input field below would have an input name of pl-name. Create input names for each field by labeling them with a “pl-” while referencing the Flexkit Docs for specific “pl-” values. The Name and Email Input fields are required for Flexkit to work.

webflow_demo_2

3) Next, drag an HTML Embed Block from the Add-Panel into the Form and paste in this HTML. Be sure to set the Value to your Product ID.

<input type="hidden" name="pl-product-ids[]" value="your_plasso_product_id" />

webflow_demo_4

 

 

4) Lastly, you’ll add the Success/Error Message Div into the form for when the payment returns a success or error message. Add a Div Block into your form wherever you want the message to appear (typically below the button) and add a custom attribute. Make the name data-pl-message and put any character into the Value field (ex: “1”) (Webflow requires that the value field be filled in).

webflow_demo_3

5) To finish up and test your Flexkit form, navigate to your Plasso Account Settings and copy your Test Public Key to perform test transactions. While your here, add your domain to the Allowed Domains input. This way your Flexkit form is only allowed on your site.

screen-shot-2018-03-22-at-8-09-05-am

Replace the bolded text below ( in between the ‘ ‘ marks) with your test key and paste this entire script tag into your Webflow project before the closing <body/> tag.

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

 

  • By pasting the test public key into the script tag, you are using the form to test transactions. When you’re ready to set the form as active, remove the testKey call from the script. Your script should now look like this:
    <script src='https://plasso.com/embed/flexkit.1.1.js'></script>
    <script>
      Plasso.Flexkit.setup();
    </script>

That’s it! Refer to the Plasso Docs to add an unlimited amount of variants and products, subscriptions, and more. For help with getting Flexkit built into Webflow, reach out to us by sending an email to support@plasso.com or live chatting with us through our website. Happy designing 🎨

 

Was this article helpful?

5 found this helpful.

Can't find your answer?

We want to answer all of your questions. Get in touch and we’ll get back to you as soon as we can. Email us.

Policy questions?

Take a look at our Terms of Service and review our Privacy Policy.