forked from mjahmad1/dream
-
Notifications
You must be signed in to change notification settings - Fork 0
/
donate.html
209 lines (178 loc) · 7.7 KB
/
donate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أهلا وسهلا بك في موقعي</title>
<!-- Existing styles... -->
<style>
/* Donation Section Styles */
.donation-section {
background-color: #f7f7f7; /* Light grey background */
padding: 40px; /* Padding around the donation section */
text-align: center; /* Center align the content */
}
.donation-options {
margin: 20px auto; /* Center the options */
display: flex; /* Use flexbox for layout */
justify-content: center; /* Center the items horizontally */
gap: 20px; /* Space between the items */
}
.donation-button {
padding: 10px 20px; /* Padding inside the button */
font-size: 1em; /* Font size for the button text */
cursor: pointer; /* Cursor style when hovering over the button */
border: none; /* No border for the button */
background-color: #008CBA; /* Blue background for the button */
color: white; /* White text for the button */
}
// Modify your existing donateNow click event handler
document.getElementById('donateNow').addEventListener('click', function() {
// Get the selected amount from the selected donation button or the custom amount input
var selectedAmount = document.querySelector('.donation-button.selected')?.getAttribute('data-amount') || document.getElementById('customAmount').value;
// Check if the selected amount is not empty or null
if (selectedAmount && selectedAmount.trim() !== '') {
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page with the selected amount
stripe.redirectToCheckout({
lineItems: [{ price: 'price_ID', quantity: 1 }], // Replace 'price_ID' with your actual price ID
mode: 'payment',
successUrl: window.location.protocol + '//' + window.location.host + '/success.html', // Replace with your success URL
cancelUrl: window.location.protocol + '//' + window.location.host + '/cancel.html', // Replace with your cancel URL
}).then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
alert(result.error.message);
}
});
} else {
// If no amount is selected, alert the user and do not proceed to checkout
alert('Please select an amount to donate.');
}
});
/* Responsive styles... */
</style>
</head>
<body>
<!-- Existing content... -->
<!-- Donation Section -->
<div class="donation-section">
<h2>تبرع الآن</h2>
<div class="donation-options">
<button class="donation-button" data-amount="200">200 Tk</button>
<button class="donation-button" data-amount="500">500 Tk</button>
<button class="donation-button" data-amount="1000">1000 Tk</button>
</div>
<button id="donateNow" class="donation-button">Donate Now</button>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Initialize Stripe with your publishable key
var stripe = Stripe('pk_test_51NSjLzHI6KpMDN4wCyCp6BsIXUIppX284VFnQmyln0GP8GxR0isD6uzBZVGCCl14l6rpud2QVffXQZMuZe6aYJ7F00hfCpDvBk');
// Handle the donation button click
document.getElementById('donateNow').addEventListener('click', function() {
// Function to update the displayed amount and handle the selected class
function updateDisplayedAmount(amount, button) {
document.getElementById('donateNow').innerText = 'Donate ' + amount + ' Tk';
// Remove selected class from all buttons
var donationButtons = document.querySelectorAll('.donation-button');
donationButtons.forEach(function(btn) {
btn.classList.remove('selected');
});
// Add selected class to the clicked button
button.classList.add('selected');
}
// Event listeners for the donation buttons
var donationButtons = document.querySelectorAll('.donation-button');
donationButtons.forEach(function(button) {
button.addEventListener('click', function() {
var amount = this.getAttribute('data-amount');
updateDisplayedAmount(amount, this); // Pass the clicked button as well
});
});
// Event listener for the custom amount input
document.getElementById('customAmount').addEventListener('input', function() {
var amount = this.value;
updateDisplayedAmount(amount); // Update the display
});
// Modify the existing donateNow click event handler
document.getElementById('donateNow').addEventListener('click', function() {
// Get the selected amount from the selected donation button or the custom amount input
var selectedAmount = document.querySelector('.donation-button.selected')?.getAttribute('data-amount') || document.getElementById('customAmount').value;
// Check if the selected amount is not empty or null
if (selectedAmount && selectedAmount.trim() !== '') {
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page with the selected amount
stripe.redirectToCheckout({
lineItems: [{ price: 'price_ID', quantity: 1 }], // Replace 'price_ID' with your actual price ID
mode: 'payment',
successUrl: window.location.protocol + '//' + window.location.host + '/success.html', // Replace with your success URL
cancelUrl: window.location.protocol + '//' + window.location.host + '/cancel.html', // Replace with your cancel URL
}).then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
alert(result.error.message);
}
});
} else {
// If no amount is selected, alert the user and do not proceed to checkout
alert('Please select an amount to donate.');
}
});
// You can customize this part to redirect to your Stripe checkout page
// For now, it just logs the selected amount to the console
var selectedAmount = document.querySelector('.donation-button[data-amount].selected')?.getAttribute('data-amount') || '200';
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page
// stripe.redirectToCheckout({ ... });
});
</script>
<!-- Existing content... -->
</body>
</html>
<!-- Modify the existing input field by changing the placeholder attribute -->
<input type="text" id="customAmount" class="custom-amount-input" placeholder="আপনার ইচ্ছামত অ্যামাউন্ট লিখুন" />
<!-- Add this style inside your <head> tag -->
<style>
.custom-amount-input {
margin: 10px auto;
padding: 10px;
width: 80%;
font-size: 1em;
}
</style>
<!-- Add this HTML inside your <body> tag, within the .donation-section -->
<div class="donation-options">
<input type="text" id="customAmount" class="custom-amount-input" placeholder="Enter custom amount" />
</div>
<!-- Modify your existing script tag -->
<script>
// Existing Stripe initialization code...
// Function to update the displayed amount
function updateDisplayedAmount(amount) {
document.getElementById('donateNow').innerText = 'Donate ' + amount + ' Tk';
}
// Event listeners for the donation buttons
var donationButtons = document.querySelectorAll('.donation-button');
donationButtons.forEach(function(button) {
button.addEventListener('click', function() {
var amount = this.getAttribute('data-amount');
updateDisplayedAmount(amount); // Update the display
this.classList.add('selected'); // Optional: Highlight the selected button
});
});
// Event listener for the custom amount input
document.getElementById('customAmount').addEventListener('input', function() {
var amount = this.value;
updateDisplayedAmount(amount); // Update the display
});
// Modify the existing donateNow click event handler
document.getElementById('donateNow').addEventListener('click', function() {
var selectedAmount = document.querySelector('.donation-button.selected')?.getAttribute('data-amount') || document.getElementById('customAmount').value || '200';
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page
// stripe.redirectToCheckout({ ... });
});
</script>