hyperswitch-web icon indicating copy to clipboard operation
hyperswitch-web copied to clipboard

feat: add testMode flag and preloadSDKWithParams for enhanced configurability

Open aritro2002 opened this issue 2 months ago • 1 comments

Type of Change

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

Description

This PR introduces two key enhancements to the Hyperswitch Web SDK aimed at improving developer experience and enabling offline UI configurability:

testMode flag: Allows SDK initialization in a client-side test environment by bypassing backend API calls and client_secret validation. Useful for UI testing and configuration previews.

preloadSDKWithParams function: Enables dynamic injection of SDK state (e.g., payment methods, session tokens, appearance) to render or update the checkout UI without requiring live backend data.

Ref: https://docs.google.com/document/d/1ZvcQNtO4albuIJtXFHQFZVeK3VygJl8zfMDhUykyccs/edit?tab=t.0#heading=h.8yvvpzoh0m4h

How did you test it?

step 1: set test mode true

Hyper(
          { publishableKey, profileId },
          {
            customBackendUrl,
            isTestMode: true,
          }
        )

step 2: use hyper.preloadSDKWithParams(params: { paymentMethodsList: Object; customerMethodsList: Object; sessionTokens: Object; appearanceObj: Object; )

const mockParams = {
      paymentMethodsList: {
        payment_methods: [
          {
            payment_method: "card",
            payment_method_types: [
              { payment_method_type: "credit" },
              { payment_method_type: "debit" },
            ],
          },
          {
            payment_method: "wallet",
            payment_method_types: [
              { payment_method_type: "apple_pay" },
              // { payment_method_type: "google_pay" },
              {
                payment_method_type: "paypal",
                payment_experience: [
                  {
                    payment_experience_type: "redirect_to_url",
                    eligible_connectors: ["authorizedotnet"],
                  },
                ],
                card_networks: null,
                bank_names: null,
                bank_debits: null,
                bank_transfers: null,
                required_fields: null,
                surcharge_details: {
                  surcharge: {
                    type: "rate",
                    value: { percentage: 10 },
                  },
                  tax_on_surcharge: { percentage: 0 },
                  display_surcharge_amount: 6.5,
                  display_tax_on_surcharge_amount: 0,
                  display_total_surcharge_amount: 6.5,
                },
                pm_auth_connector: null,
              },
            ],
          },
        ],
        is_tax_calculation_enabled: false,
      },
      customerMethodsList: {
        customer_payment_methods: [],
        is_guest_customer: true,
      },
      sessionTokens: {
        session_token: [
          {
            wallet_name: "paypal",
            connector: "paypal",
            session_token:
              "ASKAGh2WXgqfQ5TzjpZzLsfhVGlFbjq5VrV5IOX8KXDD2N_XqkGeYNDkWyr_UXnfhXpEkABdmP284b_2",
            sdk_next_action: { next_action: "post_session_tokens" },
            client_token: null,
            transaction_info: null,
          },
          {
            wallet_name: "apple_pay",
            session_token_data: {
              epoch_timestamp: 1760687560096,
              expires_at: 1760691160096,
              merchant_session_identifier:
                "SSH95C730EDD9AC4426ADB612ABF4A941AC_7E0DD1295E42A30B376B18CB4E6B9B9FB4C5E36B3EDF9FB0DEA51F9419420173",
              nonce: "db1a2697",
              merchant_identifier:
                "8C61D5F381850BD7C1A5B4319652553756DDD9AE26693D267C09456906C4F1C4",
              domain_name: "hyperswitch-demo-store.netlify.app",
              display_name: "applepay",
            },
            payment_request_data: {
              country_code: "US",
              currency_code: "USD",
              total: {
                label: "applepay",
                type: "final",
                amount: "65.00",
              },
              merchant_capabilities: ["supports3DS"],
              supported_networks: ["visa", "masterCard", "amex", "discover"],
              merchant_identifier: "merchant.barclaycard.hyperswitch",
            },
            connector: "nuvei",
            delayed_session_token: false,
            sdk_next_action: { next_action: "confirm" },
          },
          {
            wallet_name: "google_pay",
            merchant_info: {
              merchant_id: "nuveidigital",
              merchant_name: "nuvei",
            },
            shipping_address_required: false,
            email_required: false,
            shipping_address_parameters: {
              phone_number_required: false,
            },
            allowed_payment_methods: [
              {
                type: "CARD",
                parameters: {
                  allowed_auth_methods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                  allowed_card_networks: [
                    "AMEX",
                    "DISCOVER",
                    "INTERAC",
                    "JCB",
                    "MASTERCARD",
                    "VISA",
                  ],
                  billing_address_required: false,
                },
                tokenization_specification: {
                  type: "PAYMENT_GATEWAY",
                  parameters: {
                    gateway: "nuveidigital",
                    gateway_merchant_id: "googletest",
                  },
                },
              },
            ],
            transaction_info: {
              country_code: "US",
              currency_code: "USD",
              total_price_status: "Final",
              total_price: "65.00",
            },
            delayed_session_token: false,
            connector: "nuvei",
            sdk_next_action: { next_action: "confirm" },
          },
        ],
      },
      appearanceObj: {
        appearance: {
          theme: "midnight",
        },
      },
    };

      hyper.preloadSDKWithParams(params);

demo video:

https://github.com/user-attachments/assets/34c609e3-34cf-4d21-a181-e31658a6d638

Checklist

  • [x] I ran npm run re:build
  • [x] I reviewed submitted code
  • [ ] I added unit tests for my changes where possible

aritro2002 avatar Oct 23 '25 14:10 aritro2002

Review changes with  SemanticDiff

semanticdiff-com[bot] avatar Oct 23 '25 14:10 semanticdiff-com[bot]