Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(POS-1250): make 3ds iframe configurable from the outside #166

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(POS-1250): make 3ds iframe configurable from the outside #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/modal.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion scripts/processout.js
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 20 additions & 7 deletions src/processout/actionhandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ module ProcessOut {
}

export type IframeOverride = {
width: number,
height: number
width: number | string,
height: number | string,
}

export class ActionHandlerOptions {
Expand All @@ -74,8 +74,8 @@ module ProcessOut {
public newWindowWidth?: number;

// Specifies how big the iframe is, it can be overridden by IframeOverride
public iframeWidth: number = 440;
public iframeHeight: number = 480;
public iframeWidth: number | string = 440;
public iframeHeight: number | string = 480;

// gatewayLogo is shown when the action is done on another tab or window
public gatewayLogo?: string;
Expand Down Expand Up @@ -144,8 +144,14 @@ module ProcessOut {

if(override) {
this.flow = ActionFlow.IFrame;
this.iframeWidth = override.width;
this.iframeHeight = override.height;

if (override.width) {
this.iframeWidth = override.width;
}

if (override.height) {
this.iframeHeight = override.height;
}
}
}
}
Expand Down Expand Up @@ -228,9 +234,16 @@ module ProcessOut {
iframeWrapper.style.width = "100%";
iframeWrapper.setAttribute("style", "position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999999; overflow: auto;");


// If the option is number it means that we should use pixels here for the sake of
// backward compatibility. If not - then we use it as value since user can pass
// any unit like percentages e.g. 100%, calc(100% - 80px), 30rem etc
const width = typeof this.options.iframeWidth === 'number' ? `${this.options.iframeWidth}px` : this.options.iframeWidth
const height = typeof this.options.iframeHeight === 'number' ? `${this.options.iframeHeight}px` : this.options.iframeHeight;

// Create the iframe to be used later
var iframe = document.createElement("iframe");
iframe.setAttribute("style", `margin: 1em auto; width: ${this.options.iframeWidth}px; height: ${this.options.iframeHeight}px; max-width: 100%; max-height: 100%; display: block; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); background-color: #ECEFF1; background-image: url("${this.instance.endpoint("js", "/images/loader.gif")}"); background-repeat: no-repeat; background-position: center;")`);
iframe.setAttribute("style", `margin: 1em auto; width: ${width}; height: ${height}; max-width: 100%; max-height: 100%; display: block; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); background-color: #ECEFF1; background-image: url("${this.instance.endpoint("js", "/images/loader.gif")}"); background-repeat: no-repeat; background-position: center;")`);
iframe.setAttribute("frameborder", "0");
iframe.onload = function() {
// Remove the background loader once it is actually loaded
Expand Down
58 changes: 41 additions & 17 deletions src/processout/processout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1430,7 +1430,8 @@ module ProcessOut {
customerTokenID: string,
options: any,
success: (data: any) => void,
error: (err: Exception) => void
error: (err: Exception) => void,
iframeOverride?: IframeOverride
): void {
if (val instanceof Card || val instanceof CardForm)
return this.tokenize(
Expand All @@ -1443,7 +1444,8 @@ module ProcessOut {
customerTokenID,
options,
success,
error
error,
iframeOverride
);
}.bind(this),
error
Expand All @@ -1455,7 +1457,8 @@ module ProcessOut {
customerTokenID,
options,
success,
error
error,
iframeOverride
);
}

Expand All @@ -1465,7 +1468,8 @@ module ProcessOut {
customerTokenID: string,
options: any,
success: (data: any) => void,
error: (err: Exception) => void
error: (err: Exception) => void,
iframeOverride?: IframeOverride
): void {
this.handleCardActions(
"PUT",
Expand All @@ -1474,7 +1478,9 @@ module ProcessOut {
cardID,
options,
success,
error
error,
undefined,
iframeOverride
);
}

Expand All @@ -1495,7 +1501,8 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
apiRequestOptions?: apiRequestOptions
apiRequestOptions?: apiRequestOptions,
iframeOverride?: IframeOverride,
): void {
const url: string = `invoices/${invoiceID}/capture`;
this.threeDSInitiationURL = `invoices/${invoiceID}/three-d-s`;
Expand All @@ -1509,7 +1516,8 @@ module ProcessOut {
options,
success,
error,
apiRequestOptions
apiRequestOptions,
iframeOverride
);
}

Expand All @@ -1528,7 +1536,8 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
apiRequestOptions?: apiRequestOptions
apiRequestOptions?: apiRequestOptions,
iframeOverride?: IframeOverride
): void {
this.handleCardActions(
"POST",
Expand All @@ -1538,7 +1547,8 @@ module ProcessOut {
options,
success,
error,
apiRequestOptions
apiRequestOptions,
iframeOverride
);
}

Expand All @@ -1556,7 +1566,8 @@ module ProcessOut {
cardID: string,
options: any,
success: (data: any) => void,
error: (err: Exception) => void
error: (err: Exception) => void,
iframeOverride?: IframeOverride,
): void {
if (!options) options = {};
options.incremental = true;
Expand All @@ -1567,7 +1578,9 @@ module ProcessOut {
cardID,
options,
success,
error
error,
undefined,
iframeOverride,
);
}

Expand Down Expand Up @@ -1615,7 +1628,8 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
apiRequestOptions?: apiRequestOptions
apiRequestOptions?: apiRequestOptions,
iframeOverride?: IframeOverride
): void {
// returns this.hppInitialURL only once during the first call from HPP, then returns the endpoint
const getEndpoint = (): string => {
Expand Down Expand Up @@ -1685,7 +1699,8 @@ module ProcessOut {
options,
success,
error,
apiRequestOptions
apiRequestOptions,
iframeOverride
);
}.bind(this);

Expand All @@ -1711,11 +1726,16 @@ module ProcessOut {
options,
success,
error,
apiRequestOptions
apiRequestOptions,
iframeOverride
);
}.bind(this),
error,
new ActionHandlerOptions(opts)
new ActionHandlerOptions(
opts,
undefined,
opts !== ActionHandlerOptions.ThreeDSChallengeFlowNoIframe ? iframeOverride : undefined
)
);
break;

Expand All @@ -1739,7 +1759,9 @@ module ProcessOut {
nextStep(gReq.token());
},
new ActionHandlerOptions(
ActionHandlerOptions.ThreeDSFingerprintFlow
ActionHandlerOptions.ThreeDSFingerprintFlow,
undefined,
iframeOverride
)
);
break;
Expand All @@ -1751,7 +1773,9 @@ module ProcessOut {
nextStep,
error,
new ActionHandlerOptions(
ActionHandlerOptions.ThreeDSChallengeFlow
ActionHandlerOptions.ThreeDSChallengeFlow,
undefined,
iframeOverride
)
);
break;
Expand Down
Loading