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.

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.

• 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
• IBM Cloud Private, Open Kubernetes-based container platform with Cloud Foundry for application development and deployment, along with DevOps toolchain integration

• 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

To authenticate your requests you need to obtain a clientId and clientSecret.

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 you 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 you 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 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.

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.

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"}

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

• 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.

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

$ npm install --save
$ npm start

$ bash docker-run.sh

You can view the docker logs of your store,

$ docker logs fashion-store

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

Apache 2.0