[WEB - SDK] - Add Payment Method with Dynamic Field Rendering - Affirm

sakksham7 commented 1 month ago

The Hyperswitch SDK is a versatile tool built to streamline payment integration for developers. It simplifies the process of adding multiple payment methods, allowing you to quickly implement support for various gateways without the need to manually integrate each one. With Hyperswitch, you can efficiently manage payments across platforms, reducing complexity and boosting development speed.

Getting started

Get familiar with ReScript.
Check the README.md for project structure and setup instructions.
To setup locally, follow these steps

#  Clone repository
cd hyperswitch-web
yarn install
yarn run server     # This starts the mock server
yarn run re:start   # In another terminal

# Start Demo App in another terminal
cd hyperswitch-react-demo-app
yarn install
yarn run start        # This starts the demo app

Description:

We are looking to implement a new payment method in our WebSDK that supports dynamic field rendering. The goal is to allow the backend to define the fields required for the payment method and have the frontend WebSDK render these fields dynamically based on the response.

This feature should be flexible enough to handle different payment methods, each potentially requiring different types of input fields (e.g., text fields, dropdowns, checkboxes, etc.).

Requirements:

Payment Method Integration Details:

In this section, we provide details on the payment call response and the confirm call payload for the newly integrated payment method. Ensure you have configured the payment method at Hyperswitch Dashboard correctly. The backend already includes support for this payment method, so no additional configuration is needed.

Payment Method List Response for Affirm -

{
 "payment_method": "pay_later",
 "payment_method_types": [
   {
     "payment_method_type": "affirm",
     "payment_experience": [
       {
         "payment_experience_type": "redirect_to_url",
         "eligible_connectors": ["adyen"]
       }
     ],
     "card_networks": null,
     "bank_names": null,
     "bank_debits": null,
     "bank_transfers": null,
     "required_fields": {
       "billing.address.first_name": {
         "required_field": "payment_method_data.billing.address.first_name",
         "display_name": "card_holder_name",
         "field_type": "user_full_name",
         "value": "joseph"
       },
       "billing.address.state": {
         "required_field": "payment_method_data.billing.address.state",
         "display_name": "state",
         "field_type": "user_address_state",
         "value": "California"
       },
       "payment_method_data.billing.phone.number": {
         "required_field": "billing.phone.number",
         "display_name": "phone_number",
         "field_type": "user_phone_number",
         "value": null
       },
       "billing.address.city": {
         "required_field": "payment_method_data.billing.address.city",
         "display_name": "city",
         "field_type": "user_address_city",
         "value": "San Fransico"
       },
       "billing.phone.country_code": {
         "required_field": "payment_method_data.billing.phone.country_code",
         "display_name": "dialing_code",
         "field_type": "user_phone_number_country_code",
         "value": "+91"
       },
       "billing.address.line2": {
         "required_field": "payment_method_data.billing.address.line2",
         "display_name": "line2",
         "field_type": "user_address_line2",
         "value": "Harrison Street"
       },
       "billing.address.last_name": {
         "required_field": "payment_method_data.billing.address.last_name",
         "display_name": "card_holder_name",
         "field_type": "user_full_name",
         "value": "Doe"
       },
       "billing.address.country": {
         "required_field": "payment_method_data.billing.address.country",
         "display_name": "country",
         "field_type": {
           "user_address_country": {
             "options": ["US"]
           }
         },
         "value": "US"
       },
       "billing.address.zip": {
         "required_field": "payment_method_data.billing.address.zip",
         "display_name": "zip",
         "field_type": "user_address_pincode",
         "value": "94122"
       },
       "billing.address.line1": {
         "required_field": "payment_method_data.billing.address.line1",
         "display_name": "line1",
         "field_type": "user_address_line1",
         "value": "1467"
       },
       "billing.email": {
         "required_field": "payment_method_data.billing.email",
         "display_name": "email",
         "field_type": "user_email_address",
         "value": "hyperswitch_sdk_demo_id@gmail.com"
       },
       "shipping.address.line1": {
         "required_field": "shipping.address.line1",
         "display_name": "line1",
         "field_type": "user_address_line1",
         "value": "1467"
       },
       "shipping.address.line2": {
         "required_field": "shipping.address.line2",
         "display_name": "line2",
         "field_type": "user_address_line2",
         "value": null
       },
       "shipping.address.zip": {
         "required_field": "shipping.address.zip",
         "display_name": "zip",
         "field_type": "user_address_pincode",
         "value": "94122"
       },
       "shipping.address.city": {
         "required_field": "shipping.address.city",
         "display_name": "zip",
         "field_type": "user_shipping_address_city",
         "value": null
       },
       "shipping.address.country": {
         "required_field": "shipping.address.country",
         "display_name": "country",
         "field_type": {
           "user_address_country": {
             "options": ["US"]
           }
         },
         "value": "US"
       }
     },
     "surcharge_details": null,
     "pm_auth_connector": null
   }
 ]
}

Confirm call Payload should look like:

curl --location 'http://localhost:8080/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'api-key: dev_NjinrcPO8hJCWRArZdNLxS5u3H04sKbrP0RWPsJ53UbLDb2nmFg6eIy5mUOcxNZt' \
--data-raw '{
"amount": 1000,
"currency": "USD",
"confirm": true,
"capture_method": "automatic",
"capture_on": "2022-09-10T10:11:12Z",
"amount_to_capture": 1000,
"phone_country_code": "+1",
"description": "Its my first payment request",
"authentication_type": "no_three_ds",
"return_url": "https://duck.com",
"payment_method": "pay_later",
"payment_method_type": "affirm",
"payment_method_data": {
    "pay_later": {
        "affirm_redirect": {}
    },
    "billing": {
    "address": {
        "line1": "1467",
        "line2": "Harrison Street",

        "city": "San Fransico",
        "state": "US",
        "zip": "04386040",
        "country": "US",
        "first_name": "joseph",
        "last_name": "Doe"
    },
    "phone": {
        "country_code": "+91",
        "number": "9123456789"
    },
    "email": "example@example.com"
}
},
"shipping": {
    "address": {
        "line1": "1467",
        "line2": "Harrison Street",
"zip": "94122",
"country": "US"
}

}
}'

Dynamic Field Rendering:

Based on the backend response, the WebSDK should dynamically generate the necessary input fields.
Each field should be properly validated (e.g., required, length, pattern matching) based on the backend specifications.
Support different types of fields such as:
- Text fields (e.g., for name, card number)
- Select dropdowns (e.g., for country or card type)
- Checkbox fields (e.g., for terms and conditions)

User Inputs:

Once the user fills in the fields, the WebSDK should package the input data and send it back to the backend for payment processing.

Contribution Guidelines:

Fork the repository and create a new branch for your work.
Ensure the WebSDK follows best practices for API integration and field rendering.
Write clean, well-documented code with clear commit messages.
Add unit tests to ensure the dynamic field rendering works as expected.
Make sure to follow our coding standards and contribution guidelines.

Helpful Resources:

Link to WebSDK documentation: WebSDK Docs
Link to the API endpoint specifications: API Docs

Submission Process:

Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
Once assigned, submit a pull request (PR).
Maintainers will review and provide feedback, if any.
Maintainers can unassign issues due to inactivity, read more here.
For this issue, please submit a PR on @juspay/hyperswitch-web repo, and link it to the issue.

Refer here for Terms and conditions for the contest.

If you have any questions or need help getting started, feel free to ask in the comments!

programmersoham commented 1 month ago

I would like to work on this. Can you assign it to me

gorakhnathy7 commented 1 month ago

@programmersoham Assigning you this issue.

programmersoham commented 1 month ago

Thank you !

programmersoham commented 1 month ago

I have started working on this. I am setting up the local dev environment.

gorakhnathy7 commented 1 month ago

Hey @programmersoham ,

Quick check-in on the status of this issue. If you have any questions or need assistance, feel free to reach out in the community.

programmersoham commented 1 month ago

I am stuck in setting up the dev environment. Getting a ton of errors while running yarn install.

gorakhnathy7 commented 3 weeks ago

Hey @programmersoham,

Kindly let us know, if you're still working on the issue? If you have any questions or need assistance, Kindly reach out in the community.

programmersoham commented 3 weeks ago

@gorakhnathy7 I am not working on this. Please unassign

juspay / hyperswitch