Gift Up

How to integrate Gift Up with Webflow

Gift cards help businesses capture revenue from customers who want to give services or products as gifts. Gift Up integrates with Webflow to let teams sell and manage gift cards without building custom payment infrastructure.

Integrate Gift Up with Webflow through embedded widgets that load directly on pages, iframe-based hosted checkout for sandboxed displays, button-triggered modal checkout for CTAs, custom API integration for advanced redemption workflows, or Zapier automation for no-code data syncing.

Note: Webflow's e-commerce API does not support automatic gift card redemption in its native checkout, so gift cards operate as standalone checkout experiences rather than native discount codes.

Embed the drop-in checkout widget

The drop-in checkout widget renders Gift Up's complete purchase flow directly on Webflow pages through an embedded HTML component. This method displays gift card options, captures recipient details, and processes payments without redirecting customers to external sites. The widget loads asynchronously and can be customized through HTML data attributes and CSS overrides to adapt to Webflow's design system.

Implementation requires two HTML elements. Add a script tag in site settings and place a div element on the desired page. The script initializes Gift Up's JavaScript library while the div specifies where checkout renders. Teams can add multiple widgets across different pages by duplicating the div element with the same configuration.

Implementation steps:

• Add <script src="https://giftup.app/dist/gift-up.js"></script> to site settings under Custom Code → Footer Code
• Drag Webflow's Code Embed element onto the page where checkout should appear
• Paste <div data-site-id="{YOUR_GIFT_UP_ID}"></div> into the embed component
• Replace {YOUR_GIFT_UP_ID} with the ID from your Gift Up dashboard
• Publish the site (embeds only function on published sites, not preview mode)

You should create a dedicated "/gift-cards" page and linking to it from the site's main navigation. This creates a clear purchase path for customers while keeping gift card functionality separate from other commerce flows.

Gift Up's checkout supports extensive customization through HTML data attributes detailed in the customization documentation. Attributes that control checkout behavior include:

• Pre-fill customer data with data-purchaser-name and data-purchaser-email to reduce form friction
• Set default gift values using data-custom-value-amount for promotional campaigns
• Control UI language with data-language supporting multiple locales
• Hide visual elements like data-hide-artwork to match minimal design aesthetics
• Apply promo codes automatically via data-promo-code for marketing campaigns

CSS customization works through global styles added to site settings under Custom Code → Head Code. Override Gift Up's default styles by targeting .giftup-container classes with !important declarations to ensure specificity. This CSS-only styling approach is limited to overrides of predefined classes, and you cannot modify the DOM structure or reposition form fields due to iframe security constraints.

Use iframe-based hosted checkout

Iframe embeds load Gift Up's checkout in a sandboxed container. This approach works well when teams want Gift Up to handle all design decisions or when CSS conflicts with the drop-in widget cause display issues.

However, iframe-based embeds have customization constraints. The DOM structure cannot be modified and form submissions are entirely controlled by Gift Up, preventing deep UI customization or complex form validation.

The hosted checkout documentation provides iframe markup with URL parameters that control display options:

<iframe src="https://checkout.giftup.app/checkout/{YOUR_SITE_ID}?justshowcheckout=true"
 width="100%"
 height="800"
 frameborder="0">
</iframe>

The justshowcheckout=true parameter removes Gift Up's header branding, creating a cleaner embed that focuses on the purchase flow. Teams can adjust the height value based on their gift card configuration. More options or longer forms require taller iframes.

Choose iframe when you need complete style isolation, when Gift Up's default design matches your brand, or when you want to control the checkout experience within a sandboxed environment. Choose drop-in widget when you need CSS customization, when the checkout should feel native to the site, when you want to control responsive behavior, or when you prefer a simpler implementation.

Trigger checkout with custom buttons

Button-triggered modal checkout opens Gift Up's purchase flow in an overlay when customers click designated elements. According to Gift Up's customization documentation, this modal approach keeps users on the current page while presenting gift card options in a focused interface. The modal works particularly well for homepage CTAs or product pages where leaving the page disrupts user experience.

Any HTML button becomes a trigger when it includes specific data attributes:

<button class="giftup-button"
 data-site-id="{YOUR_ID}"
 data-language="en-US">
 Buy Gift Card
</button>

The giftup-button class signals to Gift Up's JavaScript that the element should trigger a modal checkout. Teams can apply this class to custom HTML button elements with specific data attributes like data-site-id and data-language to control the checkout behavior and appearance.

Button placement strategies that improve visibility and conversion include:

• Add to hero sections for immediate visibility on landing pages
• Include in product descriptions when gift cards relate to specific services
• Place in navigation menus for persistent access across the site
• Embed in blog posts or content pages for contextual gift card promotions
• Create a dedicated "/gift-cards" page in Webflow and add navigation links to it in the site's navbar, as recommended in Gift Up's best practice documentation

Build with Webflow and Gift Up API

Gift Up's REST API enables custom integration workflows that extend beyond embedded widgets. Development teams use API endpoints to validate gift cards via GET https://api.giftup.app/gift-cards/{code}, process redemptions with POST https://api.giftup.app/gift-cards/{code}/redeem, sync order data to Webflow CMS through webhook events, and build automated notification systems. This approach requires server-side code but provides complete control over user experience and business logic.

The Gift Up Developer API documents all endpoints with request/response specifications. API requests require Bearer token authentication via the Authorization header using tokens generated from the Gift Up dashboard under Integrations → API.

Custom integrations typically require middleware or serverless functions to avoid exposing API keys in client-side JavaScript. Webflow sites can call AWS Lambda, Google Cloud Functions, or Cloudflare Workers that proxy requests to Gift Up's API. This keeps authentication secure while allowing client-side JavaScript to trigger gift card operations.

Validate and redeem gift cards

The redemption workflow represents the most common custom integration use case. Teams building membership sites, service booking platforms, or subscription flows often need gift cards to apply discounts automatically during checkout.

The redemption flow follows this pattern:

1. Capture gift card code from user input on Webflow checkout page
2. Call GET /gift-cards/{code} to retrieve card details and current balance
3. Validate that balance covers the purchase amount
4. Call POST /gift-cards/{code}/redeem with the redemption amount
5. Update Webflow checkout to reflect the applied discount

Implementation requirements for custom redemption include:

• Deploy serverless function to handle API calls securely (required for custom Gift Up integration)
• Add custom input field to Webflow page for gift card code entry
• Write JavaScript to call your serverless function with card code to validate against Gift Up's API
• Use Gift Up's GET /gift-cards/{code} endpoint to verify card validity and retrieve balance
• Handle edge cases like insufficient balance, expired cards, or invalid codes
• Call POST /gift-cards/{code}/redeem endpoint to process redemption if validation successful
• Display redemption confirmation and remaining balance to customers

The Gift Up API supports partial redemptions, allowing customers to use gift card balance toward larger purchases. However, due to Webflow's API limitations, gift cards cannot be automatically applied in Webflow's native checkout. Instead, customers must manually enter gift card codes as discount codes or redemptions must be processed outside the standard Webflow payment flow.

Sync order data with webhooks

Gift Up sends real-time notifications through webhook POST requests when gift cards are purchased, redeemed, or updated. Teams can receive these webhook events (including order.created, giftcard.created, giftcard.updated, and giftcard.redeemed) and use automation platforms like Zapier to automatically create or update Webflow CMS items, enabling dynamic displays of recent purchases, redemption activity, or gift card inventory status.

There are four event types. Configure webhooks in the Gift Up dashboard under Integrations → API → Webhooks by providing a publicly accessible endpoint URL.

Webhook implementation workflow steps include:

1. Deploy endpoint that receives POST requests from Gift Up
2. Verify HMAC-SHA256 signature in X-Request-Signature-Sha-256 header to confirm authenticity
3. Parse JSON payload to extract gift card or order data
4. Call Webflow's Collections API to create or update collection items
5. Return 200 status code to confirm receipt

The Webflow REST API Introduction provides endpoints for creating and updating CMS items at POST /v2/collections/{collection_id}/items and PATCH /v2/collections/{collection_id}/items/{item_id}.

Practical webhook use cases that sync data between platforms include:

• Create "Recent Purchases" CMS items showing customer first names and purchase amounts for social proof using Zapier automation when gift cards are purchased
• Update live gift card inventory counters when cards sell or get redeemed through webhook triggers
• Trigger email campaigns through marketing tools like Zapier when high-value cards are purchased
• Log redemption events to analytics platforms for business intelligence using Gift Up's webhook infrastructure

Gift Up automatically retries failed webhook deliveries up to 4 times with exponential backoff according to the webhook reliability documentation. Endpoints must respond with 200 status within a reasonable timeout to avoid retries.

Connect through Zapier automation

Zapier provides no-code integration between Gift Up and Webflow by connecting Gift Up triggers like new orders or gift card redemptions to Webflow actions including CMS item creation or updates.

This approach works for teams that need automated data sync but lack development resources. However, according to Gift Up's official documentation, Webflow's API does not support automatic gift card redemption in its native checkout, so full e-commerce integration is not possible through this method.

Setup requires connecting both accounts and mapping data fields between platforms. Zapier monitors Gift Up for trigger events (such as New Order, Gift Card Purchased, or Card Balance Updated) and executes corresponding Webflow actions (such as creating or updating CMS items) automatically.

Available automation workflows that connect Gift Up events to Webflow include:

• New Gift Card → Create CMS Item to add recent gift card purchases
• Gift Card Redeemed → Update CMS Item to decrement available inventory counters when cards get redeemed
• New Order → Create CMS Item to log purchase details to an orders collection for internal tracking
• Card Balance Updated → Update CMS Item to sync remaining balances to customer account pages

Webflow forms must have at least one submission before Zapier can access their fields during setup. Create a test submission in Webflow before configuring Zaps that depend on form data.

What you can build

Integrating Gift Up with Webflow enables businesses to add flexible gift card functionality through third-party automation platforms like Zapier, while maintaining full control over site design and user experience.

However, Gift Up does not have native integration with Webflow due to Webflow's API limitations. According to Gift Up's official documentation, Webflow's API does not support a fully automated integration or direct syncing of gift cards into its native cart.

• Service-based gift card sales: Yoga studios, salons, and consulting firms sell gift cards for specific services like "3-Class Package" or "90-Minute Consultation" that recipients redeem by booking appointments, maintaining revenue flow during slow periods
• Multi-location retail coordination: Restaurant chains or boutique stores with multiple locations sell gift cards through a Webflow site using Gift Up's drop-in checkout widget and validate redemptions in-store using Gift Up's mobile app, unifying the customer experience across digital and physical touchpoints
• Event and experience packages: Event venues and tour operators sell gift cards for specific experiences like "Wine Tasting for Two" or "Sunset Kayak Tour" through Gift Up's platform, where purchasers customize delivery dates and recipients redeem the gift cards through Gift Up's checkout interface rather than directly through Webflow booking forms
• Membership and subscription gifting: Gyms, coworking spaces, and subscription box companies allow customers to gift memberships and subscriptions by purchasing gift cards that recipients can apply toward sign-ups or service access, reducing customer acquisition costs by using existing customer networks for referrals