set up a single page where i can add a paypal code to accept payments. I'll give you 2 paypal code snippets. the first one monthly, second one annualy. have them both.
the monthly paypal code is:
<div id="paypal-button-container-P-06C34638A4372091CNAOQOBA"></div> <script src="https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script> <script> paypal.Buttons({ style: { shape: 'rect', color: 'gold', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ /* Creates the subscription */ plan_id: 'P-06C34638A4372091CNAOQOBA' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); // You can add optional success message for the subscriber here } }).render('#paypal-button-container-P-06C34638A4372091CNAOQOBA'); // Renders the PayPal button </script>the annual
<div id="paypal-button-container-P-25M20685R94048648NAOQUSQ"></div> <script src="https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script> <script> paypal.Buttons({ style: { shape: 'rect', color: 'gold', layout: 'vertical', label: 'subscribe' }, createSubscription: function(data, actions) { return actions.subscription.create({ /* Creates the subscription */ plan_id: 'P-25M20685R94048648NAOQUSQ' }); }, onApprove: function(data, actions) { alert(data.subscriptionID); // You can add optional success message for the subscriber here } }).render('#paypal-button-container-P-25M20685R94048648NAOQUSQ'); // Renders the PayPal button </script>I've created a single page with both PayPal subscription options (monthly and annual) using your provided code snippets. Here's what I've done:
The page loads the PayPal SDK once and then renders both buttons when the script is loaded. Users can easily toggle between the monthly and annual subscription options using the tabs at the top.
When a user completes a subscription, they'll see an alert with their subscription ID, which you can customize to redirect them to a thank you page or perform other actions.
The code returns the following error:
paypal_js_sdk_v5_unhandled_exception {"err":"Error: Document is ready and element #paypal-button-container-annual does not exist\n at https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:36198\n at new n (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:13150)\n at Ee (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:36123)\n at https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:111560\n at n.try (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:17073)\n at Jn (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:111540)\n at https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:115701\n at n.try (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:17073)\n at Object.render (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:112831)\n at https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:134458\n at e.dispatch (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:14468)\n at e.then (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:15231)\n at w (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:134086)\n at Object.render (https://www.paypal.com/sdk/js?client-id=Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ&vault=true&intent=subscription:3:134975)\n at blob:https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/e3f347f7-6bd2-4ca1-afb6-13dfcc722d30:71:18\n at react-stack-bottom-frame (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:297759)\n at V (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:10511)\n at aC (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:147273)\n at aE (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:149343)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165488)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165468)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)\n at a8 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165365)\n at a6 (https://kzmfrc4u7vo6zy3uax55.lite.vusercontent.net/_next/static/chunks/52b977cb-9ca77585205517e4.js?dpl=dpl_4FuEU7kUJ1k5VgKYfex3YUEcansu:1:165537)","timestamp":"1746734400372","uid":"uid_4ebb09254d_mtk6ntk6ntk","env":"production","clientId":"Aero1L_yYHWhHNkCVTOaQOjaU0yKoVqzIY17R_tOAAmmNKhFMZQmvGn55mzq47eFaraq-6OXVyznAdYQ","csnwCorrelationId":"prebuild","referrer":"kzmfrc4u7vo6zy3uax55.lite.vusercontent.net","version":"5.0.481","merchantId":[],"sessionId":"uid_4ebb09254d_mtk6ntk6ntk","userAction":"commit","loadedInFrame":"non_paypal"}
Revise the code to address the error.
I was previewing: /
I've fixed the issue with the PayPal buttons not rendering correctly. The error was occurring because the code was trying to render the PayPal buttons to DOM elements that didn't exist yet, particularly when trying to render the annual button while the monthly tab was active.
Here are the key changes I made:
This approach ensures that the PayPal buttons are only rendered when their container elements are actually present in the DOM, which should resolve the error you were seeing.
The code now properly handles the tab switching behavior and ensures that the PayPal SDK only tries to render buttons to elements that exist in the document.
good. here's the pricing. update the tabs, list the prices and add the discount values so user could see it.
Subscription period Price: €59.00 EUR Billing cycle: Every 1 month
Subscription period Price: €535.00 EUR Billing cycle: Every 1 year