Transacting with Stripe

Note: this is new functionality using Stripe’s Checkout tooling and has not been vigorously tested with Unstack. Please report any issues to our team.

Setting up this functionality

  1. Login to your Stripe dashboard and go to the products page and select the product you'd like to allow users to buy/subscribe to on your Unstack site.
  2. Once you've selected a product, go to the pricing section and click the dot-dot-dot option to the far right of the pricing option you'd like to embed.

  3. A modal will then appear, you'll need to enter a success and canceled URL. This should be a page on your Unstack site confirming the subscription or stating their subscription attempt has been successfully canceled. This should be a full URL and not a relative URL.

    Once you filled those two fields out, copy the code Stripe provides.

  4. Now, go to the Unstack page you'll be using for the user to transact on and set the button's hyperlink to "#"

    hyperlink.com


    As mentioned in the above video, we're using a pricing component as an example, however, any component with an action button option (e.g., CTA, media, title, and so on) will work.
  5. Once you made that hyperlinking adjustment, publish the page so you can access the live version.

    Now, visit the live page, hover the button you previously set the hyperlink to "#" and right-click it, then open the inspector tool. You'll want to find that button's ID.

    buttonid




    Take note of this ID, we'll use it in the next step.
  6. Now, paste the code we previously got from Stripe into a custom code component within the same page that your button exists on.

    custom-component


    Next, delete the button code from the snippet received from Stripe.

  7. We'll now use the previously noted down button ID.

    This will be replacing the Stripe button ID.

    var checkoutButton = document.getElementById('REPLACE WITH BUTTON ID');
  8. Once published you'll see this behavior:
    published-behavior
  9. The back button on the checkout page is when the user will be sent to the cancel URL you setup or if they complete the transaction, they'll be sent to the success URL you setup.



  10. And, done. If you need to repeat this, simply make sure this code doesn't appear more than once: <script src="https://js.stripe.com/v3"></script>

Common questions

How can I hide the white-space at the bottom of the page caused by the custom code section?

Easy! First, set the anchor link of the custom code component to "customcode"

common-stripe-questions

Then, add this code after the Stripe snippet:

<style>#customcode {display:none !important;}</style>

Need more help? Please reference these two Stripe help docs:

Current challenges:

  • Stripe checkout/payments are not yet integrated into Unstack. Because of this you must use a custom embed section which requires you to write your own HTML/CSS to style the component.
  • Final checkout happens offsite at checkout.stripe.com. In subsequent product updates users will be able to transact in Unstack content using Unstack components. Data will also be streamlined into Unstack