-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merged in klarna/sdk/safari/fix (pull request #127)
Removed SDK Loading * Removed SDK Loading * Removed logs Approved-by: Narayana Aaditya G
- Loading branch information
Bopanna M J
committed
Feb 9, 2023
1 parent
d083784
commit dc6795d
Showing
3 changed files
with
84 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| @react.component | ||
| let make = () => { | ||
| let loaderUI = <div className={`flex flex-col justify-center m-auto visible`}> <Loader /> </div> | ||
| <div className="h-screen w-screen bg-black/70 flex m-auto items-center backdrop-blur-sm"> | ||
| <div className="h-screen w-screen bg-black/80 flex m-auto items-center backdrop-blur-md"> | ||
| {loaderUI} | ||
| </div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,96 @@ | ||
| open RecoilAtoms | ||
| type token = {client_token: string} | ||
| type loadType = { | ||
| container: option<string>, | ||
| color_text: option<string>, | ||
| payment_method_category: option<string>, | ||
| } | ||
| type init | ||
| type res = { | ||
| approved: bool, | ||
| show_form: bool, | ||
| authorization_token: string, | ||
| finalize_required: bool, | ||
| } | ||
| type some = { | ||
| init: (. token) => unit, | ||
| load: (. loadType, res => unit) => unit, | ||
| authorize: (. loadType, Js.Json.t, res => unit) => unit, | ||
| loadPaymentReview: (. loadType, res => unit) => unit, | ||
| } | ||
|
|
||
| @val external klarnaInit: some = "Klarna.Payments" | ||
|
|
||
| @react.component | ||
| let make = (~sessionObj: SessionsType.token) => { | ||
| open Utils | ||
| let {clientSecret, iframeId} = Recoil.useRecoilValueFromAtom(keys) | ||
| let handlePopUp = confirm => { | ||
| switch clientSecret { | ||
| | Some(key) => | ||
| Utils.handlePostMessage([ | ||
| ("fullscreen", true->Js.Json.boolean), | ||
| ("param", "klarna"->Js.Json.string), | ||
| ("iframeId", iframeId->Js.Json.string), | ||
| ( | ||
| "metadata", | ||
| [ | ||
| ("token", sessionObj.token->Js.Json.string), | ||
| ("clientSecret", key->Js.Json.string), | ||
| ("confirmParam", confirm->toJson), | ||
| ] | ||
| ->Js.Dict.fromArray | ||
| ->Js.Json.object_, | ||
| ), | ||
| ]) | ||
| | None => () | ||
| } | ||
| } | ||
| let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom) | ||
| let intent = PaymentHelpers.usePaymentIntent(Some(loggerState)) | ||
| let {iframeId} = Recoil.useRecoilValueFromAtom(keys) | ||
| let status = CommonHooks.useScript("https://x.klarnacdn.net/kp/lib/v1/api.js") | ||
|
|
||
| let handleCloseLoader = () => { | ||
| Utils.handlePostMessage([("fullscreen", false->Js.Json.boolean)]) | ||
| Utils.postFailedSubmitResponse( | ||
| ~errortype="confirm_payment_failed", | ||
| ~message="An unknown error has occured", | ||
| ) | ||
| } | ||
| let submitCallback = React.useCallback((ev: Window.event) => { | ||
| let json = ev.data->Js.Json.parseExn | ||
| let confirm = json->Utils.getDictFromJson->ConfirmType.itemToObjMapper | ||
|
|
||
| if confirm.doSubmit { | ||
| handlePopUp(confirm.confirmParams) | ||
| Utils.handlePostMessage([ | ||
| ("fullscreen", true->Js.Json.boolean), | ||
| ("param", "paymentloader"->Js.Json.string), | ||
| ("iframeId", iframeId->Js.Json.string), | ||
| ]) | ||
| klarnaInit.authorize(. | ||
| { | ||
| container: None, | ||
| color_text: None, | ||
| payment_method_category: Some("klarna"), | ||
| }, | ||
| Js.Dict.empty()->Js.Json.object_, | ||
| (res: res) => { | ||
| let body = PaymentBody.klarnaSDKbody(~token=res.authorization_token) | ||
| res.approved | ||
| ? intent( | ||
| ~bodyArr=body, | ||
| ~clientSecret=confirm.clientSecret, | ||
| ~confirmParam=confirm.confirmParams, | ||
| ~handleUserError=false, | ||
| ) | ||
| : handleCloseLoader() | ||
| }, | ||
| ) | ||
| } | ||
| }) | ||
| submitPaymentData(submitCallback) | ||
|
|
||
| React.useEffect1(() => { | ||
| if status == "ready" { | ||
| klarnaInit.init(. { | ||
| client_token: sessionObj.token, | ||
| }) | ||
|
|
||
| klarnaInit.load(. | ||
| { | ||
| container: Some("#klarna-payments"), | ||
| color_text: Some("#E51515"), | ||
| payment_method_category: Some("pay_later"), | ||
| }, | ||
| (_res: res) => { | ||
| () | ||
| }, | ||
| ) | ||
| } | ||
| None | ||
| }, [status]) | ||
|
|
||
| let bottomElement = <RedirectElement /> | ||
| <div className="p-1 animate-slowShow"> <Block bottomElement /> </div> | ||
| <div className="p-1 animate-slowShow"> | ||
| <div id="klarna-payments" className="m-3 hidden" /> <Block bottomElement /> | ||
| </div> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters