WARNING: This repository is no longer maintained ⚠️

This repository will not be updated. The repository will be kept available in read-only mode.

Fashion Store with IBM Open Banking Platform

Imagine you are a merchant with an online store and your customers want to integrate with direct payments from banks to accommodate making purchases, securely and easily.

Or imagine you are a bank and want to offer an easy way for merchants to integrate digital direct payments into your legacy bank systems in order to unlock new digital channels and revenue streams and compete against the many online payment services, but you are averse to the risks of replacing legacy systems or moving directly to the public cloud. But you also need to comply to new regulation and compliance.

The IBM Open Banking Platform (IOBP) is a banking-as-a-service suite built on certain predefined industry standards that financial institutions can use to help accelerate their core-to-cloud journey.

In this code pattern, we will show you how to create a fashion store merchant site -- Here and Now -- that integrates with the IOBP Payments API of the IBM Open Banking Platform (IOBP). We will demonstrate a Node.js and React.js web application using REST API. The application showcases the scenario of a customer purchasing an item on the fashion store site and making a payment directly through their bank via the IBM Open Banking Platform (IOBP).

It has three primary sections:

1. The store catalog is on display for the customer to peruse and select items they wish to purchase.
2. The shopping cart where all the items that the customer has shown interest in appears for a final review before checking out.
3. After checking out, the customer can select the payment method and complete the purchase by going through the payment flow.

This code pattern is for developers who are looking to start building applications with payment integration using the IBM Open Banking Platform (IOBP). When you have completed this code pattern, you will understand how to:

• Create an online store with a catalog of items open to purchase.
• Build a Node.js/React.js web application to interact with the IOBP Payments API.

Architecture Flow

1. Customer enters the shopping catalog and places items in the cart to purchase.
2. Customer reviews the cart and proceeds to checkout and pay.
3. A payment initiate request is sent to the IBM Open Banking Platform to start the transaction.
4. The IBM Open Banking Platform initiates a single payment with the customer's bank.
5. Customer enters their credentials on the bank authentication page to authorize the transaction.
6. Once successfully authenticated, the payment submission is made from the customer's account.

Included Components

• IBM Open Banking Platform v1.1.0, IBM Open Banking Platform is a software suite that accelerates a bank's transformation to a platform economy
• API Connect, a comprehensive API management solution for your entire API lifecycle from creation to management

Featured Technologies

• Nodejs Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side
• Reactjs React.js is a JavaScript library for building user interfaces
• Docker Docker is a computer program that performs operating-system-level virtualization, also known as Containerization
• Curl Curl is a command line tool and library for transferring data with URLs
• REST API Representational State Transfer (REST) is an architectural style that defines a set of constraints to be used for creating web services

Register with the IBM Open Banking Platform

To authenticate your requests you need to obtain a Client ID and Client Secret.

1. If you dont have an IBMid yet, create an IBMid, https://www.ibm.com/account/us-en/signup/register.html. Click Continue, Proceed, Check your email for the 7-digit security code, copy-paste, Verify.

2. Create an account with an IBMid. Go to the IOBP Payments API portal https://psd2-payments-ibmopenbanking-demo.developer.us.apiconnect.ibmcloud.com/

3. Fill the form by entering 'Developer organization', 'Username' (unique for the portal) and 'Captcha'. Create new account.

4. Login. Enter 'Organization name'

5. Go to API Products, IBM Open Banking Payment Initiation API (1.1.0), Subscribe to the Default Plan

6. Register a new application by filling the 'Title', 'Description'. Set 'OAuth Redirect URI': http://localhost:8080. Submit

7. You now have a Client ID (Show next to the Details>Credentials>Client ID) and a Client Secret (Show Client Secret on top of the page)

8. Copy-paste your Client ID and Client Secret, you need this later

9. Go to API Products, IBM Open Banking Payment Initiation API (1.1.0), click Subscribe. Select your new application to subscribe and click Subscribe. You should see a notification 'Successfully subscribed to this plan'.

10. Open a new tab and go to the IOBP Admin API portal https://iobp-administration-ibmopenbanking-demo.developer.us.apiconnect.ibmcloud.com

11. Login. Enter Organization name.

12. Go to API Products, IBM Open Banking Administration API (1.1.0). Subscribe to the Default Plan

13. Register a new application by filling the 'Title', 'Description'. Set 'OAuth Redirect URI': http://localhost:8080. Submit

14. You now have a Client ID (Show next to the Details>Credentials>Client ID) and a Client Secret (Show Client Secret on top of the page)

15. Copy-paste your Client ID and Client Secret, you need this later

16. Go to API Products, IBM Open Banking Administration API (1.1.0), click Subscribe. Select your new application to subscribe and click Subscribe. You should see a notification 'Successfully subscribed to this plan'.

Update the code with Client ID and Client Secret

Update your local configuration file with your Client ID and Client Secret from the Payments API. The merchantId should be set in the next step, after registering your merchant.

In the 'src/server.js' file, change the IOBP Payments API Client ID and Client Secret, and the merchantId from IOBP Admin API.

// TODO change with the Client ID and Client Secret from the IOBP Payments API
const clientId = 'REPLACE_ME'
const clientSecret = 'REPLACE_ME'
// TODO change with merchantId from the IOBP Admin API 
const merchantId = 'REPLACE_ME'

The merchantId will be generated after the next step.

Register your Merchant

You need to register your merchant with the IBM Open Banking Platform (IOBP) because IOBP redirects the final result of the payment back to the merchant application. Use the Client ID and Client Secret of the IBM Open Banking Administration API (1.1.0) to set respectively the headers x-ibm-client-id and x-ibm-client-secret.

Also, in the --data payload of the request, change the name to your merchant name.

Request

curl --request POST \
  --url https://api.us.apiconnect.ibmcloud.com/ibmopenbanking-demo/iobp-administration/v1.1/merchants \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --header 'x-ibm-client-id: REPLACE_ME' \
  --header 'x-ibm-client-secret: REPLACE_ME' \
  --data '{"end_date":"2019-06-15","country":"United States","redirect_uri":"http://localhost:8080","countrySubDivision":"New York","taxId":"be2e44b06b34","name":"Remko Homestore","streetAddress1":"678 Lafayette Ave","effective_date":"2018-06-15","streetAddress2":"Suite 2B","postCode":"10003","cityOrTown":"New York"}'

You need the merchantId that is generated for you, to configure your merchantId variable in 'src/server.js'.

Response

...
"merchantId":"214b72a0-d241-11e8-a47f-eb7905db5dda"}

Running the Application

Manually deploy to local machine

1. Setup your machine
2. Clone the repository
3. Run application in Docker container OR Run application with npm

1. Setup your machine

• npm (v5.x)
• Node (version 8.9 or higher - note version 9 is not supported)

• to install specific Node version you can use nvm

  Example:

  • 1. nvm install --lts
  • 2. nvm use --lts
  • 3. Output Now using node v8.11.3 (npm v5.6.0)

• Docker, Go to the docker website and download the installer. After installation, run Docker.

2. Clone the repository

git clone https://github.ibm.com/Banksy/fashion-store.git

3. Run with Nodejs

$ npm install --save
$ npm start

3. Run with Docker

$ bash docker-run.sh

You can view the docker logs of your store,

$ docker logs fashion-store

Make a purchase

By default the application runs on port 8080.

1. Open the Here & Now store at http://localhost:8080
2. Click Shop to shop
3. Add an item to the cart
4. In the top right, click Cart(1)
5. Review your shopping cart, click CHECKOUT
6. Select the Bank icon on the left, this should load the avaible banks
7. Select the Forgerock bank
8. Click the Pay Now button
9. The Payment Setup response will redirect you to the bank login page
10. Register on the Forgerock bank page for a new account
11. Login with username/password
12. Select the Pay from account and click the Allow button
13. This will then result in running the Payment Submission
14. After a successful payment submission, the Payment Submission response will redirect to the redirect_uri of the merchant, which we defined as http://localhost:8080
15. Your merchant will load with a Successful Payment notification

License

This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.

Apache Software License (ASL) FAQ