Skip to main content
Solved

Embedding button with stripe buy button code


Forum|alt.badge.img

Greetings, how do I embed a stripe buy button code to a button in unbounce?  

Best answer by Oliver_Lord

Hi @Joy4all,

 

Thanks for posting in the Community. Great question. There’s actually a great thread here in the Community which explains how to integrate your page with Stripe:

https://community.unbounce.com/tips-scripts-43/how-to-add-a-stripe-checkout-on-your-landing-pages-7081

I hope this helps to get your page up and running correctly.

View original

Oliver_Lord
Unbouncer
Forum|alt.badge.img
  • Launch Specialist @ Unbounce
  • July 26, 2023

Hi @Joy4all,

 

Thanks for posting in the Community. Great question. There’s actually a great thread here in the Community which explains how to integrate your page with Stripe:

https://community.unbounce.com/tips-scripts-43/how-to-add-a-stripe-checkout-on-your-landing-pages-7081

I hope this helps to get your page up and running correctly.


  • Set Up Stripe Account: Create and configure a Stripe account to access the dashboard and generate payment keys.
  • Create a Product in Stripe: Log in to Stripe, navigate to the Products section, and create a product named "Drive Zone Access Pass" or similar.
  • Get Payment Link: Use Stripe’s Checkout feature to generate a payment link for the "Drive Zone Access Pass" product.
  • Copy the Button Code: From Stripe's documentation, obtain the basic HTML and JavaScript code for embedding a buy button.
  • Prepare Your HTML Page: Ensure your webpage has a proper structure with <html> and <body> tags where the button will be added.
  • Insert Stripe Script: Include Stripe's JavaScript library in the <head> section:

    <script src="https://js.stripe.com/v3/"></script>

  • Add the Buy Button: Place the button in your desired location within the drive zone <body>:

    <button id="buy-drive-zone">Buy Drive Zone Access</button>

  • Integrate Payment Functionality: Use JavaScript to handle button clicks and redirect users to the Stripe Checkout page:

    <script> const stripe = Stripe('your-publishable-key'); document.getElementById('buy-drive-zone').addEventListener('click', () => { stripe.redirectToCheckout({ sessionId: 'your-session-id' }); }); </script>

  • Customize the Button: Style the button using CSS to match the Drive Zone theme. For example:

    css

    #buy-drive-zone { background-color: #ff5722; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; }

  • Test the Integration: Run your webpage locally or on a test server and ensure the button redirects to Stripe Checkout properly.
  • Set Up Webhook: Use Stripe Webhooks to handle post-payment events, such as sending confirmation emails or unlocking Drive Zone features.
  • Publish Your Page: Once tested, upload the webpage to your hosting platform, making the "Drive Zone Access Pass" available for purchase.

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings