build(docker): add web client and control center services to docker compose setup

[prasad89]

Type of Change

• [ ] Bugfix
• [x] New feature
• [ ] Enhancement
• [ ] Refactoring
• [ ] Dependency updates
• [ ] Documentation
• [ ] CI/CD

Description

Added web client and control center services to docker-compose.yml REF : #4110

Additional Changes

• [ ] This PR modifies the API contract
• [ ] This PR modifies the database schema
• [x] This PR modifies application configuration/environment variables

[prasad89]

Did you test the changes in this PR? How does the setup process look like?

Yes, I have tested changes locally by following after doing docker compose up -d I'm able to see UI with Hyperswitch Unified Checkout text on page.

[SanchithHegde]

Yes, I have tested changes locally by following after doing docker compose up -d I'm able to see UI with Hyperswitch Unified Checkout text on page.

If you're seeing only the text on the page, then the setup in incomplete, you should be able to see a demo store on the left, and a form to enter card details on the right as well, if you set it up correctly. Could you open the network tab in the browser developer tools and fix any problems that you notice?

[prasad89]

@SanchithHegde Thank you for guiding me in the right direction. I've checked the network tab and fixed errors by adding the following block in the hyperswitch-web section:

- HYPERSWITCH_PUBLISHABLE_KEY=PUBLISHABLE_KEY
- HYPERSWITCH_SECRET_KEY=SECRET_KEY
- HYPERSWITCH_SERVER_URL=http://hyperswitch-server:8080
- HYPERSWITCH_CLIENT_URL=http://hyperswitch-web:9050
- SELF_SERVER_URL=http://hyperswitch-web:5252

For HYPERWITCH_PUBLISHABLE_KEY and HYPERWITCH_SECRET_KEY, I've followed the steps mentioned in the documentation and generated the keys. After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

[prasad89]

Did you test the changes in this PR? How does the setup process look like?

To set up, create a .env file and configure the following keys:

HYPERSWITCH_PUBLISHABLE_KEY=your_publishable_key
HYPERSWITCH_SECRET_KEY=your_secret_key
HYPERSWITCH_SERVER_URL=http://hyperswitch-server:8080
HYPERSWITCH_CLIENT_URL=http://hyperswitch-web:9050
SELF_SERVER_URL=http://hyperswitch-web:5252

Then execute docker-compose up -d.

[SanchithHegde]

After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

Could you please include screenshots for the same?

[prasad89]

After this changes I'm able to see the demo store on the left and a form to enter card details on the right.

Could you please include screenshots for the same?

[prasad89]

Looks like I need to further investigate and fix environment variables for the web. HyperLoader is still not functioning, but I have managed to make the control center functional.

[prasad89]

@SanchithHegde I got the card details in right hand side now.

[prasad89]

Hello @SanchithHegde can you review the changes?

[prasad89]

@lsampras, I've addressed your review. Could you please review it? Additionally, I'm encountering a 401 unauthorized status when attempting to load the SDK. I've created both HYPERSWITCH_PUBLISHABLE_KEY and HYPERSWITCH_SECRET_KEY, and exported them accordingly. I can confirm that HYPERSWITCH_PUBLISHABLE_KEY is visible at localhost:5252/config. Could you provide any guidance on how to proceed? Your assistance would be greatly appreciated.

[prasad89]

I'm getting this errors on hyperswitch-router:standalone

Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found
thread 'main' panicked at crates/router/src/bin/router.rs:14:10:
Unable to construct application configuration: ConfigurationError(Some errors occurred:
Unable to deserialize `stripe` as `api_models::enums::PayoutConnectors`: Matching variant not found)
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

@SanchithHegde do you have any idea regarding this?

[prasad89]

Thanks @SanchithHegde and @lsampras for your time and approving this PR. This will keep me motivating to contribute further.