Web Calculators Blog

Stripe Integration Released

The Payment field now supports second payment gate. After PayPal Calculoid supports also Stripe payments. Stripe is new and very user-friendly payment gate which allows your customers to pay with various payment cards. So which payment gate should you use? You can let your customers decide!

The payment process

Let's take a look how the payment process looks like from a customer's view. On a live calculator of course.

Are the Stripe payments safe?

The payments via PayPal are secure because the customer is redirected to the PayPal, the payment is made there and then the customer is redirected back to the checkout page. But Stripe let your customers to pay in your checkout page without a redirect. To describe the process a bit, let's go through the process with a customer called Jenny.

  1. Jenny selects which imaginary plan she want.
  2. Jenny selects how many imaginary users she need.
  3. Calculoid calculates the price.
  4. Jenny thinks it's a good deal and decides to pay.
  5. Jenny inserts her email and hits the Pay button.
  6. Calculoid calls Stripe popup payment form.
  7. Jenny fills in her card number, date and CVC code.
  8. Stripe sends the card information securely to their servers (not to Calculoid!) and returns a payment token.
  9. Calculoid saves the payment token together with field values of the calculator.
  10. Calculoid API server calls the Stripe API and makes the payment.
  11. Calculoid notifies Jenny in the calculator UI and sends her predefined email as well.

It is advised to use SSL (https) on the page where you use the Stripe payment form. Here is what Stripe says in their docs:

All submissions of payment info using Checkout are made via a secure HTTPS connection. However, in order to protect yourself from certain forms of man-in-the-middle attacks, we suggest that you also serve the page containing the payment form with HTTPS as well. This means that any page that a Checkout form may exist on should start with https:// rather than just http://.

 How to configure the Stripe payments in a calculator?

The process is quite simple. Follow these steps and you'll be able to test the payments in 10 minutes.

1. Get the testing and production API keys

Go to and create an account. Log in to the Stripe Dashboard, Open the Account modal and navigate to the API Keys tab. You can copy the keys from there.

calculoid stripe keys

2. Configure the Payment Field

If you didn't already, register and log in to Calculoid, create a new calculator, add the Payment Field. Navigate to the Stripe tab and copy-paste the keys from Stripe dashboard to the right input boxes into the "Payment Field - Stripe" configuration.

calculoid stripe config

Along with Stripe keys it is also possible to configure the Stripe modal. You can set the logo, shop name and description.

3. Test Payments

Test the payment process with the Sandbox payment gate. The testing cards can be found in the Stripe documentation.

calculoid stripe modal

That's pretty much it. After you finish with the tests of payments, you can insert the production keys and switch the Payment Gate from Sandbox to Production.

4. Check the payment results

Calculoid will show you all the payments and details about it if you go to Calculator's detail (as logged in user and author of the calculator) / Details (at the bottom-left corner) / Submissions.

calculoid stripe submissions