Skip to content

Commit 96f8199

Browse files
NathanYearoutNathanYearout
committed
adding material make payment
1 parent d3f62c4 commit 96f8199

File tree

3 files changed

+188
-182
lines changed

3 files changed

+188
-182
lines changed

‎src/js/components/material-ui-add-payment-details.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ function PaymentMethod() {
9191
if ($(evt.target).parent().prev().hasClass('MuiInputLabel-root'))
9292
$(evt.target).parent().prev().removeClass('Mui-focused MuiInputLabel-shrink');
9393
}}
94+
focus={function (evt) {
95+
$(evt.target).parent().addClass('Mui-focused');
96+
if ($(evt.target).parent().prev().hasClass('MuiInputLabel-root'))
97+
$(evt.target).Fparent().prev().addClass('Mui-focused MuiInputLabel-shrink');
98+
}}
9499
/>
95100
</div>
96101
</FormControl>

‎src/js/components/material-ui-make-payment.jsx

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import React from 'react';
2+
import $ from 'jquery';
3+
import regeneratorRuntime from "regenerator-runtime";
4+
import { PayloadForm, PayloadInput } from 'payload-react';
5+
import ReactDOM from 'react-dom';
6+
import {
7+
Typography,
8+
Container,
9+
Box,
10+
Link,
11+
FormControl,
12+
InputLabel,
13+
Input,
14+
Button,
15+
Dialog,
16+
DialogContent,
17+
DialogContentText,
18+
DialogTitle,
19+
DialogActions
20+
} from '@material-ui/core';
21+
22+
const pl = PayloadReact;
23+
24+
function ProTip() {
25+
return (
26+
<div>
27+
<Typography color="textSecondary" style={{ marginTop: 24, }}>
28+
For more information on integrating Payload: See the {' '}
29+
<Link href="https://github.com/payload-code/payload-react">
30+
payload-react
31+
</Link>{' '}
32+
repo on GitHub and the {' '}
33+
<Link href="https://docs.payload.co">Payload Documentation</Link>.
34+
</Typography>
35+
<Typography color="textSecondary" style={{ marginTop: 24, }}>
36+
See the {' '}
37+
<Link href="https://github.com/payload-code/payload-code.github.io/blob/master/material-ui-make-payment.html">
38+
source code
39+
</Link>{' '}
40+
for this demo on GitHub.
41+
</Typography>
42+
</div>
43+
);
44+
}
45+
46+
function App() {
47+
return (
48+
<Container maxWidth="xs">
49+
<div style={{ marginTop: 24, }}>
50+
<Typography variant="h4" component="h1" gutterBottom>
51+
Make Payment
52+
</Typography>
53+
<Payment/>
54+
<ProTip />
55+
</div>
56+
</Container>
57+
);
58+
}
59+
60+
function Payment() {
61+
const [open, setOpen] = React.useState(false);
62+
var form = null;
63+
64+
const ref = function(node) {
65+
if (!node || node == form) return
66+
form = node
67+
68+
node.pl_form.params.autosubmit = false
69+
node.pl_form.on('processed', function(data) {
70+
setOpen(true);
71+
})
72+
73+
node.pl_form.on('focus', function(evt) {
74+
$(evt.target).parent().addClass('Mui-focused')
75+
if ( $(evt.target).parent().prev().hasClass('MuiInputLabel-root') )
76+
$(evt.target).parent().prev().addClass('Mui-focused MuiInputLabel-shrink')
77+
})
78+
79+
node.pl_form.on('blur', function(evt) {
80+
$(evt.target).parent().removeClass('Mui-focused')
81+
if ( $(evt.target).parent().prev().hasClass('MuiInputLabel-root') )
82+
$(evt.target).parent().prev().removeClass('Mui-focused MuiInputLabel-shrink')
83+
})
84+
85+
node.pl_form.on('invalid', function(evt) {
86+
$(evt.target).parent().addClass('Mui-error')
87+
})
88+
89+
node.pl_form.on('valid', function(evt) {
90+
$(evt.target).parent().removeClass('Mui-error')
91+
})
92+
93+
94+
}
95+
96+
const handleClose = () => {
97+
setOpen(false);
98+
};
99+
100+
return (<pl.form.payment id="checkout-form" className="container" ref={ref}>
101+
<Typography component="p" gutterBottom>
102+
Amount: $10.00
103+
</Typography>
104+
<pl.input.amount type="hidden" value="10.00"/>
105+
<div>
106+
<FormControl>
107+
<InputLabel>Card Number</InputLabel>
108+
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'15rem'}}>
109+
<pl.input.card_number className="MuiInputBase-input MuiInput-input" placeholder=""/>
110+
</div>
111+
</FormControl>
112+
<FormControl>
113+
<InputLabel>Expires</InputLabel>
114+
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'4rem'}}>
115+
<pl.input.expiry className="MuiInputBase-input MuiInput-input" placeholder=""/>
116+
</div>
117+
</FormControl>
118+
<FormControl>
119+
<InputLabel>CVC</InputLabel>
120+
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'4rem'}}>
121+
<pl.input.card_code className="MuiInputBase-input MuiInput-input" placeholder=""/>
122+
</div>
123+
</FormControl>
124+
</div>
125+
<div>
126+
<FormControl style={{width:'23rem'}}>
127+
<InputLabel htmlFor="my-input">Account Holder</InputLabel>
128+
<Input id="my-input" aria-describedby="my-helper-text" inputProps={{"pl-input":"account_holder"}}/>
129+
</FormControl>
130+
</div>
131+
<div style={{marginTop:'1rem'}}>
132+
<FormControl>
133+
<Button variant="contained" color="primary" type="submit">Pay Now</Button>
134+
</FormControl>
135+
</div>
136+
<Dialog open={open} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
137+
<DialogTitle id="alert-dialog-title" color="primary">Your Payment Was Successful!</DialogTitle>
138+
<DialogContent>
139+
<DialogContentText id="alert-dialog-description">
140+
Thanks for trying out Payload!
141+
</DialogContentText>
142+
</DialogContent>
143+
<DialogActions>
144+
<Button onClick={handleClose} color="primary" autoFocus>
145+
Close
146+
</Button>
147+
</DialogActions>
148+
</Dialog>
149+
</pl.form.payment>)
150+
}
151+
152+
ReactDOM.render(<App/>, document.querySelector('root'));

‎src/material-ui-make-payment.html

Lines changed: 31 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="description" content="">
7-
<meta name="author" content="">
8-
<meta name="viewport" content="width=device-width">
9-
<link rel="shortcut icon" href="https://payload.co/img/favicon.png">
103

11-
<title>Payload MaterialUI Example</title>
12-
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
13-
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
14-
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
15-
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
17-
<script src="https://unpkg.com/payload-react@latest/dist/payload-react.js" crossorigin="anonymous"></script>
18-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
19-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
20-
<script src="https://payload.co/Payload.js"></script>
21-
<style>
22-
.pl-input-sec.pl-focus {
23-
border: none;
24-
outline: 0;
25-
}
26-
</style>
27-
</head>
28-
<body>
29-
<div id="root"></div>
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="description" content="">
8+
<meta name="author" content="">
9+
<meta name="viewport" content="width=device-width">
10+
<link rel="shortcut icon" href="https://payload.co/img/favicon.png">
11+
12+
<title>Payload MaterialUI Example</title>
13+
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
14+
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
15+
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"
16+
crossorigin="anonymous"></script>
17+
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
19+
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
20+
<script src="https://unpkg.com/payload-react@latest/dist/payload-react.js" crossorigin="anonymous"></script>
21+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
22+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
23+
<style>
24+
.pl-input-sec.pl-focus {
25+
border: none;
26+
outline: 0;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div id="root"></div>
33+
// Finish converting bootstrap like material ui
34+
</body>
3035

31-
<script>Payload('test_client_key_3btrkEyC6xvcByXLthuZx');</script>
32-
33-
// TODO Make this look like material ui
34-
// Finish converting bootstrap like material ui
35-
36-
<script type="text/babel">
37-
const {
38-
Typography,
39-
Container,
40-
Box,
41-
Link,
42-
FormControl,
43-
InputLabel,
44-
Input,
45-
Button,
46-
Dialog,
47-
DialogContent,
48-
DialogContentText,
49-
DialogTitle,
50-
DialogActions
51-
} = MaterialUI;
52-
53-
const pl = PayloadReact;
54-
55-
function ProTip() {
56-
return (
57-
<div>
58-
<Typography color="textSecondary" style={{ marginTop: 24, }}>
59-
For more information on integrating Payload: See the {' '}
60-
<Link href="https://github.com/payload-code/payload-react">
61-
payload-react
62-
</Link>{' '}
63-
repo on GitHub and the {' '}
64-
<Link href="https://docs.payload.co">Payload Documentation</Link>.
65-
</Typography>
66-
<Typography color="textSecondary" style={{ marginTop: 24, }}>
67-
See the {' '}
68-
<Link href="https://github.com/payload-code/payload-code.github.io/blob/master/material-ui-make-payment.html">
69-
source code
70-
</Link>{' '}
71-
for this demo on GitHub.
72-
</Typography>
73-
</div>
74-
);
75-
}
76-
77-
function App() {
78-
return (
79-
<Container maxWidth="xs">
80-
<div style={{ marginTop: 24, }}>
81-
<Typography variant="h4" component="h1" gutterBottom>
82-
Make Payment
83-
</Typography>
84-
<Payment/>
85-
<ProTip />
86-
</div>
87-
</Container>
88-
);
89-
}
90-
91-
function Payment() {
92-
const [open, setOpen] = React.useState(false);
93-
var form = null;
94-
95-
const ref = function(node) {
96-
if (!node || node == form) return
97-
form = node
98-
99-
node.pl_form.params.autosubmit = false
100-
node.pl_form.on('processed', function(data) {
101-
setOpen(true);
102-
})
103-
104-
node.pl_form.on('focus', function(evt) {
105-
$(evt.target).parent().addClass('Mui-focused')
106-
if ( $(evt.target).parent().prev().hasClass('MuiInputLabel-root') )
107-
$(evt.target).parent().prev().addClass('Mui-focused MuiInputLabel-shrink')
108-
})
109-
110-
node.pl_form.on('blur', function(evt) {
111-
$(evt.target).parent().removeClass('Mui-focused')
112-
if ( $(evt.target).parent().prev().hasClass('MuiInputLabel-root') )
113-
$(evt.target).parent().prev().removeClass('Mui-focused MuiInputLabel-shrink')
114-
})
115-
116-
node.pl_form.on('invalid', function(evt) {
117-
$(evt.target).parent().addClass('Mui-error')
118-
})
119-
120-
node.pl_form.on('valid', function(evt) {
121-
$(evt.target).parent().removeClass('Mui-error')
122-
})
123-
124-
125-
}
126-
127-
const handleClose = () => {
128-
setOpen(false);
129-
};
130-
131-
return (<pl.form.payment id="checkout-form" className="container" ref={ref}>
132-
<Typography component="p" gutterBottom>
133-
Amount: $10.00
134-
</Typography>
135-
<pl.input.amount type="hidden" value="10.00"/>
136-
<div>
137-
<FormControl>
138-
<InputLabel>Card Number</InputLabel>
139-
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'15rem'}}>
140-
<pl.input.card_number className="MuiInputBase-input MuiInput-input" placeholder=""/>
141-
</div>
142-
</FormControl>
143-
<FormControl>
144-
<InputLabel>Expires</InputLabel>
145-
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'4rem'}}>
146-
<pl.input.expiry className="MuiInputBase-input MuiInput-input" placeholder=""/>
147-
</div>
148-
</FormControl>
149-
<FormControl>
150-
<InputLabel>CVC</InputLabel>
151-
<div className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl" style={{width:'4rem'}}>
152-
<pl.input.card_code className="MuiInputBase-input MuiInput-input" placeholder=""/>
153-
</div>
154-
</FormControl>
155-
</div>
156-
<div>
157-
<FormControl style={{width:'23rem'}}>
158-
<InputLabel htmlFor="my-input">Account Holder</InputLabel>
159-
<Input id="my-input" aria-describedby="my-helper-text" inputProps={{"pl-input":"account_holder"}}/>
160-
</FormControl>
161-
</div>
162-
<div style={{marginTop:'1rem'}}>
163-
<FormControl>
164-
<Button variant="contained" color="primary" type="submit">Pay Now</Button>
165-
</FormControl>
166-
</div>
167-
<Dialog open={open} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
168-
<DialogTitle id="alert-dialog-title" color="primary">Your Payment Was Successful!</DialogTitle>
169-
<DialogContent>
170-
<DialogContentText id="alert-dialog-description">
171-
Thanks for trying out Payload!
172-
</DialogContentText>
173-
</DialogContent>
174-
<DialogActions>
175-
<Button onClick={handleClose} color="primary" autoFocus>
176-
Close
177-
</Button>
178-
</DialogActions>
179-
</Dialog>
180-
</pl.form.payment>)
181-
}
182-
183-
ReactDOM.render(<App/>, document.querySelector('#root'));
184-
185-
</script>
186-
</body>
18736
</html>

0 commit comments

Comments
 (0)