Skip to content

feat(payment-link): add config for enabling form button only when form is complete #7517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

kashif-m
Copy link
Contributor

@kashif-m kashif-m commented Mar 13, 2025

Type of Change

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

Description

This PR adds a payment link config for controlling the behavior or Submit button on payment links (enable_button_only_on_form_ready)

  • If enable_button_only_on_form_ready is true - disallow incomplete form submission
  • [DEFAULT and CURRENT] If false - allow incomplete form submission and throw validation errors

Additional Changes

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

Motivation and Context

This helps add more granular control of the payment links UX.

How did you test it?

Locally using local SDK changes

1. Update business profile to enable confirm button only when form is ready for submission

cURL

curl --location --request POST 'http://localhost:8080/account/merchant_1741692513/business_profile/pro_0pSrloAVzi0xbnpnP0mY' \
    --header 'Content-Type: application/json' \
    --header 'api-key: test_admin' \
    --data '{"is_connector_agnostic_mit_enabled":true,"is_network_tokenization_enabled":true,"payment_link_config":{"allowed_domains":["*"],"custom_message_for_card_terms":"Hello","enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","payment_button_text":"Proceed to Payment!","sdk_ui_rules":{".Label":{"fontWeight":"700 !important","fontSize":"13px !important","color":"#003264 !important","backgroundColor":"red !important","opacity":"1 !important"}},"branding_visibility":false,"business_specific_configs":{"style1":{"enabled_saved_payment_method":true,"theme":"#003264","logo":"https://hyperswitch.io/favicon.ico","display_sdk_only":true,"payment_button_text":"Confirmer","enable_button_only_on_form_ready":true,"custom_message_for_card_terms":"Pour vérifier votre compte, un montant de 0,00 € sera débité lorsque vous aurez cliqué sur le bouton « Confirmer »","sdk_ui_rules":{".Label":{"fontWeight":"600 !important","fontSize":"14px !important","color":"#003264 !important","opacity":"1 !important"},".Input":{"border":"1px solid #003264"},".Input::placeholder":{"fontWeight":"400","fontSize":"16px","color":"#00326480"},".TermsTextLabel":{"color":"#003264 !important","opacity":"1 !important"},".SaveWalletDetailsLabel":{"fontSize":"13px !important","color":"#003264 !important","opacity":"1 !important"},":has(> .TermsTextLabel)":{"opacity":"1 !important"},".SaveWalletDetailsLabel em":{"fontStyle":"normal"}},"payment_link_ui_rules":{"#submit":{"color":"#003264","fontWeight":"700","fontSize":"19px","padding":"25px 0","borderRadius":"5px","backgroundColor":"#FFA445"},"#hyper-checkout-sdk":{"backgroundColor":"#FFFFFF"}}},"style2":{"enabled_saved_payment_method":true,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico"},"au":{"theme":"#2167AE","enable_button_only_on_form_ready":true,"payment_button_text":"Pay now","display_sdk_only":true,"payment_link_ui_rules":{"#submit":{"height":"48px","width":"max-content","borderRadius":"50px","padding":"0 20px","marginTop":"24px"},"#submit.processing":{"paddingLeft":"50px !important","paddingRight":"50px !important"}},"sdk_ui_rules":{".Tab":{"display":"none"},".Input, .Input:focus, .Input--invalid, .Input--empty":{"border":"none","boxShadow":"none","borderRadius":"0","padding":"0 !important","paddingBottom":"4px !important"},".Input, .Input:focus, .Input--empty":{"borderBottom":"1px solid #23366F !important","color":"#23366F"},".Input--invalid":{"borderBottom":"1px solid #CB4B40 !important"},".Label":{"marginLeft":"0","color":"#2167AE","opacity":"1 !important","fontSize":"12px !important"},".Label--invalid, .Input--invalid, .Error":{"color":"#CB4B40 !important","opacity":"1 !important"},".InputLogo--empty":{"color":"#979797"},".InputLogo":{"color":"#23366F","margin":"-30px"},".InputLogo--invalid":{"color":"#CB4B40"},".OrPayUsingLabel, .SaveWalletDetailsLabel, .CheckboxLabel, .TermsTextLabel, .InfoElement":{"color":"#003264 !important","opacity":"1 !important"},".OrPayUsingLine":{"backgroundColor":"#003264"}}}}}}'

Response

{"merchant_id":"merchant_1741692513","profile_id":"pro_0pSrloAVzi0xbnpnP0mY","profile_name":"IN_default","return_url":"https://google.com/success","enable_payment_response_hash":true,"payment_response_hash_key":"kFqRl8UUlHycFDeV4xy9ibEW1bDKgNa7vfd2iYfzgfzc6x3grTHhCb2V2IoMc9uL","redirect_to_merchant_with_http_post":false,"webhook_details":{"webhook_version":"1.0.1","webhook_username":"random","webhook_password":"pass","webhook_url":"https://webhook.site/0728473e-e0aa-4bb6-9eea-85435cf54380","payment_created_enabled":true,"payment_succeeded_enabled":true,"payment_failed_enabled":true},"metadata":null,"routing_algorithm":null,"intent_fulfillment_time":900,"frm_routing_algorithm":null,"payout_routing_algorithm":null,"applepay_verified_domains":null,"session_expiry":900,"payment_link_config":{"domain_name":null,"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","seller_name":null,"sdk_layout":null,"display_sdk_only":null,"enabled_saved_payment_method":true,"hide_card_nickname_field":null,"show_card_form_by_default":null,"transaction_details":null,"background_image":null,"details_layout":null,"payment_button_text":"Proceed to Payment!","custom_message_for_card_terms":"Hello","payment_button_colour":null,"skip_status_screen":null,"payment_button_text_colour":null,"background_colour":null,"sdk_ui_rules":{".Label":{"opacity":"1 !important","fontSize":"13px !important","backgroundColor":"red !important","color":"#003264 !important","fontWeight":"700 !important"}},"payment_link_ui_rules":null,"enable_button_only_on_form_ready":null,"business_specific_configs":{"style2":{"theme":"#1A1A1A","logo":"https://hyperswitch.io/favicon.ico","seller_name":null,"sdk_layout":null,"display_sdk_only":null,"enabled_saved_payment_method":true,"hide_card_nickname_field":null,"show_card_form_by_default":null,"transaction_details":null,"background_image":null,"details_layout":null,"payment_button_text":null,"custom_message_for_card_terms":null,"payment_button_colour":null,"skip_status_screen":null,"payment_button_text_colour":null,"background_colour":null,"sdk_ui_rules":null,"payment_link_ui_rules":null,"enable_button_only_on_form_ready":null},"au":{"theme":"#2167AE","logo":null,"seller_name":null,"sdk_layout":null,"display_sdk_only":true,"enabled_saved_payment_method":null,"hide_card_nickname_field":null,"show_card_form_by_default":null,"transaction_details":null,"background_image":null,"details_layout":null,"payment_button_text":"Pay now","custom_message_for_card_terms":null,"payment_button_colour":null,"skip_status_screen":null,"payment_button_text_colour":null,"background_colour":null,"sdk_ui_rules":{".Input, .Input:focus, .Input--invalid, .Input--empty":{"border":"none","padding":"0 !important","boxShadow":"none","borderRadius":"0","paddingBottom":"4px !important"},".Input--invalid":{"borderBottom":"1px solid #CB4B40 !important"},".Tab":{"display":"none"},".Input, .Input:focus, .Input--empty":{"color":"#23366F","borderBottom":"1px solid #23366F !important"},".OrPayUsingLabel, .SaveWalletDetailsLabel, .CheckboxLabel, .TermsTextLabel, .InfoElement":{"opacity":"1 !important","color":"#003264 !important"},".OrPayUsingLine":{"backgroundColor":"#003264"},".Label--invalid::after":{"color":"#CB4B40","content":"' *'"},".Label":{"opacity":"1 !important","color":"#2167AE","marginLeft":"0","fontSize":"12px !important"},".InputLogo":{"color":"#23366F","margin":"-30px"},".Label::after":{"content":"' *'","color":"#23366F"},".InputLogo--empty":{"color":"#979797"},".InputLogo--invalid":{"color":"#CB4B40"},".Label--invalid, .Input--invalid, .Error":{"opacity":"1 !important","color":"#CB4B40 !important"}},"payment_link_ui_rules":{"#submit":{"borderRadius":"50px","height":"48px","width":"max-content","padding":"0 20px","marginTop":"24px"},"#submit.processing":{"paddingLeft":"50px !important","paddingRight":"50px !important"}},"enable_button_only_on_form_ready":true},"style1":{"theme":"#003264","logo":"https://hyperswitch.io/favicon.ico","seller_name":null,"sdk_layout":null,"display_sdk_only":true,"enabled_saved_payment_method":true,"hide_card_nickname_field":null,"show_card_form_by_default":null,"transaction_details":null,"background_image":null,"details_layout":null,"payment_button_text":"Confirmer","custom_message_for_card_terms":"Pour vérifier votre compte, un montant de 0,00 € sera débité lorsque vous aurez cliqué sur le bouton « Confirmer »","payment_button_colour":null,"skip_status_screen":null,"payment_button_text_colour":null,"background_colour":null,"sdk_ui_rules":{".TermsTextLabel":{"opacity":"1 !important","color":"#003264 !important"},".Input":{"border":"1px solid #003264"},".Label":{"opacity":"1 !important","color":"#003264 !important","fontSize":"14px !important","fontWeight":"600 !important"},".Input::placeholder":{"color":"#00326480","fontSize":"16px","fontWeight":"400"},".SaveWalletDetailsLabel":{"fontSize":"13px !important","color":"#003264 !important","opacity":"1 !important"},":has(> .TermsTextLabel)":{"opacity":"1 !important"},".SaveWalletDetailsLabel em":{"fontStyle":"normal"}},"payment_link_ui_rules":{"#submit":{"color":"#003264","padding":"25px 0","fontSize":"19px","fontWeight":"700","borderRadius":"5px","backgroundColor":"#FFA445"},"#hyper-checkout-sdk":{"backgroundColor":"#FFFFFF"}},"enable_button_only_on_form_ready":true}},"allowed_domains":["*"],"branding_visibility":false},"authentication_connector_details":null,"use_billing_as_payment_method_billing":true,"extended_card_info_config":null,"collect_shipping_details_from_wallet_connector":false,"collect_billing_details_from_wallet_connector":false,"always_collect_shipping_details_from_wallet_connector":false,"always_collect_billing_details_from_wallet_connector":false,"is_connector_agnostic_mit_enabled":true,"payout_link_config":null,"outgoing_webhook_custom_http_headers":null,"tax_connector_id":null,"is_tax_connector_enabled":false,"is_network_tokenization_enabled":true,"is_auto_retries_enabled":false,"max_auto_retries_enabled":null,"always_request_extended_authorization":null,"is_click_to_pay_enabled":false,"authentication_product_ids":null,"card_testing_guard_config":{"card_ip_blocking_status":"disabled","card_ip_blocking_threshold":3,"guest_user_card_blocking_status":"disabled","guest_user_card_blocking_threshold":10,"customer_id_blocking_status":"disabled","customer_id_blocking_threshold":5,"card_testing_guard_expiry":3600},"is_clear_pan_retries_enabled":false,"force_3ds_challenge":false}
2. Create payment link

cURL

curl --location --request POST 'http://localhost:8080/payments' \
    --header 'Content-Type: application/json' \
    --header 'Accept: application/json' \
    --header 'api-key: dev_sI7y2RBalVSE3nYh5k4Gs2WGws277uoKwu3Y7gM9y2U2dmDSVymbHUAqPt3zDsHr' \
    --data-raw '{"customer_id":"cus_t0I7DMr69stOdG3QaLZP","profile_id":"pro_0pSrloAVzi0xbnpnP0mY","customer_acceptance":{"acceptance_type":"online","accepted_at":"1963-05-03T04:07:52.723Z","online":{"ip_address":"127.0.0.1","user_agent":"amet irure esse"}},"amount":100,"currency":"USD","payment_link":true,"capture_method":"automatic","email":"[email protected]","session_expiry":100000,"return_url":"https://example.com"}'

Response

{"payment_id":"pay_ufjEW9U5WAea89stlSED","merchant_id":"merchant_1741692513","status":"requires_payment_method","amount":100,"net_amount":100,"shipping_cost":null,"amount_capturable":100,"amount_received":null,"connector":null,"client_secret":"pay_ufjEW9U5WAea89stlSED_secret_eg6sZLpO9LH60crrsV0I","created":"2025-03-13T08:47:48.496Z","currency":"USD","customer_id":"cus_t0I7DMr69stOdG3QaLZP","customer":{"id":"cus_t0I7DMr69stOdG3QaLZP","name":"John Nether","email":"[email protected]","phone":"6168205362","phone_country_code":"+1"},"description":null,"refunds":null,"disputes":null,"mandate_id":null,"mandate_data":null,"setup_future_usage":null,"off_session":null,"capture_on":null,"capture_method":"automatic","payment_method":null,"payment_method_data":null,"payment_token":null,"shipping":null,"billing":null,"order_details":null,"email":"[email protected]","name":"John Nether","phone":"6168205362","return_url":"https://example.com/","authentication_type":null,"statement_descriptor_name":null,"statement_descriptor_suffix":null,"next_action":null,"cancellation_reason":null,"error_code":null,"error_message":null,"unified_code":null,"unified_message":null,"payment_experience":null,"payment_method_type":null,"connector_label":null,"business_country":null,"business_label":"default","business_sub_label":null,"allowed_payment_method_types":null,"ephemeral_key":{"customer_id":"cus_t0I7DMr69stOdG3QaLZP","created_at":1741855668,"expires":1741859268,"secret":"epk_3ccf7b98c7c54188ba5d9230c3bd21fe"},"manual_retry_allowed":null,"connector_transaction_id":null,"frm_message":null,"metadata":null,"connector_metadata":null,"feature_metadata":null,"reference_id":null,"payment_link":{"link":"http://localhost:8080/payment_link/merchant_1741692513/pay_ufjEW9U5WAea89stlSED?locale=en","secure_link":"http://localhost:8080/payment_link/s/merchant_1741692513/pay_ufjEW9U5WAea89stlSED?locale=en","payment_link_id":"plink_fW4Nnwl7EcbrmjmOQ1pi"},"profile_id":"pro_0pSrloAVzi0xbnpnP0mY","surcharge_details":null,"attempt_count":1,"merchant_decision":null,"merchant_connector_id":null,"incremental_authorization_allowed":null,"authorization_count":null,"incremental_authorizations":null,"external_authentication_details":null,"external_3ds_authentication_attempted":false,"expires_on":"2025-03-14T12:34:28.493Z","fingerprint":null,"browser_info":null,"payment_method_id":null,"payment_method_status":null,"updated":"2025-03-13T08:47:48.504Z","split_payments":null,"frm_metadata":null,"extended_authorization_applied":null,"capture_before":null,"merchant_order_reference_id":null,"order_tax_amount":null,"connector_mandate_id":null,"card_discovery":null}

Things to validate

  1. Confirm button is greyed out and disabled if form is incomplete
Screenshot 2025-03-13 at 2 37 23 PM
  1. Confirm button is enabled once form is completely filled
Screenshot 2025-03-13 at 2 37 36 PM

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

@kashif-m kashif-m self-assigned this Mar 13, 2025
@kashif-m kashif-m requested review from a team as code owners March 13, 2025 08:48
@hyperswitch-bot hyperswitch-bot bot added the M-api-contract-changes Metadata: This PR involves API contract changes label Mar 13, 2025
@likhinbopanna likhinbopanna added this pull request to the merge queue Mar 17, 2025
Merged via the queue into main with commit 0be1f87 Mar 17, 2025
20 of 24 checks passed
@likhinbopanna likhinbopanna deleted the 7510-feature-add-functionality-to-enable-payment-link-form-button-only-when-form-is-filled branch March 17, 2025 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
M-api-contract-changes Metadata: This PR involves API contract changes Payment Links
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] add functionality to enable payment link form button only when form is filled
4 participants