tavo/conex-builder
1
0
Fork 0
mirror of https://github.com/tavo-wasd-gh/conex-builder.git synced 2025-06-07 12:13:30 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

works kinda

Browse source
This commit is contained in:
tavo-wasd 2024-08-13 21:13:32 -06:00
parent 3e94894927
commit badf561b18
2 changed files with 45 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
public/form.js
View file

@ -18,18 +18,39 @@ const clientId = "";
const OneTimePID = ""; const OneTimePID = "";
const PlanID = ""; const PlanID = "";
function loadScript(url, callback) { loadOneTimeButton().then(() => {loadSubButton()})
const script = document.createElement('script');
script.src = url; function loadOneTimeButton() {
script.onload = callback; return new Promise((resolve, reject) => {
script.onerror = () => { var script = document.createElement('script');
console.error(`Script load error: ${url}`); script.src = PayPalSdkOneTime;
}; script.onload = function() {
document.head.appendChild(script); paypal.HostedButtons({
hostedButtonId: OneTimePID,
}).render("#paypalOneTimeButton");
};
document.head.appendChild(script);
resolve();
});
} }
function loadPayPalSDK(url, callback) { function loadSubButton() {
loadScript(url, callback); var script = document.createElement('script');
script.src = PayPalSdkSub;
script.onload = function() {
paypal.Buttons({
style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' },
createSubscription: function(data, actions) {
return actions.subscription.create({
plan_id: PlanID
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#paypalSubButton');
};
document.head.appendChild(script);
} }
function hideDialog() { function hideDialog() {
@ -60,27 +81,9 @@ function togglePaymentMethod(selectedButtonId) {
if (selectedButtonId === 'showOneTimeButton') { if (selectedButtonId === 'showOneTimeButton') {
document.getElementById('paypal-button-container').classList.add('active'); document.getElementById('paypal-button-container').classList.add('active');
document.getElementById('paypalOneTimeButton').classList.add('active'); document.getElementById('paypalOneTimeButton').classList.add('active');
loadPayPalSDK(PayPalSdkOneTime, () => {
paypal.HostedButtons({
hostedButtonId: OneTimePID,
}).render("#paypalOneTimeButton");
});
} else if (selectedButtonId === 'showSubButton') { } else if (selectedButtonId === 'showSubButton') {
document.getElementById('paypal-button-container').classList.add('active'); document.getElementById('paypal-button-container').classList.add('active');
document.getElementById('paypalSubButton').classList.add('active'); document.getElementById('paypalSubButton').classList.add('active');
loadPayPalSDK(PayPalSdkSub, () => {
paypal.Buttons({
style: { shape: 'pill', color: 'black', layout: 'vertical', label: 'subscribe' },
createSubscription: function(data, actions) {
return actions.subscription.create({
plan_id: PlanID
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#paypalSubButton'); // Renders the PayPal button
});
} }
} }

24
public/static/css/style.css
View file

@ -127,8 +127,8 @@ footer {
} }
#dialog { #dialog {
width: 25em; width: 85%;
max-width: var(--page-width); max-width: 30em;
display: none; display: none;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -142,7 +142,7 @@ footer {
border-radius: 10px; border-radius: 10px;
text-align: left; text-align: left;
overflow: auto; overflow: auto;
max-height: 80vh; max-height: 70vh;
} }
#dialog h2, #dialog p { #dialog h2, #dialog p {
@ -167,7 +167,6 @@ footer {
} }
#dialog input { #dialog input {
border-radius: 10px;
text-align: left; text-align: left;
font-size: 1em; font-size: 1em;
display: block; display: block;
@ -225,13 +224,17 @@ button {
border: 0; border: 0;
} }
#method-button-container {
display: flex;
justify-content: center;
margin: 1em 0;
}
#method-button-container button { #method-button-container button {
background-color: #ccc; transition: 0.3s;
border: none; background-color: var(--background);
padding: 10px 20px; border: 1px solid var(--hover-border);
margin: 5px; color: var(--unemph-color);
cursor: pointer;
transition: background-color 0.3s;
} }
#method-button-container button.active { #method-button-container button.active {
@ -240,6 +243,7 @@ button {
} }
#paypal-button-container > div { #paypal-button-container > div {
margin: 1.5em 0 0 0;
display: none; display: none;
} }