Stripe Payment API in Mendix

Businesses must now accept a variety of mobile wallets, including Apple Pay, Google Pay, and Alipay. New regulations (such as PSD2 in Europe) have increased 3D Secure adoption, complicating payment flows. And that’s only when cards are used: eighty percent of new internet users live in areas where non-card payment methods with customized payment flows are the norm.

When you factor in the costs of adapting to changing browser standards, making mobile-friendly payment forms, and translating them into local languages, the cost of maintaining a high-conversion and compliant payment form quickly becomes significant and growing.

In a nutshell, Stripe made it simple to create a basic checkout form.

Stripe Checkout

This prebuilt, hosted payment page, would be useful for people who didn’t want to write any front-end code. While Checkout is very simple to use (unless you intend to support all of the edge cases yourself, e.g. address-autocomplete that works with native autofill, 3D Secure on mobile, Alipay on Desktop, etc), using Checkout will likely increase your revenue and save you a lot of engineering time.

How can this be implemented in Mendix?

In this blog, I will explain the steps of integrating Stripe with the Mendix app in order to achieve Stripe payments.

To get it done, just follow these simple steps.

Step 1: Let’s test with Postman first.

To get the Stripe API into your Postman, simply watch this YouTube video where you will become acquainted with Stripe’s API headers and parameters.

Step 2: Create a new Stripe account using the link below to sign in with your credentials.

Sign Up and Create a Stripe Account | Stripe

Step 3: Visit the dashboard for your Stripe account at:

Stripe Login | Sign in to the Stripe Dashboard

Select New business and name your App:

The secret key and publishable key will be visible in the dashboard.

Click the eye icon, then the value, to copy it.

**Make a note of it for future reference.**

Return to Postman. Navigate to your workspace and search for Stripe API.

If you’re not sure how to fork, go back to Step 1.

Step 4: By selecting Stripe API, you can replace the secret key with your own variable.

There is no need to apply for all folders. It has the option to ‘Inherit auth from parent’ (so leave it alone)

There are several built-in collections visible.

Go to the checkout and open “create the session” mentioned in the Step 1 video.

Return to Mendix Studio Pro.

Step 5: Create a microflow and include a call rest-activity with POST method.

Location URL: https://api.stripe.com/v1/checkout/sessions
HTTP authentication: Enabled
Username: ‘sk_test_Your_Secret_Key’
Password: ‘ ’
Custom HTTP Headers -
‘Content-Type’ = ‘application/x-www-form-urlencoded’

Add your secret key as User name and HTTP Header

Step 6: Get the Customer ID by creating the customer in Postman. (As explained in the video for step 1)

Response JSON while creating a customer

Choose “Custom Request Template” from the request tab, then enter the request body as shown. In order to take the snip, I inserted some static values. Variables may be used however you choose.

Request Structure

You can add more content to the body. If you are new to using REST services, please visit this link to get a good idea of how to consume them in Mendix.

Consume a REST Service

Then, as usual, using the Postman response from “create checkout,” construct a new import mapping using the JSON returned. In the Response tab, make use of the newly established import mapping (apply import mapping)

Response

You’ll get a response with a URL at the end.

{
   "status":"open",
   "submit_type":null,
   "subscription":null,
   "success_url":"https.yourUrl":,
   "total_details":{
      "amount_discount":0,
      "amount_shipping":0,
      "amount_tax":0
   },
   "url":"https://checkout.stripe.com/pay/cs_test_a1QOlCTcQHgzAkk...."
}

Step 7: After the successful response, you can retrieve the highlighted URL and send the object to a page.

On that page, you can use the URL redirector widget and pass the object ($PaymentURL in the below screenshot).

The page will redirect to the payment page where the user can do the payment using card details.

Redirect to checkout page

Step 8: Create two pages in your Mendix Project and configure the Page URL’s as shown below.

Page 1: Payment Success page URL

Page 2: Payment failed page URL

After completing the payment, the user will redirect to the success_url which you gave in the request body and the same applies to cancel_url as well.

To validate the payment or obtain the session id, simply append {{CHECKOUT SESSION ID} to the end of the success URL.

You will be given a session ID, which you can use to check the payment status, whether it is complete or not, as well as how much the user paid.

Go to the Stripe dashboard https://dashboard.stripe.com/test/payments and the Payments tab to view all of your payments and their status.

That’s it, you’re done.

Hope it’s helpful. If you have any questions or if you have a better idea, please leave them in the comments section. Thanks!

Read more

Documentation

Consume a REST Service

Postman API Platform | Sign Up for Free

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? Join us in our Slack community channel.