Skip to content

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

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

Open
jakubjasinsky wants to merge 2 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ed2e08
fix(POS-1250): make 3ds iframe configurable from the outside
jakubjasinsky Mar 26, 2025
e9be425
v1.0.6
jakubjasinsky Apr 8, 2025
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 package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "processout.js",
"version": "1.0.5",
"version": "1.0.6",
"description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
"scripts": {
"build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",
Expand Down
26 changes: 19 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,15 @@ 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
34 changes: 31 additions & 3 deletions src/processout/processout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1395,6 +1395,7 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
iframeOverride?: IframeOverride,
): void {
if (val instanceof Card || val instanceof CardForm)
return this.tokenize(
Expand All @@ -1408,6 +1409,7 @@ module ProcessOut {
options,
success,
error,
iframeOverride,
)
}.bind(this),
error,
Expand All @@ -1420,6 +1422,7 @@ module ProcessOut {
options,
success,
error,
iframeOverride,
)
}

Expand All @@ -1430,6 +1433,7 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
iframeOverride?: IframeOverride,
): void {
this.handleCardActions(
"PUT",
Expand All @@ -1439,6 +1443,8 @@ module ProcessOut {
options,
success,
error,
undefined,
iframeOverride,
)
}

Expand All @@ -1460,6 +1466,7 @@ module ProcessOut {
success: (data: any) => void,
error: (err: Exception) => void,
apiRequestOptions?: apiRequestOptions,
iframeOverride?: IframeOverride,
): void {
const url: string = `invoices/${invoiceID}/capture`
this.threeDSInitiationURL = `invoices/${invoiceID}/three-d-s`
Expand All @@ -1474,6 +1481,7 @@ module ProcessOut {
success,
error,
apiRequestOptions,
iframeOverride,
)
}

Expand All @@ -1493,6 +1501,7 @@ module ProcessOut {
success: (data: any) => void,
error: (err: Exception) => void,
apiRequestOptions?: apiRequestOptions,
iframeOverride?: IframeOverride,
): void {
this.handleCardActions(
"POST",
Expand All @@ -1503,6 +1512,7 @@ module ProcessOut {
success,
error,
apiRequestOptions,
iframeOverride,
)
}

Expand All @@ -1521,6 +1531,7 @@ module ProcessOut {
options: any,
success: (data: any) => void,
error: (err: Exception) => void,
iframeOverride?: IframeOverride,
): void {
if (!options) options = {}
options.incremental = true
Expand All @@ -1532,6 +1543,8 @@ module ProcessOut {
options,
success,
error,
undefined,
iframeOverride,
)
}

Expand Down Expand Up @@ -1576,6 +1589,7 @@ module ProcessOut {
success: (data: any) => void,
error: (err: Exception) => void,
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 @@ -1646,6 +1660,7 @@ module ProcessOut {
success,
error,
apiRequestOptions,
iframeOverride,
)
}.bind(this)

Expand All @@ -1672,10 +1687,15 @@ module ProcessOut {
success,
error,
apiRequestOptions,
iframeOverride,
)
}.bind(this),
error,
new ActionHandlerOptions(opts),
new ActionHandlerOptions(
opts,
undefined,
opts !== ActionHandlerOptions.ThreeDSChallengeFlowNoIframe ? iframeOverride : undefined
)
)
break

Expand All @@ -1698,7 +1718,11 @@ module ProcessOut {
gReq.body = `threeDSMethodData={"threeDS2FingerprintTimeout":true}`
nextStep(gReq.token())
},
new ActionHandlerOptions(ActionHandlerOptions.ThreeDSFingerprintFlow),
new ActionHandlerOptions(
ActionHandlerOptions.ThreeDSFingerprintFlow,
undefined,
iframeOverride,
),
)
break

Expand All @@ -1708,7 +1732,11 @@ module ProcessOut {
data.customer_action.value,
nextStep,
error,
new ActionHandlerOptions(ActionHandlerOptions.ThreeDSChallengeFlow),
new ActionHandlerOptions(
ActionHandlerOptions.ThreeDSChallengeFlow,
undefined,
iframeOverride,
),
)
break

Expand Down