feat(core): payment links - add support for custom background image and layout in details section #6725

kashif-m · 2024-12-03T06:45:30Z

Type of Change

Description

This PR introduces UI revamps to the payment links by including below changes - (described in #6711)

Introduce branding_visibility in business profile's payment link config
Introduce details_layout and background_image in both business profile and payments create API
Consume these values in payment link's template

Additional Changes

This PR modifies the API contract
This PR modifies the database schema
This PR modifies application configuration/environment variables

Motivation and Context

Helps configure details section for payment links, and fixes a few existing bugs around logos.

How did you test it?

Overview

Things to test and verify -

Background image in details section
- Provision for background images is added in the details section of the payment links
- Below configs are provided for configuring the image
  - Image URL
  - Image width
  - Image positioning
Feasibility of rectangular images as logo
- Images with rectagular dimenstions can be used as merchant logo
Branding visibility
- HyperSwitch branding toggle in the payment links
Layouts for details section
- Multiple layouts for details section
- Layout1
- Layout2

Steps for testing

Details layout

Provision for configuring details_layout is at both profile level and at payments API level

1. Default layout (layout1)

Create a default payment link (without configuring details_layout)

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc."}}'

Set layout1 in business profile config

cURL

curl --location --request POST 'http://localhost:8080/account/merchant_1733294735/business_profile/pro_r48ZhNBTND9A4PAc5rHT' \
    --header 'Content-Type: application/json' \
    --header 'api-key: test_admin' \
    --data '{"payment_link_config":{"allowed_domains":["*"],"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","details_layout":"layout1"}}'

Create a payment link after configuring details_layout in business profile

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc."}}'

Create a payment link using layout1 in the payments API

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout1"}}'

2. Layout 2

Set layout2 in business profile config

cURL

curl --location --request POST 'http://localhost:8080/account/merchant_1733294735/business_profile/pro_r48ZhNBTND9A4PAc5rHT' \
    --header 'Content-Type: application/json' \
    --header 'api-key: test_admin' \
    --data '{"payment_link_config":{"allowed_domains":["*"],"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","details_layout":"layout2","business_specific_configs":{"style1":{"enabled_saved_payment_method":true,"theme":"#FEFEFE","logo":"https://hyperswitch.io/favicon.ico"},"style2":{"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico"}}}}'

Create a payment link after configuring details_layout in business profile

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc."}}'

Create a payment link using layout2 in the payments API

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout2"}}'

Branding visibility

Provision for toggling branding visibility is at profile level

1. Default visibility

Create a payment link

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout2"}}'

2. Hidden visibility

Set branding_visibility to true in business profile config

cURL

curl --location --request POST 'http://localhost:8080/account/merchant_1733294735/business_profile/pro_r48ZhNBTND9A4PAc5rHT' \
    --header 'Content-Type: application/json' \
    --header 'api-key: test_admin' \
    --data '{"payment_link_config":{"allowed_domains":["*"],"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","branding_visibility":false,"business_specific_configs":{"style1":{"enabled_saved_payment_method":true,"theme":"#FEFEFE","logo":"https://hyperswitch.io/favicon.ico"},"style2":{"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico"}}}}'

Create a payment link

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout2"}}'

Background image

Provision for setting background image is at both profile and payments API level

1. Background images in business profile

Set background image in business profile (url and size)

cURL

curl --location --request POST 'http://localhost:8080/account/merchant_1733294735/business_profile/pro_r48ZhNBTND9A4PAc5rHT' \
    --header 'Content-Type: application/json' \
    --header 'api-key: test_admin' \
    --data '{"payment_link_config":{"allowed_domains":["*"],"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","background_image":{"url":"https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg","size":"cover"},"business_specific_configs":{"style1":{"enabled_saved_payment_method":true,"theme":"#FEFEFE","logo":"https://hyperswitch.io/favicon.ico"},"style2":{"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico"}}}}'

Create a payment link

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout2"}}'

2. Background images in payments API

Send the background image in the payments API

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_CWKVSn8Qjyb1Qjt6AGNmivVRPm3mgmoS9GDhKPvTB7vVVAbktxV6wPnX3QcJNstt' \
    --data-raw '{"authentication_type":"three_ds","customer_id":"cus_rFGS1qK0MTSxdj0m5aqo","profile_id":"pro_r48ZhNBTND9A4PAc5rHT","amount":100,"currency":"HKD","payment_link":true,"setup_future_usage":"off_session","description":"This is my description of why this payment was requested.","connector":["adyen"],"capture_method":"automatic","billing":{"address":{"line1":"1467","line2":"Harrison Street","line3":"Harrison Street","city":"San Fransico","state":"CA","zip":"94122","country":"US","first_name":"John","last_name":"Doe"},"phone":{"number":"8056594427","country_code":"+91"}},"email":"[email protected]","session_expiry":100000,"return_url":"https://example.com","payment_link_config":{"theme":"#14356f","logo":"https://static.wikia.nocookie.net/logopedia/images/4/41/Zurich-1997-Horizontal.png","seller_name":"Hyperswitch Inc.","details_layout":"layout2","background_image":{"url":"https://img.freepik.com/free-photo/abstract-blue-geometric-shapes-background_24972-1841.jpg","size":"cover"}}}'

Checklist

I formatted the code cargo +nightly fmt --all
I addressed lints thrown by cargo clippy
I reviewed the submitted code
I added unit tests for my changes where possible

semanticdiff-com · 2024-12-03T06:45:33Z

Review changes with

Changed Files

File	Status
crates/router/src/core/payment_link.rs	45% smaller
crates/router/src/core/payment_link/payment_link_initiate/payment_link.js	16% smaller
crates/openapi/src/openapi.rs	8% smaller
crates/openapi/src/openapi_v2.rs	8% smaller
crates/router/src/core/payment_link/payment_link_initiate/payment_link.html	1% smaller
api-reference-v2/openapi_spec.json	0% smaller
api-reference/openapi_spec.json	0% smaller
crates/api_models/src/admin.rs	0% smaller
crates/api_models/src/payments.rs	0% smaller
crates/common_enums/src/enums.rs	0% smaller
crates/common_enums/src/enums/ui.rs	0% smaller
crates/diesel_models/src/business_profile.rs	0% smaller
crates/diesel_models/src/payment_intent.rs	0% smaller
crates/hyperswitch_domain_models/src/lib.rs	0% smaller
crates/router/src/core/payment_link/payment_link_initiate/payment_link.css	Unsupported file format
crates/router/src/core/payments/transformers.rs	0% smaller
crates/router/src/types/transformers.rs	0% smaller

…ckground-image

…d visibility in payment links template

…age' into 6711-payment-links-background-image

…ckground-image

kashif-m added 2 commits December 2, 2024 19:21

feat(payment_link): add support for background image

0c2691f

feat: custom deserializer and serializer for ElementSize

376253d

kashif-m added 2 commits December 4, 2024 11:57

Merge remote-tracking branch 'origin/main' into 6711-payment-links-ba…

7a160ed

…ckground-image

feat(core): payment links - consume layout, background image and bran…

e5119b6

…d visibility in payment links template

hyperswitch-bot bot added the M-api-contract-changes Metadata: This PR involves API contract changes label Dec 5, 2024

kashif-m force-pushed the 6711-payment-links-background-image branch from f091e02 to e5119b6 Compare December 5, 2024 20:53

hyperswitch-bot bot removed the M-api-contract-changes Metadata: This PR involves API contract changes label Dec 5, 2024

chore: run formatter

887ef06

kashif-m linked an issue Dec 5, 2024 that may be closed by this pull request

[FEATURE] payment link background configurations #6711

Open

2 tasks

kashif-m changed the title ~~6711 payment links background image~~ feat(core): payment links - add support for custom background image and layout in details section Dec 5, 2024

kashif-m added 3 commits December 6, 2024 02:29

chore: generate openapi spec

ea9a367

Merge remote-tracking branch 'origin/6711-payment-links-background-im…

1d3a18c

…age' into 6711-payment-links-background-image

Merge remote-tracking branch 'origin/main' into 6711-payment-links-ba…

dd680f5

…ckground-image

hyperswitch-bot bot added the M-api-contract-changes Metadata: This PR involves API contract changes label Dec 5, 2024

chore: fix openapi spec

2e235da

kashif-m force-pushed the 6711-payment-links-background-image branch 2 times, most recently from f47b37f to 2e235da Compare December 6, 2024 07:24

kashif-m and others added 3 commits December 6, 2024 13:40

chore: clippy fixes and openapi spec re-generation

13a16a0

Merge remote-tracking branch 'origin/main' into 6711-payment-links-ba…

2719fb2

…ckground-image

chore: run formatter

70422cd

kashif-m marked this pull request as ready for review December 6, 2024 12:53

kashif-m requested review from a team as code owners December 6, 2024 12:53

chore: re-generate openAPI docs

7b37ab8

kashif-m added the Payment Links label Dec 9, 2024

kashif-m self-assigned this Dec 9, 2024

jarnura approved these changes Dec 10, 2024

View reviewed changes

cookieg13 approved these changes Dec 11, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core): payment links - add support for custom background image and layout in details section #6725

feat(core): payment links - add support for custom background image and layout in details section #6725

kashif-m commented Dec 3, 2024 •

edited

Loading

semanticdiff-com bot commented Dec 3, 2024 •

edited

Loading

feat(core): payment links - add support for custom background image and layout in details section #6725

Are you sure you want to change the base?

feat(core): payment links - add support for custom background image and layout in details section #6725

Conversation

kashif-m commented Dec 3, 2024 • edited Loading

Type of Change

Description

Additional Changes

Motivation and Context

How did you test it?

Checklist

semanticdiff-com bot commented Dec 3, 2024 • edited Loading

kashif-m commented Dec 3, 2024 •

edited

Loading

semanticdiff-com bot commented Dec 3, 2024 •

edited

Loading