Skip to content

Commit 3eca535

Browse files
glo82145glo82145
committed
PWA-2968::[Issue] Gomage/plugin braintree three d secure
2 parents c35e41f + 7d26462 commit 3eca535

File tree

10 files changed

+1560
-967
lines changed

10 files changed

+1560
-967
lines changed

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

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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('{useBraintreeThreeDSecure} from "@gomage/plugin-braintree-three-d-secure"');
21+
brainTreeDropIn.addImport('{usePriceSummary} from "@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary"');
22+
23+
/**
24+
* add hook for getting of client token
25+
*/
26+
brainTreeDropIn.insertAfterSource(
27+
'const [dropinInstance, setDropinInstance] = useState();',
28+
'\n const clientToken = useBraintreeThreeDSecure();' +
29+
'\n const talonProps = usePriceSummary();'
30+
);
31+
/**
32+
* check if exist clientToken
33+
*/
34+
brainTreeDropIn.insertAfterSource(
35+
'const createDropinInstance = useCallback(async () => {',
36+
'\n if(clientToken){ '
37+
);
38+
/**
39+
* end condition of check if exist clientToken
40+
*/
41+
brainTreeDropIn.insertAfterSource(
42+
'return dropinInstance;',
43+
'\n}'
44+
);
45+
/**
46+
* setting new dependency clientToken to useCallback createDropinInstance hook
47+
*/
48+
brainTreeDropIn.insertAfterSource(
49+
'[containerId',
50+
' ,clientToken, talonProps.flatData.total.value'
51+
);
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+
/**
80+
* change of value token to client Token
81+
*/
82+
brainTreeDropIn.insertAfterSource(
83+
'const dropinInstance = await dropIn.create({\n' +
84+
' authorization',
85+
':clientToken',
86+
);
87+
88+
/**
89+
* enable 3d secure
90+
*/
91+
brainTreeDropIn.insertAfterSource(
92+
'container: `#${containerId}`,',
93+
'\n threeDSecure: {amount:talonProps.flatData.total.value},',
94+
);
95+
96+
/**
97+
* update brain tree if total was changes
98+
*/
99+
brainTreeDropIn.insertBeforeSource(
100+
'if (isError) {',
101+
'useEffect(() => {\n' +
102+
' if(dropinInstance) {\n' +
103+
' dropinInstance.teardown();\n' +
104+
' }\n' +
105+
' }, [\n' +
106+
' talonProps.flatData.total.value,\n' +
107+
']);',
108+
);
109+
}
110+
}
111+
112+
module.exports = localIntercept;

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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(GET_BRAINTREE_CLIENT_TOKEN);
11+
const clientToken = data ? data.createBraintreeClientToken : '';
12+
/**
13+
* set Braintree Client Token
14+
*/
15+
useEffect(() => {
16+
if(!clientToken) {
17+
setBraintreeClientToken();
18+
}
19+
}, []);
20+
21+
return clientToken;
22+
}

‎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

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

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "@gomage/plugin-braintree-three-d-secure",
3+
"version": "1.0.3",
4+
"description": "GoMage Braintree 3D Secure",
5+
"main": "./index.js",
6+
"author": "GoMage",
7+
"pwa-studio": {
8+
"targets": {
9+
"intercept": "./intercept.js"
10+
}
11+
},
12+
"dependencies": {
13+
"braintree-web-drop-in": "~1.33.1"
14+
}
15+
}

‎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/venia-concept/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,10 @@
144144
"pwa-studio": {
145145
"targets": {
146146
"intercept": "./local-intercept.js"
147-
}
147+
},
148+
"trusted-vendors": [
149+
"@gomage"
150+
]
148151
}
152+
149153
}

0 commit comments

Comments
 (0)