Payment Field use case

Let your customers pay what they calculate

With the Payment Field, your calculator becomes the shopping cart. It's not solution for a big e-commerce solutions of course. But there are cases when Calculoid is the best solution as the payment tool. Consider these examples:

A small bakery

A small family bakery specializes in 5 types of cake. Each cake price differs by the cake size, topping materials and different stuffing ingredients. In this case, it's not hard to create a calculator, throw in a couple text fields to get the customer address and delivery date and then let the customers calculate the price and directly pay for their custom cake. Then copy and modify it 4 more times to fit each cake type with the illustration photo of course, embed it to your website and the e-commerce solution is ready.

Marketing agency

Imagine a marketing agency which sells time of the experts for each task. They have a graphic, a web developer, a copywriter, a PPC expert, and a project manager. Each expert has different hourly rate. Also, they want to provide a quantity discount. In this case, the calculator would have a checkbox for each expert and a sliders for how many hours they want to buy the expert's time. So the customers can easily calculate how high the cost will be for their project and they can purchase it with a click of the button.

So with the Payment Field, you can sell custom goods and services. The customer can configure exactly what she needs.

Key e-commerce features

Calculoid provides more features to make your e-commerce needs than just a pay button.

• The payments can be processed with payment cards via Stripe payment gate or via PayPal.
• You and the customer can get personalized email about the payment with all the calculator field values.
• The order list is available with all the customer and payment details and reviews for each calculator.
• The orders can be also exported in CSV so you can then open it in a spreadsheet processor like MS Excel.
• Webhooks allows you to process the order data real-time. Send the information to your CRM or invoicing app.
• We are also working on easy-to-setup integrations like the one for Redmine.

The Payment Field configuration

You don't have to pay to configure and test the Payment Field. The field is available in the Free Plan. It just won't show up only for you, when you are logged in. It will be hidden from others.

1. Log in or register

If you haven't done that yet, sign up!

2. Create a new calculator

Go to Calculators and click the New Calculator button. Or you know, edit the one you want to use as the payment calculator. Or copy some existing calculator. It may save your time if you find some similar calculator like the one in your mind.

3. Add the Payment Field

You can find the payment field like this:

Click on the Payments field type. It will add the new field to your calculator. 

4. Edit the Field

After you select what type of field you want to add to your calculator, the field will be appended to it, so you'll see this:

Notice that if you hover the field, more options will appear. You will see the Field ID which is important for the formula. There is the edit button which will open the edit form for this field. Then there is a handle which will allow you to move the field around. It's not relevant now when we have only one field there, but will be useful later. And also, if you over over an edge of the field, you will be able to resize it.

5. Add some fields to calculate with

Now, we have the payment field there, but we have no value to pay with it. Let's add 2 more fields to calculate the value. Open the "Add Field" tab again, and add a Radio Box, a Slider and a Formula Field. The result should look like this:

6. Change the calculator's layout

That's quite enough of space needed for such a small calculator. Let's use the resize feature to make it smaller. For example like this:

7. Edit the field options

Let's edit the Radio Box and Slider Field to add some options to choose for our customers. I will prepare a calculator for a SaaS app where there are 3 plans to choose from and amount of users. I won't show all of the edit options here. Discover the available options by clicking the edit button as shown above.

8. Build the formula

Let's take a closer look how the formula is built. So edit the Formula Field, give it a name (I called it "The final price"), the prefix ($), postfix (/ month), make the font bigger or style it as you'd like. The core of the formula field and the whole calculator is the formula itself. We have 2 fields where the customer can input her information. We want to simply multiply the values of those fields. Each field has a unique ID. So the formula for us is: "Choose the plan" * "How many users do you need?" = F40981 * F40982. If we add the current values there, it is 20 * 5 = 100. It seems the calculator counts correctly. Now, let's get back to the payment field and configure it.

9. Configure the Payment Field

The important is to link the Payment Field with the field which holds the price. That can be done easily by editing the Payment Field selecting the field from available fields:

Now you can notice that the same numeric value appears in the payment button. The rest of the fields here are easy to guess what they do. Let's take at the final step, the PayPal configuration.

10. The PayPal configuration

Let's open the PayPal tab in the Payment Field configuration:

If you hover the fields here, it will explain in more detail what it means so I will describe the workflow here. PayPal provides a testing payment gate where you can test the payments before you go live. This way you know the whole process works and if you are certain, you can switch to Production Payment Gate and receive the real payments. So here is what you should do:

1. Log in to sandbox.paypal.com and create a testing customer. Take a look at the PayPal's testing guide if you need more information.
2. Make sure you've saved you calculator, because the PayPal payment test will redirect you to the PayPal gate and you could loose the unsaved setting.
3. Now, insert a testing email address to the Payment Field email area (not a configuration field, the actual Email field in the Payment field... this get's confusing a bit. I hope I haven't lost you yet.) and click the Pay button. This will redirect you to the sandbox Payment gate where you can insert the testing customer email you've created in step 1 and proceed with the payment.
4. If everything went fine, switch to the production gate so you don't forget it later. I've done that ;)

Other possibilities

You will probably want to embed your calculator to your website. Don't forget to configure the calculator and mark it as "Finished". That's required to make the embed work.

So your PayPal payment calculator is finished. But maybe you'd want to also allow your customers to pay with their payment card via Stripe payment gate. The submissions/orders can be overviewed and/or downloaded. If you want to connect the orders with another service, check the webhooks. And if you got lost in some step of this tutorial or you want to ask any question, contact us.

The example calculator

Take a look at the final, live calculator I've created in this tutorial. If you'd want to copy it and use it as the base for your calculator, you can find it here: http://app.calculoid.com/#/calculator/7595