How Can I Make Multiple Payment Buttons (Subscription and Checkout) Work on One Page, Please?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Can Someone Help Me Urgently, Please?
I am offering a coaching package for say $100. For clients who may not be able to pay one time in full, I want to offer an option for them to pay the full amount in 5 installments. I have created the buttons for the two payments (Pay One Time in Full - Checkout, and Pay 5 times - Subscription) but one disappears the moment I paste the second one. Below are the payment codes I created for the Checkout and Subscription buttons; I replaced Client Id with XXXXXXXX.
ONE TIME PAYMENT - CHECKOUT
<div id="smart-button-container">
<div style="text-align: center;">
<div id=“paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=clientID" data-sdk-integration-source="button-factory"></script>
<script>
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'checkout',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{“description”:"Amplify Coaching Program","amount":{"currency_code":"USD","value":3750}}]
});
},
onApprove: function(data, actions) {
return
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById(’paypal-button-container’);
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
FIVE INSTALLMENTS - SUBSCRIPTION
<div id="paypal-button-container-P-5R3383499H080131TMFE6CLQ"></div>
<script src="https://www.paypal.com/sdk/js?client-id=ClientID=subscription" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
/* Creates the subscription */
plan_id: 'P-5R3383499H080131TMFE6CLQ'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#paypal-button-container-P-5R3383499H080131TMFE6CLQ'); // Renders the PayPal button
</script>
I will really appreciate it if someone could help me out with a review of the codes and possibly add or subtract what needs to be done to have them show on the page and work. PLEASE NOTE: I have no coding experience at all.
I look forward to your kind support.
Cglobal

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.