Squarespace Integration

Accept payments on any Squarespace page using a hosted checkout overlay. No backend required.

Hosted Checkout

Cards · Apple Pay · Google Pay

Refunds sync

No code changes

Global EnvironmentCards · Apple Pay · Google PayUSD · AED · EUR · GBP · SAR

How it works

The BINKPAY Squarespace integration uses a lightweight JavaScript embed — https://js.binkpay.net/v1/embed.js — that you paste into a Squarespace Code Block. When a visitor clicks the button, a fully-hosted BINKPAY checkout overlay opens on top of your Squarespace page. The customer completes payment without leaving your site, and your success callback fires with the completed payment object.

Because checkout is handled entirely by BINKPAY's hosted infrastructure, you do not need a server, webhook endpoint, or any backend code to start collecting payments. All PCI compliance, fraud detection, and payment routing is managed by BINKPAY.

Prerequisites

Installation

Log in to the BINKPAY Dashboard and navigate to Integrations → Squarespace → Configuration. Select the Payment Link you want to embed, then click Copy Snippet. The snippet is pre-filled with your embed key and the payment link URL.

Open the Squarespace Editor and add a Code Block

In your Squarespace site editor, navigate to the page where you want the payment button to appear. Click Edit, then click the + icon to add a new content block. Search for Code and select the Code block. Make sure the block type is set to HTML (not JavaScript or CSS).

Paste the BINKPAY embed snippet

Paste the copied snippet into the Code Block editor. The snippet loads the BINKPAY.js library and initializes a hosted checkout overlay anchored to the container div. No server-side code is required — the checkout runs entirely through BINKPAY's hosted infrastructure.

squarespace-code-block.html

<!-- BINKPAY Payment Embed -->
<div id= "binkpay-checkout-container"></div>
<script src= "https://js.binkpay.net/v1/embed.js"></script>
<script>
 BinkPay.init({
 embedKey: 'bink_embed_your_key_here',
 checkoutUrl: 'https://checkout.binkpay.net/pay/pl_YOUR_PAYMENT_LINK',
 buttonText: 'Pay Now',
 buttonStyle: {
 backgroundColor: '#000000',
 color: '#ffffff',
 borderRadius: '8px',
 padding: '14px 28px',
 fontSize: '15px',
 fontWeight: '600',
 },
 onSuccess: function(payment) {
 console.log( 'Payment succeeded:', payment.id);
 window.location.href = '/order-confirmed?payment='+ payment.id;
 },
 onCancel: function() {
 console.log( 'Customer cancelled checkout');
 },
 });
</script>

Click Save in the Code Block editor, then click Publish in the top-right of the Squarespace editor. Visit your live page to confirm the payment button appears. Clicking it should open the BINKPAY hosted checkout overlay without navigating away from your Squarespace page.

Customizing button styling

You can style the BINKPAY button using the buttonStyle object in BinkPay.init(), or by writing CSS that targets the #binkpay-checkout-container element. For site-wide consistency, use CSS custom properties in a separate Code Block or via Squarespace's Custom CSS editor (Design → Custom CSS).

binkpay-button-styles.css

/* Paste inside a Squarespace Code Block set to CSS, or in
 Settings → Advanced → Code Injection → Header inside a <style> tag */

:root {
 --binkpay-btn-bg: #0057FF;
 --binkpay-btn-color: #ffffff;--binkpay-btn-radius: 6px;
 --binkpay-btn-padding: 14px 32px;
 --binkpay-btn-font-size: 15px;
 --binkpay-btn-font-weight: 600;
 --binkpay-btn-hover-bg: #0040cc;}

/* Override button appearance after the embed renders */ #binkpay-checkout-container button {
 background-color: var(--binkpay-btn-bg) !important;
 color: var(--binkpay-btn-color) !important;
 border-radius: var(--binkpay-btn-radius) !important;
 padding: var(--binkpay-btn-padding) !important;
 font-size: var(--binkpay-btn-font-size) !important;
 font-weight: var(--binkpay-btn-font-weight) !important;
 transition: background-color 0.2s ease;
}

#binkpay-checkout-container button:hover {
 background-color: var(--binkpay-btn-hover-bg) !important;
}

The buttonStyle object in BinkPay.init() accepts any valid CSS property in camelCase format. Inline styles take precedence over external CSS, so remove the buttonStyle key from your init config if you prefer to control all styles through your CSS file.

Mobile optimization

The BINKPAY checkout overlay is fully responsive and optimized for mobile browsers. On devices narrower than 640px, the overlay renders as a bottom sheet that slides up from the footer of the screen — consistent with native mobile payment UX patterns. Apple Pay and Google Pay buttons appear automatically when the customer's device and browser support them.

Squarespace renders your pages using a mobile-first layout engine, so the BINKPAY embed button will naturally adapt to your page's column widths at every breakpoint. If you want the button to span the full width of its container on mobile, add the following to your Custom CSS:

@media (max-width: 640px) {
 #binkpay-checkout-container button {
 width: 100% !important;
 padding: 16px !important;
 }
}

Multiple products on one page

Add multiple BINKPAY Code Blocks to the same Squarespace page to offer several products or pricing tiers. Each instance of BinkPay.init() must reference a unique containerId matching the id of its container <div>. The BINKPAY.js script only needs to be loaded once — subsequent init calls will reuse the already-loaded library.

<!-- Product A: Annual Subscription -->
<div id= "binkpay-checkout-container-annual"></div>
<script src= "https://js.binkpay.net/v1/embed.js"></script>
<script>
 BinkPay.init({
 containerId: 'binkpay-checkout-container-annual',
 embedKey: 'bink_embed_your_key_here',
 checkoutUrl: 'https://checkout.binkpay.net/pay/pl_annual_plan',
 buttonText: 'Buy Annual — $99/yr',
 onSuccess: function(payment) {
 window.location.href = '/welcome?plan=annual&payment='+ payment.id;
 },
 onCancel: function() {},
 });
</script>

<!-- Product B: Monthly Subscription (separate Code Block) -->
<div id= "binkpay-checkout-container-monthly"></div>
<script>
 BinkPay.init({
 containerId: 'binkpay-checkout-container-monthly',
 embedKey: 'bink_embed_your_key_here',
 checkoutUrl: 'https://checkout.binkpay.net/pay/pl_monthly_plan',
 buttonText: 'Buy Monthly — $12/mo',
 onSuccess: function(payment) {
 window.location.href = '/welcome?plan=monthly&payment='+ payment.id;
 },
 onCancel: function() {},
 });
</script>

Alternative: Header code injection

If you have multiple pages with BINKPAY buttons, load the BINKPAY.js script once in your Squarespace site header instead of including the <script src> tag in every Code Block. This reduces redundant script loads and keeps individual Code Blocks shorter.

Step 1. In Squarespace, go to Settings → Advanced → Code Injection → Header and paste:

squarespace-header-injection.html

<!-- Paste in Squarespace: Settings → Advanced → Code Injection → Header -->
<script src= "https://js.binkpay.net/v1/embed.js"defer></script>

Step 2. In each page Code Block, call BinkPay.init() directly without the <script src> tag. Wrap the call in a DOMContentLoaded listener to ensure the library is ready:

<!-- Then in each page Code Block, call BinkPay.init() directly (no script src needed) -->
<div id= "binkpay-checkout-container"></div>
<script>
 document.addEventListener( 'DOMContentLoaded', function() {
 BinkPay.init({
 embedKey: 'bink_embed_your_key_here',
 checkoutUrl: 'https://checkout.binkpay.net/pay/pl_YOUR_PAYMENT_LINK',
 buttonText: 'Pay Now',
 onSuccess: function(payment) {
 window.location.href = '/order-confirmed?payment='+ payment.id;
 },
 onCancel: function() {},
 });
 });
</script>

Testing

Before going live, test your integration using a test embed key. Test embed keys start with bink_embed_test_ and open the BINKPAY sandbox checkout, where no real charges are made. Test Payment Links are created automatically for every live Payment Link in your account — find them in the Dashboard under Payment Links → Test Mode.

Use the following test card numbers to simulate different payment outcomes in the sandbox checkout:

Use any future expiry date, any 3-digit CVC, and any billing postal code.

Security

The BINKPAY embed is designed to be safe for client-side use. Here's what you need to know:

• ✓HTTPS is required. The BINKPAY.js script and checkout overlay will refuse to initialize on non-HTTPS origins. Squarespace automatically provisions SSL for all published sites, so this is handled for you.
• ✓Embed keys are public-safe. Your embed key (bink_embed_live_...) is scoped to checkout overlay initialization only. It cannot be used to issue refunds, access customer data, or perform any account-level operations. It is safe to include in client-side HTML.
• ✓No sensitive data in client code. Never paste your BINKPAY secret API key (sk_live_...) into any Squarespace Code Block or Custom CSS field. Secret keys are for server-side use only.
• ✓Card data never touches your site. The checkout overlay is served from checkout.binkpay.net in an isolated iframe. Card numbers and CVCs are entered directly into BINKPAY's PCI DSS Level 1 certified environment.

Troubleshooting

The embed is not loading / I see a blank area

This usually means the BINKPAY.js script failed to load, or the Code Block is set to the wrong type.

• Confirm the Code Block mode is set to HTML, not JavaScript or CSS.
• Check your browser's developer console (F12 → Console) for script errors or network failures. A Content Security Policy error means your Squarespace template is blocking external scripts — contact Squarespace support or switch to a different template.
• Ensure your Squarespace site is published, not in Preview mode. The embed does not render inside the Squarespace editor.

The container div appears but no button is rendered

The script loaded but BinkPay.init() failed silently, likely due to an invalid embed key or malformed configuration.

• Open the browser console and look for a BinkPay initialization error message. It will include a specific error code.
• Verify that your embed key starts with bink_embed_ and was copied in full without trailing whitespace.
• Confirm the embed key is active in Dashboard → Integrations → Squarespace → Keys. Revoked or expired keys will fail silently on the client.

The checkout overlay opens but shows "Payment Link Expired" or "Link Not Found"

The Payment Link referenced in your checkoutUrl has been deactivated, expired, or deleted.

• Go to Dashboard → Payment Links and confirm the link's status is Active. Archived links cannot accept payments.
• If you set an expiry date on the Payment Link, it may have passed. Edit the link to extend or remove the expiry.
• If you deleted the Payment Link, create a new one and update the checkoutUrl in your Squarespace Code Block with the new link URL.

← Payment Links

Zapier Integration →