Skip to content

Commit

Permalink
refactor: Moved HTTP requests to within iframe (#128)
Browse files Browse the repository at this point in the history
Co-authored-by: Praful Koppalkar <[email protected]>
  • Loading branch information
vsrivatsa-edinburgh and prafulkoppalkar authored Apr 17, 2024
1 parent 164a5ac commit ae177cb
Show file tree
Hide file tree
Showing 12 changed files with 616 additions and 535 deletions.
6 changes: 3 additions & 3 deletions aws/hyperswitch_web_aws_production_deployment.sh
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,12 @@ echo $( (aws s3api put-bucket-policy --bucket $MY_AWS_S3_BUCKET_NAME --policy "$

echo "Bucket configuration updated"

echo "Enter the backend endpoint your Hyperswitch Client will hit (hosted Hyperswitch Backend, https://sandbox.hyperswitch.io is taken by default):"
echo "Enter the backend endpoint your Hyperswitch Client will hit (hosted Hyperswitch Backend, https://beta.hyperswitch.io/api is taken by default):"
read AWS_BACKEND_URL </dev/tty

if [ -z $AWS_BACKEND_URL ]; then
echo "Setting backend URL value to https://sandbox.hyperswitch.io by default"
AWS_BACKEND_URL="https://sandbox.hyperswitch.io"
echo "Setting backend URL value to https://beta.hyperswitch.io/api by default"
AWS_BACKEND_URL="https://beta.hyperswitch.io/api"

fi

Expand Down
12 changes: 6 additions & 6 deletions aws/hyperswitch_web_aws_setup.sh
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,20 @@ command_discovery() {
command_discovery curl
command_discovery aws

echo "Please enter the URL where you have hosted Hyperswitch Backend (https://sandbox.hyperswitch.io) "
echo "Please enter the URL where you have hosted Hyperswitch Backend (https://beta.hyperswitch.io/api) "
read HYPERSWITCH_SERVER_URL < /dev/tty

if [ -z "$HYPERSWITCH_SERVER_URL" ]; then
echo "Using default api url: https://sandbox.hyperswitch.io"
HYPERSWITCH_SERVER_URL="https://sandbox.hyperswitch.io"
echo "Using default api url: https://beta.hyperswitch.io/api"
HYPERSWITCH_SERVER_URL="https://beta.hyperswitch.io/api"
fi

# echo "Please enter the api url (https://sandbox.hyperswitch.io) "
# echo "Please enter the api url (https://beta.hyperswitch.io/api) "
# read apiBaseUrl < /dev/tty

# if [ -z "$apiBaseUrl" ]; then
# echo "Using default api url: https://sandbox.hyperswitch.io"
# apiBaseUrl="https://sandbox.hyperswitch.io"
# echo "Using default api url: https://beta.hyperswitch.io/api"
# apiBaseUrl="https://beta.hyperswitch.io/api"
# fi

echo "Please enter the URL where you have hosted Hyperswitch Client SDK (https://beta.hyperswitch.io/v1) "
Expand Down
4 changes: 1 addition & 3 deletions src/App.res
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ let make = () => {
let clientSecret = CardUtils.getQueryParamsDictforKey(url.search, "clientSecret")
let sessionId = CardUtils.getQueryParamsDictforKey(url.search, "sessionId")
let publishableKey = CardUtils.getQueryParamsDictforKey(url.search, "publishableKey")
let endpoint =
CardUtils.getQueryParamsDictforKey(url.search, "endpoint")->decodeURIComponent
<PreMountLoader publishableKey sessionId clientSecret endpoint />
<PreMountLoader publishableKey sessionId clientSecret />
}
| "achBankTransfer"
| "bacsBankTransfer"
Expand Down
177 changes: 101 additions & 76 deletions src/Payments/PreMountLoader.res
Original file line number Diff line number Diff line change
@@ -1,83 +1,108 @@
@react.component
let make = (~sessionId as _, ~publishableKey as _, ~clientSecret as _, ~endpoint as _) => {
// open Utils
// let logger = OrcaLogger.make(
// ~sessionId,
// ~source=Loader,
// ~merchantId=publishableKey,
// ~clientSecret,
// (),
// )
let make = (~sessionId, ~publishableKey, ~clientSecret) => {
open Utils
let (paymentMethodsResponseSent, setPaymentMethodsResponseSent) = React.useState(_ => false)
let (
customerPaymentMethodsResponseSent,
setCustomerPaymentMethodsResponseSent,
) = React.useState(_ => false)
let (sessionTokensResponseSent, setSessionTokensResponseSent) = React.useState(_ => false)
let logger = OrcaLogger.make(
~sessionId,
~source=Loader,
~merchantId=publishableKey,
~clientSecret,
(),
)

// // let (
// // paymentMethodsResponse,
// // customerPaymentMethodsResponse,
// // sessionTokensResponse,
// // ) = React.useMemo0(() => {
// // (
// // PaymentHelpers.fetchPaymentMethodList(
// // ~clientSecret,
// // ~publishableKey,
// // ~logger,
// // ~switchToCustomPod=false,
// // ~endpoint,
// // ),
// // PaymentHelpers.fetchCustomerDetails(
// // ~clientSecret,
// // ~publishableKey,
// // ~optLogger=Some(logger),
// // ~switchToCustomPod=false,
// // ~endpoint,
// // ),
// // PaymentHelpers.fetchSessions(
// // ~clientSecret,
// // ~publishableKey,
// // ~optLogger=Some(logger),
// // ~switchToCustomPod=false,
// // ~endpoint,
// // (),
// // ),
// // )
// // })
let endpoint = ApiEndpoint.getApiEndPoint(~publishableKey, ())

// // let sendPromiseData = (promise, key) => {
// // open Promise
// // promise
// // ->then(res => {
// // handlePostMessage([("response", res), ("data", key->JSON.Encode.string)])
// // resolve()
// // })
// // ->catch(_err => {
// // handlePostMessage([("response", JSON.Encode.null), ("data", key->JSON.Encode.string)])
// // resolve()
// // })
// // ->ignore
// // }
let paymentMethodsResponse = React.useMemo0(() =>
PaymentHelpers.fetchPaymentMethodList(
~clientSecret,
~publishableKey,
~logger,
~switchToCustomPod=false,
~endpoint,
)
)

// // React.useEffect0(() => {
// // let handle = (ev: Window.event) => {
// // let json = try {
// // ev.data->JSON.parseExn
// // } catch {
// // | _ => JSON.Encode.null
// // }
// // let dict = json->Utils.getDictFromJson
// // if dict->Dict.get("sendPaymentMethodsResponse")->Option.isSome {
// // paymentMethodsResponse->sendPromiseData("payment_methods")
// // } else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Option.isSome {
// // customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
// // } else if dict->Dict.get("sendSessionTokensResponse")->Option.isSome {
// // sessionTokensResponse->sendPromiseData("session_tokens")
// // }
// // }
// // Window.addEventListener("message", handle)
// // handlePostMessage([("preMountLoaderInitCallback", true->JSON.Encode.bool)])
// // Some(
// // () => {
// // Window.removeEventListener("message", handle)
// // },
// // )
// // })
let customerPaymentMethodsResponse = React.useMemo0(() =>
PaymentHelpers.fetchCustomerPaymentMethodList(
~clientSecret,
~publishableKey,
~optLogger=Some(logger),
~switchToCustomPod=false,
~endpoint,
)
)

let sessionTokensResponse = React.useMemo0(() =>
PaymentHelpers.fetchSessions(
~clientSecret,
~publishableKey,
~optLogger=Some(logger),
~switchToCustomPod=false,
~endpoint,
(),
)
)

let sendPromiseData = (promise, key) => {
open Promise
promise
->then(res => {
handlePostMessage([("response", res), ("data", key->JSON.Encode.string)])
switch key {
| "payment_methods" => setPaymentMethodsResponseSent(_ => true)
| "session_tokens" => setSessionTokensResponseSent(_ => true)
| "customer_payment_methods" => setCustomerPaymentMethodsResponseSent(_ => true)
| _ => ()
}
resolve()
})
->catch(_err => {
handlePostMessage([("response", JSON.Encode.null), ("data", key->JSON.Encode.string)])
resolve()
})
->ignore
}

let handle = (ev: Window.event) => {
let json = try {
ev.data->JSON.parseExn
} catch {
| _ => JSON.Encode.null
}
let dict = json->Utils.getDictFromJson
if dict->Dict.get("sendPaymentMethodsResponse")->Belt.Option.isSome {
paymentMethodsResponse->sendPromiseData("payment_methods")
} else if dict->Dict.get("sendCustomerPaymentMethodsResponse")->Belt.Option.isSome {
customerPaymentMethodsResponse->sendPromiseData("customer_payment_methods")
} else if dict->Dict.get("sendSessionTokensResponse")->Belt.Option.isSome {
sessionTokensResponse->sendPromiseData("session_tokens")
}
}

React.useEffect0(() => {
Window.addEventListener("message", handle)
handlePostMessage([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)])
Some(
() => {
Window.removeEventListener("message", handle)
},
)
})

React.useEffect3(() => {
if (
paymentMethodsResponseSent && customerPaymentMethodsResponseSent && sessionTokensResponseSent
) {
handlePostMessage([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)])
Window.removeEventListener("message", handle)
}
None
}, (paymentMethodsResponseSent, customerPaymentMethodsResponseSent, sessionTokensResponseSent))

React.null
}
2 changes: 1 addition & 1 deletion src/Utilities/ApiEndpoint.res
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ let getApiEndPoint = (~publishableKey="", ~isConfirmCall=false, ()) => {
| Some(str) => str
| None =>
let backendEndPoint = isConfirmCall ? GlobalVars.confirmEndPoint : GlobalVars.backendEndPoint
GlobalVars.isProd && testMode ? "https://sandbox.hyperswitch.io" : backendEndPoint
GlobalVars.isProd && testMode ? "https://beta.hyperswitch.io/api" : backendEndPoint
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/Utilities/PaymentHelpers.res
Original file line number Diff line number Diff line change
Expand Up @@ -1194,7 +1194,7 @@ let fetchPaymentMethodList = (
})
}

let fetchCustomerDetails = (
let fetchCustomerPaymentMethodList = (
~clientSecret,
~publishableKey,
~endpoint,
Expand Down
11 changes: 11 additions & 0 deletions src/Utilities/Utils.res
Original file line number Diff line number Diff line change
Expand Up @@ -1234,3 +1234,14 @@ let makeOneClickHandlerPromise = sdkHandleOneClickConfirmPayment => {
}
})
}

let generateRandomString = length => {
let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
let result = ref("")
let charactersLength = characters->String.length
Int.range(0, length)->Array.forEach(_ => {
let charIndex = mod((Math.random() *. 100.0)->Float.toInt, charactersLength)
result := result.contents ++ characters->String.charAt(charIndex)
})
result.contents
}
Loading

0 comments on commit ae177cb

Please sign in to comment.