If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

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

Plugin uses Appery.io Secure Proxy to keep the Stripe API key secure.

Before you begin

Tutorial level: intermediate.

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

Create a new app

To start, you are going to create a new app.

  1. Click “Create new app.” For app name, enter: StripePayment (use any name you want) and click “Create.” 
  2. When the app builder loads, you will see the Start page. Every new app has a default page. You can open the page by going to Pages > startScreen.

Next you are going to import the Stripe Payment API plugin.

Importing the plugin

  1. To import the plugin, click Create New > From Plug-in:
  2. Check the box for Stripe Payment API:
    stripe_payment
  3. Click “Import selected plug-ins.”
  4. Select the StripePayment_PaymentScreen page as start page.
  5. Click “Apply settings.”

Setting up secure proxy

When you sign up for a Stripe Payment account, you get an API key to use when invoking the API. It’s a good idea to keep this sensitive information on the server, since if someone gains access to this information, they will be able to use your Stripe account. The secure proxy will protect this information so it’s never visible in the client.

Creating a database

The first step to creating a secure proxy is to create a database that will store the API key.

  1. From the app builder, click “Database” (upper right corner) or go to http://appery.io/database
  2. Click “Create new database.” For database name enter: StripeDB. Click “Create.”
  3. Now you need to create a new collection. Click “Create new collection.” Name the collection Credentials.
  4. Click “+Col” to create a new column. Name the column: key
  5. Create another column and name it: keyValue.
  6. Now you are going to enter the Stripe API key into the database.
    • Click “+Row” and enter api_key_proxy and its value.
      Your collection should look like this:
      credentials

This data is now secure. Next you are going to setup the proxy to use the information in this collection.

Creating a secure proxy

  1. Click on the “Secure Proxy” tab or go to http://appery.io/proxy.
  2. Click “Create new proxy,” and name the proxy StripeProxy. Click “Create.”
  3. In the proxy setting page, check “Use proxy + store sensitive (private) data in database.”
  4. For “Database,” select StripeDB.
  5. For “Collection,” select Credentials.
  6. For “Key column,” select key and for “Value column” select keyValue.
  7. Click “Save.”

The last step is configure the service to use this proxy.

Configuring the Stripe API

The plugin has two services:  StripePayment_CardTokenService and StripePayment_ChargeService. The previously created proxy should be enabled for both:

  1. Inside the App Builder, open Services > StripePayment_CardTokenService service.
  2. For “Use Appery.io proxy,” click the refresh button to load the new proxy you just created and select it (StripeProxy).
  3. Repeat the same for StripePayment_ChargeService.

More plugin details

The application is simple. It has only two pages. The first page contains the upper block for the user’s card data, the bottom block contains the payment data and the processing button, and between blocks, there is a hidden area for an error message:

stripe_home

The second page contains a message about successful charging only. myCash can be changed to your site/shop name in Services > StripePayment_Settings > shopName:

stripe_final

Don’t forget to change your API key when going live.