Skip to content

Commit e104182

Browse files
glo82145rtsehynka-gmdevpatil7chetana11
authored
Pwa 2968::Gomage/plugin braintree three d secure (#4378)
* The current problem is that the 3D Secure feature is not working. Whenever you are trying to run a transaction, you get an error (see image), and there seems to be no API call to process this request. * [PWA Studio] - Test Braintree #D Secure fix for Venia * [PWA Studio] - Add to frame-src *.cardinalcommerce.com (for test only) * [PWA Studio] - Add to frame-src *.cardinalcommerce.com (for test only) * PWA-2968::[Issue] Gomage/plugin braintree three d secure * PWA-2968::[Issue] Gomage/plugin braintree three d secure * Resolve clean issue * PWA-2968:updating version * Adding license field else showing error during yarn clean:all * Gomage/plugin braintree three d secure --------- Co-authored-by: rtsehynka <[email protected]> Co-authored-by: rtsehynka-gm <[email protected]> Co-authored-by: Devagouda <[email protected]> Co-authored-by: chetana11 <[email protected]>
1 parent e55b120 commit e104182

File tree

12 files changed

+299
-19
lines changed

12 files changed

+299
-19
lines changed

‎packages/extensions/gomage-plugin-braintree-three-d-secure/Intercepts/brainTreeDropIn.js

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/**
2+
* adding to brainTreeDropIn 3D secure part
3+
* @param targets
4+
*/
5+
function localIntercept(targets) {
6+
const { Targetables } = require('@magento/pwa-buildpack');
7+
const targetables = Targetables.using(targets);
8+
9+
/**
10+
* We can disable the logic if you will add to .env param CHECKOUT_BRAINTREE_3D with value false
11+
*/
12+
if (process.env.CHECKOUT_BRAINTREE_3D != 'false') {
13+
const brainTreeDropIn = targetables.reactComponent(
14+
'@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/brainTreeDropIn.js'
15+
);
16+
17+
/**
18+
* import 3d secure plugin
19+
*/
20+
brainTreeDropIn.addImport(
21+
'{useBraintreeThreeDSecure} from "@gomage/plugin-braintree-three-d-secure"'
22+
);
23+
brainTreeDropIn.addImport(
24+
'{usePriceSummary} from "@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary"'
25+
);
26+
27+
/**
28+
* add hook for getting of client token
29+
*/
30+
brainTreeDropIn.insertAfterSource(
31+
'const [dropinInstance, setDropinInstance] = useState();',
32+
'\n const clientToken = useBraintreeThreeDSecure();' +
33+
'\n const talonProps = usePriceSummary();'
34+
);
35+
/**
36+
* check if exist clientToken
37+
*/
38+
brainTreeDropIn.insertAfterSource(
39+
'const createDropinInstance = useCallback(async () => {',
40+
'\n if(clientToken){ '
41+
);
42+
/**
43+
* end condition of check if exist clientToken
44+
*/
45+
brainTreeDropIn.insertAfterSource('return dropinInstance;', '\n}');
46+
/**
47+
* setting new dependency clientToken to useCallback createDropinInstance hook
48+
*/
49+
brainTreeDropIn.insertAfterSource(
50+
'[containerId',
51+
' ,clientToken, talonProps.flatData.total.value'
52+
);
53+
54+
/**
55+
* check if exist clientToken
56+
*/
57+
brainTreeDropIn.insertBeforeSource(
58+
'const renderDropin = async () => {',
59+
'\n if(clientToken){ '
60+
);
61+
62+
/**
63+
* end condition of check if exist clientToken
64+
*/
65+
brainTreeDropIn.insertBeforeSource(
66+
'}, [createDropinInstance, onReady]);',
67+
'} \n'
68+
);
69+
70+
/**
71+
* setting new dependency clientToken to useEffect hook
72+
*/
73+
brainTreeDropIn.insertAfterSource(
74+
'[createDropinInstance, onReady',
75+
' ,clientToken'
76+
);
77+
78+
/**
79+
* change of value token to client Token
80+
*/
81+
brainTreeDropIn.insertAfterSource(
82+
'const dropinInstance = await dropIn.create({\n' +
83+
' authorization',
84+
':clientToken'
85+
);
86+
87+
/**
88+
* enable 3d secure
89+
*/
90+
brainTreeDropIn.insertAfterSource(
91+
'container: `#${containerId}`,',
92+
'\n threeDSecure: {amount:talonProps.flatData.total.value},'
93+
);
94+
95+
/**
96+
* update brain tree if total was changes
97+
*/
98+
brainTreeDropIn.insertBeforeSource(
99+
'if (isError) {',
100+
'useEffect(() => {\n' +
101+
' if(dropinInstance) {\n' +
102+
' dropinInstance.teardown();\n' +
103+
' }\n' +
104+
' }, [\n' +
105+
' talonProps.flatData.total.value,\n' +
106+
']);'
107+
);
108+
}
109+
}
110+
111+
module.exports = localIntercept;

‎packages/extensions/gomage-plugin-braintree-three-d-secure/Model/useBraintreeThreeDSecure.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useMutation } from '@apollo/client';
2+
import { useEffect } from 'react';
3+
import { GET_BRAINTREE_CLIENT_TOKEN } from '../Queries/createBraintreeClientToken.gql';
4+
5+
/**
6+
*
7+
* @returns {*|string}
8+
*/
9+
export const useBraintreeThreeDSecure = () => {
10+
const [setBraintreeClientToken, { data }] = useMutation(
11+
GET_BRAINTREE_CLIENT_TOKEN
12+
);
13+
const clientToken = data ? data.createBraintreeClientToken : '';
14+
/**
15+
* set Braintree Client Token
16+
*/
17+
useEffect(() => {
18+
if (!clientToken) {
19+
setBraintreeClientToken();
20+
}
21+
}, [clientToken, setBraintreeClientToken]);
22+
23+
return clientToken;
24+
};

‎packages/extensions/gomage-plugin-braintree-three-d-secure/Queries/createBraintreeClientToken.gql.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { gql } from '@apollo/client';
2+
/**
3+
*
4+
* @type {DocumentNode}
5+
*/
6+
export const GET_BRAINTREE_CLIENT_TOKEN = gql`
7+
mutation {
8+
createBraintreeClientToken
9+
}
10+
`;

‎packages/extensions/gomage-plugin-braintree-three-d-secure/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# GoMage Braintree 3D Secure
2+
3+
GoMage Braintree 3D Secure
4+
5+
That plugin works only as a fix bugs of PWA Studio and adds 3d secure part.
6+
7+
If you need to disable the module, you can add to the .env parameter CHECKOUT_BRAINTREE_3D=false, or remove the plugin.

‎packages/extensions/gomage-plugin-braintree-three-d-secure/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { useBraintreeThreeDSecure } from './Model/useBraintreeThreeDSecure';

‎packages/extensions/gomage-plugin-braintree-three-d-secure/intercept.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
*
3+
* @param targets
4+
*/
5+
function localIntercept(targets) {
6+
require('@gomage/plugin-braintree-three-d-secure/Intercepts/brainTreeDropIn')(
7+
targets
8+
);
9+
}
10+
11+
module.exports = localIntercept;

‎packages/extensions/gomage-plugin-braintree-three-d-secure/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "@gomage/plugin-braintree-three-d-secure",
3+
"version": "3.94.0",
4+
"description": "GoMage Braintree 3D Secure",
5+
"main": "./index.js",
6+
"author": "GoMage",
7+
"dependencies": {
8+
"braintree-web-drop-in": "~1.43.0"
9+
},
10+
11+
"scripts": {
12+
"clean": " "
13+
},
14+
"license": "SEE LICENSE IN LICENSE.txt",
15+
"pwa-studio": {
16+
"targets": {
17+
"intercept": "./intercept.js"
18+
}
19+
}
20+
}

‎packages/extensions/upward-security-headers/upward.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ veniaSecurityHeaders:
2525
base-uri 'none';
2626
child-src 'self';
2727
font-src 'self' fonts.gstatic.com;
28-
frame-src assets.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com
28+
frame-src *.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com *.cardinalcommerce.com
2929
"
3030
default:
3131
inline: "
@@ -36,7 +36,7 @@ veniaSecurityHeaders:
3636
base-uri 'none';
3737
child-src 'self';
3838
font-src 'self' fonts.gstatic.com;
39-
frame-src assets.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com
39+
frame-src *.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com *.cardinalcommerce.com
4040
"
4141
strict-transport-security:
4242
inline: max-age=31536000

‎packages/peregrine/lib/talons/FormError/__tests__/__snapshots__/useFormError.spec.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`returns concatenated error message when allowErrorMessages 1`] = `"GraphQL Error 1, GraphQL Error 2"`;
3+
exports[`returns concatenated error message when allowErrorMessages 1`] = `"formError.responseError"`;
44

5-
exports[`returns general error message 1`] = `"formError.errorMessage, Generic Error"`;
5+
exports[`returns general error message 1`] = `"formError.responseError, Generic Error"`;

‎packages/venia-concept/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
},
3636
"homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
3737
"dependencies": {
38+
"@gomage/plugin-braintree-three-d-secure": "3.94.0",
3839
"@magento/pwa-buildpack": "~11.5.3"
3940
},
4041
"devDependencies": {
@@ -50,6 +51,7 @@
5051
"@babel/plugin-transform-runtime": "~7.4.4",
5152
"@babel/preset-env": "~7.16.0",
5253
"@babel/runtime": "~7.15.3",
54+
"@gomage/plugin-braintree-three-d-secure": "3.94.0",
5355
"@magento/babel-preset-peregrine": "~1.3.3",
5456
"@magento/eslint-config": "~1.5.0",
5557
"@magento/pagebuilder": "~9.3.2",
@@ -69,7 +71,7 @@
6971
"babel-plugin-graphql-tag": "~2.0.0",
7072
"babel-plugin-module-resolver": "~3.2.0",
7173
"babel-plugin-react-remove-properties": "~0.3.0",
72-
"braintree-web-drop-in": "~1.33.3",
74+
"braintree-web-drop-in": "~1.43.0",
7375
"compression": "~1.7.4",
7476
"css-loader": "~5.2.7",
7577
"dotenv": "~6.2.0",
@@ -144,6 +146,9 @@
144146
"pwa-studio": {
145147
"targets": {
146148
"intercept": "./local-intercept.js"
147-
}
149+
},
150+
"trusted-vendors": [
151+
"@gomage"
152+
]
148153
}
149154
}

‎packages/venia-ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"@magento/peregrine": "~14.4.1",
8484
"@magento/pwa-buildpack": "~11.5.3",
8585
"apollo-cache-persist": "~0.1.1",
86-
"braintree-web-drop-in": "~1.33.3",
86+
"braintree-web-drop-in": "~1.43.0",
8787
"graphql": "~15.5.0",
8888
"react": "~17.0.1",
8989
"react-intl": "~5.20.0",

0 commit comments

Comments
 (0)