OP PAYMENT WIDGET V3

This Project is used to build the payment widget

Development

open terminal

Use node v14

$ npm start

It will install the dependencies, run eslint, unit test and watch for changes.

now open a second terminal to run the server on port 3333

$ npm run serve

It can be tested in local-examples/checkout.html and local-examples/checkout-prod.html (minified css and js) local-examples/checkout-single-page-preset.html and local-examples/checkout-single-page-no-preset.html demonstrate how to use the same page for payment and summary

Note: Some dependencies are private and not available in npmjs.com, If you clone this project from Github, you will need to have .npmrc file pointing to our server to be able to get these dependencies.

There is a possibility to use Docker compose for development, and this will make sure that you are running to a similar environment as the server

First to build the run the container on port 3333 Note: this won't listen to changes for development mode

$ docker-compose up

To find the id of the freshly running container

$ docker ps

To run an interactive bash on this container replace IdOfContainer with the id of freshly running container then you have the possibility to run test or npm start to watch for changes as well Note: "exit" to get out of bash

$ docker exec -it IdOfContainer sh

Functional tests

Add following config values in .env file:

TESTMERCHANT_CODE={MERCHANT_CODE}
TESTMERCHANT_PAYMENT_TOKEN={PAYMENT_TOKEN}
BROWSERSTACK_USER={BROWSERSTACK_USER}
BROWSERSTACK_KEY={BROWSERSTACK_KEY}

Ask team members to share these credentials in case you don't have.

Optionally if you want run the tests in debug mode:

NODE_DEBUG=debug

Running functional tests on Docker (recommended)

1. Install docker on your machine and start docker engine

2. To execute the docker-compose yml file use docker-compose -f docker-compose-tests.yml up Add the -d flag at the end for detached execution

3. You can now see 2 nodes (Chrome and Firefox) linked to Selenium Hub (http://localhost:4444/grid/console)

4. npm run functional-test-docker-firefox , to run on Firefox and npm run functional-test-docker-chrome to run on Chrome.

5. To view the tests running on docker containers, we will need to download (https://www.realvnc.com/en/connect/download/viewer/). Add the browsers with port number, Firefox- 0.0.0.0:6902 and Chrome- 0.0.0.0:6900. The username and password when prompted is - secret.

6. To shut-down the containers after, use docker-compose -f docker-compose-tests.yml down

Running tests locally on BrowserStack (optional method to run tests)

1. Download the BrowserStack binary locally - https://www.browserstack.com/local-testing/automate

2. Start the binary and set the browserstack user and access key.

3. Run the tests - npm run functional-test

4. Go to browserstack.com -> automate. Here you can see the session running.

Production Build

$ npm run build