Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Stripe Prebuilt Checkout page
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 5
  • Step 6
  • Step 7
  • Step 8
  • Step 9
  • Testing

Was this helpful?

Export as PDF
  1. How to
  2. Integrations

Integrate with a payment provider

PreviousConfigure a custom email accountNextIntegrate with Signicat

Last updated 1 year ago

Was this helpful?

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 . 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 . 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 .

Step 3

Go to . 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:

  • 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.

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).

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

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.

URL:

This step is for telling Stripe where to send the payment status. Go to and add a new endpoint.

Stripe to register a new account
https://dashboard.stripe.com/test/products
Stripe Products API
https://dashboard.stripe.com/test/apikeys
https://api.stripe.com/v1/checkout/sessions
https://dashboard.stripe.com/webhooks
Example setup - Service Endpoint (webhook for Stripe)