Accept a Stripe Payment Example with Alpas
Tags: kotlin, stripe, webdev, alpas
Published: 2020-04-23 13:40:14

---
title: Accept a Stripe Payment Example with Alpas
published: true
date: 2020-04-23 06:03:15 UTC
tags: kotlin,stripe,web-development,alpas
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*CPaVm_m5ohfAAYow)<figcaption>Photo by <a href="https://unsplash.com/@rupixen?utm_source=medium&amp;utm_medium=referral">rupixen.com</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

We have been planning to build a [Stripe](https://stripe.com/) payment plug-in module for [Alpas](https://alpas.dev) for a while now and then create a tutorial on how to work with it.

Well, it was a little unplanned but I got called out and challenged to create an example Stripe payment plugin for Alpas by way of Twitter today.

{% tweet 1253083828798648320 %}

That’s Ashok challenging me. He knows I’m competitive and can’t resist a good challenge. Especially, one against the clock! ⏰

{% tweet 1253084428189876224 %}

This is before I even really knew what the challenge was. 😂

Then, I looked at what the source of the Twitter comment was.

{% tweet 1253031147459604482 %}

Wow! The new [tutorial format](https://stripe.com/docs/payments/integration-builder) Stripe is testing out is pretty slick. They even have back-end examples for Node, PHP, Ruby, Python, Java, Go, and .NET. The only thing missing? Kotlin.

> **tl;dr ** — you can find the Kotlin / Alpas solution to Stripe’s Accept Payment on my [GitHub repo](https://github.com/armgitaar/stripe-example).

Here are the parallel steps taken to get the example working using the Alpas starter template and the Kotlin development language.

### 1. Set up the server

#### Setup your server

Not much different than Stripe’s tutorial for this step. Select the Gradle tab, copy `implementation "com.stripe:stripe-java:19.4.0"` and add to the list of dependencies in the [build.gradle](https://github.com/armgitaar/stripe-example/blob/master/build.gradle) file.

Since we are already in build.gradle, we might as well add GSON as a dependency too since the Stripe example uses GSON for parsing JSON.

Add `implementation 'com.google.code.gson:gson:2.8.5'` to the list of dependencies as well.

Once you have added the dependencies, import them by refreshing Gradle.

#### Create a PaymentIntent

I sliced up Stripe’s example a bit. I added the following post route to the [routes.kt](https://github.com/armgitaar/stripe-example/blob/master/src/main/kotlin/routes.kt) file.

```kotlin
post("/create-payment-intent", WelcomeController::payment)
```

Then, in the [WelcomeController.kt](https://github.com/armgitaar/stripe-example/blob/master/src/main/kotlin/controllers/WelcomeController.kt) file, added the following.

```kotlin
class WelcomeController : Controller() {
    fun index(call: HttpCall) {
        call.render("welcome")
    }

    fun payment(call: HttpCall) {

        // This is a sample test API key. Sign in to see examples pre-filled with your key.
        Stripe.apiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc"

       // val request = call.jsonBody
        val postBody: CreatePayment = gson.fromJson(call.body, CreatePayment::class.java)
        val createParams = PaymentIntentCreateParams.Builder()
            .setCurrency("usd")
            .setAmount(calculateOrderAmount(postBody.items).toLong())
            .build()
        // Create a PaymentIntent with the order amount and currency
        val intent = PaymentIntent.create(createParams)
        val paymentResponse = CreatePaymentResponse(intent.clientSecret)

        call.reply(gson.toJson(paymentResponse)).asJson()
    }

    private val gson: Gson = Gson()
    fun calculateOrderAmount(items: Array<Any?>?): Int {
        // Replace this constant with a calculation of the order's amount
        // Calculate the order total on the server to prevent
        // users from directly manipulating the amount on the client
        return 1400
    }

    internal class CreatePayment {
        @SerializedName("items")
        lateinit var items: Array<Any?>
    }

    internal class CreatePaymentResponse(private val clientSecret: String)

}
```

This is the main piece that required converting Java to Kotlin. Not too difficult. Easier on the eyes. 😎

### 2. Build a checkout page on the client

#### Load Stripe.js

In the [welcome.peb](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/templates/welcome.peb) file, add the following before the close head tag.

```javascript
<script _src_="https://js.stripe.com/v3/"></script>
```

#### Define the payment form

Also in the [welcome.peb](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/templates/welcome.peb), you can copy and paste from the Stripe example.

#### Initialize Stripe.js

Add [client.js](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/web/js/client.js) to the web > js folder. The contents can be copied from the Stripe example and pasted into Alpas.

#### Fetch a PaymentIntent

This is where it gets quasi-tricky as you will need to verify a token for CSRF. You could pull from the cookie to pass the token. My solution was a little more simple. In the [welcome.peb](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/templates/welcome.peb) file, I added the following metadata:

```html
<meta name="csrf-token" content="{{ _csrf }}">
```

This will add the CSRF token into the meta data. I’ll then use Javascript to fetch the value and pass along.

In the [client.js](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/web/js/client.js) file, I added the following to the post request header.

```javascript
'X-CSRF-TOKEN': document.head.querySelector("[name~=csrf-token][content]").content
```

Admittedly, going into Javascript mode slowed me down greatly. Javascript just feels so dirty after being in Kotlin-bliss.

#### Initialize Stripe Elements

Not much to do here. Though, before this will actually work, you will need to connect the welcome.peb to the client.js file. Reference client.js from within welcome.peb by adding the following before the close head tag.

```
<script src="/js/client.js" defer></script>
```

#### Style the checkout form, create the card element, and surface card errors

These steps are mostly optional for you to tweak. But, you will want to copy all but the global and body styles from global.css and paste into the [app.less](https://github.com/armgitaar/stripe-example/blob/master/src/main/resources/css/app.less) file.

### 3. Complete the payment on the client

The pieces of this step are mainly showing you more around the client.js file and providing further explanation of the logic.

### 4. Run the application

First, you will want to re-compile and re-build the project. My recommendation is to install yarn in the project root then run yarn watch to recompile the project. Then, run via IntelliJ.

Note, I didn’t force a static port, Alpas will pick a free port for you when you run the app. Once the run is successful, go to your localhost and check out the goodness! Test credit cards are available in Stripe tutorial.

![](https://cdn-images-1.medium.com/max/916/1*_HHRep0G7zPv-UKE5g6Jhw.png)

{% tweet 1253113466597961729 %}

According to the Twitter timestamps, it took me a little under 2 hours. Not terrible!

I hope this example helps for those who are using a Kotlin back-end for their project. 🤙

* * *