How Can I Make Multiple Payment Buttons (Subscription and Checkout) Work on One Page, Please?

Cglobal
Contributor
Contributor

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

 

Login to Me Too
0 REPLIES 0

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.