PayPal Checkout Buttons not working

[OAVHome]

Select Payment Option

• Full Payment - $600
• Non-Profit - $500
• Installment #1 - $250
• Installment #2 - $225
• Installment #3 - $100
• Installment #4 - $45

Full Payment - $600.00

Non-Profit Payment - $500.00

Installment Option #1 - $250.00

Installment Option #2 - $225.00

Installment Option #3 - $100.00

Installment Option #4 - $45.00

<script src="https://www.paypalobjects.com/api/checkout.js"></script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '600.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-A'); </script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '500.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-B'); </script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '250.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-C'); </script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '225.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-D'); </script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '100.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-E'); </script> <script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '', production: '' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '45.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-F'); </script>

[OAVHome]

Updated Script Code

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '600.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-A'); </script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '500.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-B'); </script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '250.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-C'); </script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '225.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-D'); </script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '100.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-E'); </script>

<script> paypal.Button.render({ env: 'production', // Or 'sandbox' client: { sandbox: '<Sandbox ID Here>', production: '<Production ID Here>' }, style: { size: 'responsive', color: 'gold', shape: 'pill', label: 'checkout' }, commit: true, // Show a 'Pay Now' button payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '45.00', currency: 'USD' } } ] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // The payment is complete! // You can now show a confirmation message to the customer }); } }, '#course-one-F'); </script>

[OAVHome]

Updated HTML

<div class="panel-footer">

<div class="dropdown">

<button class="btn btn-default dropdown-toggle payment-options" type="button" data-toggle="dropdown">Select Payment Option <span class="caret"></span></button>

<ul class="dropdown-menu" id="payment-options-dropdown-a">

<li><a data-toggle="tab" data-parent="#accordion" href="#optionA">Full Payment - $600</a></li>

<li><a data-toggle="tab" data-parent="#accordion" href="#optionB">Non-Profit - $500</a></li>

<li><a data-toggle="tab" data-parent="#accordion" href="#optionC">Installment #1 - $250</a></li>

<li><a data-toggle="tab" data-parent="#accordion" href="#optionD">Installment #2 - $225</a></li>

<li><a data-toggle="tab" data-parent="#accordion" href="#optionE">Installment #3 - $100</a></li>

<li><a data-toggle="tab" data-parent="#accordion" href="#optionF">Installment #4 - $45</a></li>

</ul>

</div>

<div class="tab-content">

<div id="optionA" class="payment-options-selection tab-pane fade in active">

    Full Payment - $600.00

    <div class="paypal-container" id="course-one-A"></div>

</div>

<div id="optionB" class="payment-options-selection tab-pane fade">

    Non-Profit Payment - $500.00

    <div class="paypal-container" id="course-one-B"></div>

</div>

<div id="optionC" class="payment-options-selection tab-pane fade">

    Installment Option #1 - $250.00

    <div class="paypal-container" id="course-one-C"></div>

</div>

<div id="optionD" class="payment-options-selection tab-pane fade">

    Installment Option #2 - $225.00

    <div class="paypal-container" id="course-one-D"></div>

</div>

<div id="optionE" class="payment-options-selection tab-pane fade">

    Installment Option #3 - $100.00

    <div class="paypal-container" id="course-one-E"></div>

</div>

<div id="optionF" class="payment-options-selection tab-pane fade">

    Installment Option #4 - $45.00

    <div class="paypal-container" id="course-one-F"></div>

</div>

</div>

</div>