Integrate with a payment provider

Stripe Prebuilt Checkout page

This guide will describe how to set up payment using the third-party payment service Stripe. As an example, we will use a one-time payment of multiple items (e.g. a user purchasing several items from a web store).

To complete this guide, you'll need a Stripe account. If you don't have that already, go to Stripe to register a new account. We'll use the Stripe test environment for this guide, but the setup would be the same for a production environment.

Step 1

Create your web store as an app in Appfarm. Make sure you have a data source with all the products that can be purchased (e.g. products), and one with all the products the user wants to purchase (i.e. "shopping cart" or "order items").

Furthermore, you'll need two landing views with the URL Path Key set; one for payment success and one for payment failure (e.g. https://[HOSTNAME].appfarm.app/[APPNAME]/success

Step 2

Go to https://dashboard.stripe.com/test/products. For each product you want to sell, click add product. Then, copy the Pricing API ID (e.g. price_1LVDmlCKVzgiw1WewxzdGvQl) and save it to a property on the corresponding product object.

You may also add these products dynamically using the Stripe Products API.

Step 3

Go to https://dashboard.stripe.com/test/apikeys. Under "Secret key" click "Reveal test key". Copy the key, and save it as a secret under Appfarm Create -> Secrets.

Step 4

Go to Appfarm Create -> App Data -> App Variables, and add a new Runtime Property named "URL".

Step 5

Go to your checkout in your app, and create a new action. Add the action node web request with the following properties:

• URL: https://api.stripe.com/v1/checkout/sessions

• Query Parameters:

  • success_url: Success URL from Step 1

  • cancel_url: Failure URL from Step 1

  • Mode: Payment

• Request Headers:

  • Content-Type: application/x-www-form-urlencoded

• Authorization:

  • Type: Basic Auth

  • Username: The test key from Step 3

  • Password: Null

• Method: POST

• Body Type: Raw

• Body Content: Function:

// We will create a string with each order item displayed in the following format: 
// &line_items[0][price]=price_1LVDltCK&line_items[0][quantity]=1

let string = ''
let orderItems = {{INSERT DATA SOURCE WITH ORDER ITEMS}}

// Iterate all items in the data source
orderItems.forEach((item, index) => {
    // Add price API ID to string
    string += `&line_items[${index}][price]=${item.{{PRICING API ID PROPERTY}} }`
    // Add quantity to string
    string += `&line_items[${index}][quantity]=${item.{{QUANTITY PROPERTY}} }`
})

return string

• Content-Type: Custom

• Result Mapping:

  • Data Source: App Variables

  • URL: url

Step 6

Add action node Open URL and set the Value to App Variables.URL. The payment flow should now work.

Step 7

You may now create the logic in Appfarm to process the status of the payment in Stripe (e.g. to handle a successful payment). This is done by creating a Service Endpoint in Appfarm, that is able to receive the information about the payment from Stripe, and perform an action to handle and save the result. Go to Appfarm Create -> Services and create a new service with a service endpoint. Make sure to note down the service's Alias Slug (which can be set under Service settings) and the readable ID of the service.

Example setup

Here is an example setup of this Endpoint, with mapping of incoming JSON to our internal data source Payment. The property Payment status is used in the action to handle whether the payment was successful or not ("paid" is received upon successful payment).

Example setup - Service Endpoint (webhook for Stripe)

Step 8

Set up a new Role with permissions to access the service, and add a Service Account with that role. Create an API key for the Service Account, and copy the key to your notepad.

Step 9

This step is for telling Stripe where to send the payment status. Go to https://dashboard.stripe.com/webhooks and add a new endpoint.

Under Endpoint URL, put the following URL: https://[HOSTNAME].appfarm.app/api/services/[service alias slug]/[service readable ID]?token=[API key]

Under Select events to listen to add checkout.session.completed.

Testing

You can now test your application. If set up correctly, the payment should work as expected.