MakePay Framer Component

Framer Code Component for MakePay hosted checkout links, backed by a server-side relay.

Features

• Drop-in MakePayButton React/Framer Code Component.
• Framer property controls for relay URL, product ID, label, colors, and radius.
• Server-side relay keeps MakePay credentials and prices off the page.
• MakePay webhook verification.

Component Usage

Copy components/MakePayButton.tsx into a Framer Code file, then configure:

• Relay URL
• Product ID
• Button label

The component posts only the selected product ID and current page URL to the relay. The relay creates a MakePay hosted checkout and returns the redirect URL.

Relay

npm start

MAKEPAY_KEY_ID=...
MAKEPAY_KEY_SECRET=...
MAKEPAY_WEBHOOK_SECRET=...
MAKEPAY_PRODUCTS_JSON='{"launch_offer":{"title":"Launch Offer","amount":"29.00","currency":"USD"}}'

Routes:

• POST /checkout
• POST /makepay/webhooks

Framer Direction

This repository follows Framer's Code Component model and can later be wrapped in a plugin that inserts the component into a project.

• Framer Components docs
• Framer plugin components docs

Development

npm test
npm run validate