K5 Playground

Simple shopping site using PayPal

30 min
Aihara
  1. 1. Information
    1. 1.1. Ingredients
    2. 1.2. Functions
    3. 1.3. Requirements
      1. 1.3.1. Database
  2. 2. Create the application
    1. 2.1. Frontend
    2. 2.2. Backend
  3. 3. Deploy the application
    1. 3.1. Setup datastore and data
    2. 3.2. Backend
    3. 3.3. Frontend
  4. 4. Download
  5. 5. Version

Before cloud era, implementing a payment function was really hard, but now it’s really easy by Payment as a Service. In this tutorial, I explain how to develop a basic shopping service with PayPal.

Information

Ingredients

  • Template: Simple Search
  • API Loigcs: PayPal Payments API, MongoDB

Functions

  • Using PayPal payments.
  • Storing products and payments in MongoDB.

Requirements

Database

To run this program, you need to create MongoDB collections.

  • collections
    • sample_product

Create the application

Frontend

  1. Choose Simple Search Template.

  2. Customize the UI in K5 Playground.

Backend

  1. Edit API Logics to set credentials for PayPal.

    1. Click POST payment endpoint.

    2. Edit the code of Create a Payment API Logic.

      Edit the parameter of configure method.

      1
      2
      3
      4
      5
      paypal.configure({
        mode: 'sandbox',
        client_id: '[client id]',
        client_secret: '[client secret]',
      });

    3. Click GET payment/{paymentId} endpoint.

      Same as 1-2.

    4. Click POST payment/{paymentId}/execute endpoint.

      Same as 1-2.

  2. Set URL to redirect from PayPal site to your site.

    1. Click POST payment endpoint.

    2. Edit the code of Create Paypal Parameters API Logic.

      Edit the property of redirect_urls.

      1
      2
      3
      4
      redirect_urls: {
        return_url: 'http://[FRONTEND_DOMAIN]/payment',
        cancel_url: 'http://[FRONTEND_DOMAIN]/',
      },

  3. Download the application.

Deploy the application

Setup datastore and data

  1. Prepare for product images used in the application.

    1. Put all images into frontend/public/img directory.

  2. Set up MongoDB.

    1. Create a new database named FrontendDB.

    2. Create a new collection named sample_product in the database.

    3. Insert product information into the collection.

      This product data will be used to show products on the frontend. The format is as follows.

      1
      2
      3
      4
      5
      6
      7
      {
        "category" : "Stationary",
        "name" : "Blue Fountain Pen",
        "description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.",
        "image_url" : "/img/pen.jpg",
        "price" : "100"
      }

Backend

1
2
cd backend
cf push [APP_NAME]

Frontend

1
2
3
4
5
cd frontend
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

Download

Version

  • Simple Search Template: v1.0.0
Tutorial React.js Flux Node.js Swagger BFF SPA Microservice K5 K5 CF MongoDB Simple Search Paypal