feat: add testMode flag and preloadSDKWithParams for enhanced configurability
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