Adding a stripe to your Squarespace site is simple and only takes a few minutes!
First, log in to your Squarespace account and go to the “Design” tab. Next, click on the “Edit HTML/CSS” option.
A new window will open with all of your site’s code.
Now, you’ll want to find the code for your site’s header. This is usually near the top of the code. Once you’ve found it, add the following code to your header:
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
This will load Stripe's JavaScript library onto your site. Now we can add a button!
Find the spot on your site where you want to add the button. It could be in the header, sidebar, footer, or anywhere else. Then, add the following code where you want the button to appear:
<button id="checkout-button">Pay with Card</button>
This will add a basic button to your site that says "Pay with Card". You can customize this text by changing the "Pay with Card" text in the code.
<script type="text/javascript">var handler = StripeCheckout.configure({key: 'Your key here',image: 'Your logo here',token: function(token) {// Use the token to create the charge with a server-side script.// You can access the token ID with `token.id`}});document.getElementById('checkout-button').addEventListener('click', function(e) {// Open Checkout with further optionshandler.open({name: 'Your business name',description: 'Your product name',amount: Your product price * 100});e.preventDefault();});// Close Checkout on page navigationStripeCheckout.closeOnWindowUnload = false;</script>
This code does a few things:
- It defines your key and image. The key is your unique Stripe API key (find it in your account settings). The image is optional, but it's a good idea to set it so that your customers recognize your brand when they're making a payment.
- It sets up a token callback. This is important!
The token callback creates a token that represents the customer's payment details. We'll use this token to create a charge in our server-side script. - It opens Checkout. When someone clicks on the button, Checkout will open and display information about your product or service.
And that's it! You've now added Stripe Checkout to your Squarespace site.
