works kinda

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

View file

@ -18,18 +18,39 @@ const clientId = "";
const OneTimePID = "";
const PlanID = "";
function loadScript(url, callback) {
const script = document.createElement('script');
script.src = url;
script.onload = callback;
script.onerror = () => {
console.error(`Script load error: ${url}`);
};
document.head.appendChild(script);
loadOneTimeButton().then(() => {loadSubButton()})
function loadOneTimeButton() {
return new Promise((resolve, reject) => {
var script = document.createElement('script');
script.src = PayPalSdkOneTime;
script.onload = function() {
paypal.HostedButtons({
hostedButtonId: OneTimePID,
}).render("#paypalOneTimeButton");
};
document.head.appendChild(script);
resolve();
});
}
function loadPayPalSDK(url, callback) {
loadScript(url, callback);
function loadSubButton() {
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() {
@ -60,27 +81,9 @@ function togglePaymentMethod(selectedButtonId) {
if (selectedButtonId === 'showOneTimeButton') {
document.getElementById('paypal-button-container').classList.add('active');
document.getElementById('paypalOneTimeButton').classList.add('active');
loadPayPalSDK(PayPalSdkOneTime, () => {
paypal.HostedButtons({
hostedButtonId: OneTimePID,
}).render("#paypalOneTimeButton");
});
} else if (selectedButtonId === 'showSubButton') {
document.getElementById('paypal-button-container').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
});
}
}

View file

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