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.
Create a new app
To start, you are going to create a new app.
- Click “Create new app.” For app name, enter: StripePayment (use any name you want) and click “Create.”
- 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
- To import the plugin, click Create New > From Plug-in:
- Check the box for Stripe Payment API:
- Click “Import selected plug-ins.”
- Select the StripePayment_PaymentScreen page as start page.
- 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.
- From the app builder, click “Database” (upper right corner) or go to http://appery.io/database
- Click “Create new database.” For database name enter: StripeDB. Click “Create.”
- Now you need to create a new collection. Click “Create new collection.” Name the collection Credentials.
- Click “+Col” to create a new column. Name the column: key
- Create another column and name it: keyValue.
- Now you are going to enter the Stripe API key into the database.
This data is now secure. Next you are going to setup the proxy to use the information in this collection.
Creating a secure proxy
- Click on the “Secure Proxy” tab or go to http://appery.io/proxy.
- Click “Create new proxy,” and name the proxy StripeProxy. Click “Create.”
- In the proxy setting page, check “Use proxy + store sensitive (private) data in database.”
- For “Database,” select StripeDB.
- For “Collection,” select Credentials.
- For “Key column,” select key and for “Value column” select keyValue.
- 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:
- Inside the App Builder, open Services > StripePayment_CardTokenService service.
- For “Use Appery.io proxy,” click the refresh button to load the new proxy you just created and select it (StripeProxy).
- 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:
The second page contains a message about successful charging only. myCash can be changed to your site/shop name in Services > StripePayment_Settings > shopName:
Don’t forget to change your API key when going live.