GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps

Stripe Payment Sample jQM App

Stripe payment sample jQuery Mobile app.

Suggest Edits

🚧

Important Note!

The option of creating new apps with the jQuery Mobile framework was removed but we still support the projects that were created with it earlier.

Introduction

Stripe Payment allows you to charge money from a user’s credit card to your Stripe account using the Stripe API. The Stripe Payment API plugin contains ready-made services and a UI that makes it easier to use.

The plugin uses Appery.io API Express to keep the Stripe API key secure.

📘

Payment via Stripe for PWA and Web application

You can also check our Ionic App with Stripe Payment sample app that shows how to organize the payment process in PWA and Web applications built with Ionic.

Before You Begin

Before using the Stripe API you will need to sign up for an account: https://dashboard.stripe.com/register. Once you are logged into your account, you can find your API keys here.

Create a New App and Import the Plugin

Let's get the JQM app which can be imported as a plugin.

  1. Inside the App Builder, click Create new app.
  2. For the app name, enter: StripePayment.
  3. Open the jQuery Mobile tab and select the Blank template. Click the Create button to confirm.
  4. When the App Builder loads, click CREATE NEW > From plugin and find the Stripe Payment API plugin.
  5. Now, import the plugin into the app and set the StripePayment_PaymentScreen page as the start page of the project.

The next setup is to create the app backed with API Express.

Setting up API Express Service

To get the app backend:

  1. Go to the API Express page and create an API Express project from a backup.
  2. Open the Service Keys section of API Express and place your Stripe API key (from stripe.com) into the api_key (so that it looks like Bearer {your key} (without curly bra​ckets).

Connect App with Backend

  1. Open the Settings tab and copy the API Express API key.
  2. Go to your app and open the Stripe_Settings asset, paste the API key to the value parameter of API_EXPRESS_API_KEY and you've finished.

Testing the App

Click Test and use the test card number 4242424242424242 with any valid expiration date and CVV (read more here) . Confirm the payment, you should see a success message in the app and stripe dashboard should show new charge info.

Don’t forget to switch from test mode to Live in your Stripe dashboard before going live.

Updated 12 months ago