amazon-payments

Webflow Ecommerce supports only Stripe and PayPal as payment providers, so there is no native gateway for Amazon Pay. No Amazon Pay app exists in the Webflow Marketplace either. Custom code on Webflow pages runs client-side only, while every Amazon Pay API request must be signed with a private key on a server. That combination rules out a purely Webflow-hosted integration.

Connecting Amazon Pay through a hosted checkout platform or a custom backend closes that gap. Buyers pay with the credentials already stored in their Amazon accounts instead of typing card numbers into an unfamiliar form. Webflow keeps handling design and content, along with hosting, while Amazon Pay handles the payment itself.

This integration fits DTC brands selling physical goods from Webflow marketing sites and agencies delivering checkout without migrating clients off Webflow. Subscription merchants can bill on recurring charge permissions. Nonprofits collecting donations and design-first boutiques that want full visual control over product pages also benefit.

How to integrate Amazon Pay with Webflow

What is Amazon Pay? Amazon Pay is an online payment service that lets buyers check out on third-party websites using the shipping and payment information stored in their Amazon accounts. It supports one-time payments and refunds via its Checkout v2 API, along with permissions for recurring charges for subscriptions. Merchants in 18 countries, including the US, UK, Japan, and much of the EU, can register for a merchant account.

Teams pair Amazon Pay with Webflow when they want a trusted checkout on a site that stays in Webflow for design and content. Because Webflow runs no server-side code and its native cart is closed to custom payment processing, every working setup routes payment logic through an external layer. The right layer depends on your team’s technical resources and where your business is registered.

Amazon Pay and Webflow setups differ by where the checkout logic runs:

• Hosted checkout platforms like Foxy and Ecwid process Amazon Pay payments without a custom backend.
• Code Embed elements place the Amazon Pay button on Webflow pages, backed by a small server-side signing service.
• Webflow Data API and Amazon Pay APIs give you full control over checkout, refunds, and CMS sync, but require server-side development.

Most implementations use one method, though API builds often combine the embedded button with IPN-driven Webflow CMS sync.

Connect a hosted checkout platform

Hosted checkout platforms are the only path that needs no backend development. The platform signs Amazon Pay API requests on its own servers, hosts the checkout page, and handles PCI scope. Two platforms have verified Amazon Pay support and documented Webflow embedding paths. Foxy covers merchants in the US and Canada, while Ecwid serves merchants internationally, reaching regions where Amazon Pay operates beyond North America. Both need a paid Webflow plan for custom code, and both need an approved Amazon Pay merchant account.

Set up Amazon Pay through Foxy

Foxy sells physical and digital products on Webflow, with subscription support, through links, buttons, HTML embeds, Webflow’s form builder, or the Webflow CMS. Its Amazon Pay support covers immediate payments, verifications, refunds, and 3-D Secure, and is available to merchants in the United States and Canada. Webflow’s own Amazon Pay integration page names Foxy as a recommended third-party route, alongside building a custom checkout flow.

To set up Foxy with Amazon Pay:

1. Create a Foxy account and enable Amazon Pay as a payment method in the Foxy admin.
2. Add the Foxy loader script to Site Settings > Custom Code > Footer code, which is where head and body code lives.
3. Link your product buttons to Foxy’s cart, or drive product pages from a Collection List so CMS fields populate price and product data.
4. Publish the site and run a test transaction.

Foxy can also decrement Webflow CMS inventory when a transaction completes, which keeps stock counts visible on your site without manual updates.

Embed the Ecwid Buy Button

Ecwid offers Amazon Pay as a payment gateway and serves merchants internationally, so it reaches markets beyond Foxy’s US and Canada coverage. Ecwid says setup takes a few minutes and needs no technical knowledge. The Buy Button is an embeddable widget for any external website, which makes it a fit for Webflow pages.

To embed the Ecwid Buy Button in Webflow:

1. Create an Ecwid store and enable Amazon Pay in the store’s payment settings.
2. Generate the Buy Button embed code for a product.
3. Paste the code into a Code Embed element on your Webflow page and publish.

Ecwid is the practical choice for merchants outside the US and Canada, since Foxy’s Amazon Pay support covers only those two countries.

Embed the Amazon Pay button with Code Embed

You can render the official Amazon Pay button directly on a Webflow page using a Code Embed element, which gives you Amazon Pay’s own checkout flow without a third-party cart. This method needs a small backend, because the signed payload that the button requires must be generated server-side with a private key, and Code Embed elements block server-side languages like PHP, Python, and Ruby. Run the generateButtonSignature() helper from the Amazon Pay integration guide in an AWS Lambda function or Cloudflare Worker. Code Embed requires a Core, Growth, Agency, or Freelancer Workspace plan, or an active paid Site plan.

To embed the button:

1. Register an Amazon Pay merchant account and complete the integration setup prerequisites, including your Public Key ID and a Sandbox test buyer account.
2. Add your published domain to JavaScript Origins in Seller Central. Verification can take up to 48 hours, and Webflow’s preview mode renders on {shortName}.canvas.webflow.com, so account for that domain during development.
3. On your server, build the Create Checkout Session payload with webCheckoutDetails, storeId, checkoutReviewReturnUrl, scopes, and chargePermissionType, then sign it with generateButtonSignature() using the AMZN-PAY-RSASSA-PSS-V2 algorithm.
4. Add a Code Embed element to your page with the button container, the region-specific script, and the render call.
5. Publish the site and test with your Sandbox buyer account.

The embed for a US merchant looks like this:

<div id="AmazonPayButton"></div>
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
    const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
        merchantId: 'merchant_id',
        publicKeyId: 'SANDBOX-xxxxxxxxxx',
        ledgerCurrency: 'USD',
        checkoutLanguage: 'en_US',
        productType: 'PayAndShip',
        placement: 'Cart',
        buttonColor: 'Gold',
        estimatedOrderAmount: { "amount": "109.99", "currencyCode": "USD"},
        createCheckoutSessionConfig: {
            payloadJSON: 'payload',
            signature: 'xxxx',
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
        }
    });
</script>

EU and UK sites load https://static-eu.payments-amazon.com/checkout.js instead, and Japanese sites load https://static-fe.payments-amazon.com/checkout.js. The payload contains no timestamp, so the signature stays valid as long as the payload does not change. Set productType to 'PayOnly' for digital goods or 'PayAndShip' for physical products, since this value cannot be set through Checkout Session API operations. Each Code Embed element holds up to 50,000 characters, far more than this snippet needs. The button signature only authorizes the button itself, so completing the payment still requires the API calls covered in the next section.

Build with the Webflow and Amazon Pay APIs

A full API build gives you complete control over the checkout lifecycle, refunds, subscriptions, and syncing payment state back into Webflow. It requires server-side development, because every Amazon Pay request must carry an AMZN-PAY-RSASSA-PSS-V2 signature generated with your private key. This is the path for engineering teams using Webflow as the design and content layer of a custom commerce stack.

In a custom build, middleware splits the work across systems. Payment operations such as checkout sessions, charges, charge permissions, and refunds run through the Amazon Pay Checkout v2 API at https://pay-api.amazon.com/:environment/:version for the US, with pay-api.amazon.eu and pay-api.amazon.jp regional variants. To write Webflow records, the Webflow Data API handles CMS collection items at https://api.webflow.com/v2 with OAuth 2.0 bearer tokens. State changes reach your middleware through Amazon Pay Instant Payment Notifications, covering charge, refund, and chargeback updates.

Webflow’s ecomm_new_order and ecomm_order_changed webhook events only fire for orders placed through the native Stripe or PayPal checkout. Amazon Pay transactions bypass Webflow Ecommerce entirely, so your sync architecture must run from Amazon Pay IPNs through your middleware into the Webflow Data API.

Process a one-time checkout

The Checkout v2 flow moves a buyer from your Webflow page to an Amazon-hosted payment page and back. Because card data stays on Amazon’s hosted pages, your infrastructure carries reduced PCI scope. Sessions expire after 24 hours if not completed, and Amazon Pay deletes session data permanently after 30 days.

To process a payment:

1. Render the button with payloadJSON in createCheckoutSessionConfig, which removes the need to call Create Checkout Session separately.
2. After the buyer selects payment and address on Amazon’s hosted page, call PATCH https://pay-api.amazon.com/:environment/:version/checkoutSessions/:checkoutSessionId to set final order details.
3. Redirect the buyer to the amazonPayRedirectUrl returned by the Checkout Session API so Amazon processes the payment.
4. Call POST https://pay-api.amazon.com/:environment/:version/checkoutSessions/:checkoutSessionId/complete with an x-amz-pay-idempotency-key header. The response returns the chargePermissionId and chargeId.
5. If you authorized without capturing, call POST https://pay-api.amazon.com/:environment/:version/charges/:chargeId/capture while the Charge is in the Authorized state.

For subscriptions, set chargePermissionType: 'Recurring' in the session payload, then call Create Charge each billing cycle against the returned charge permission.

Sync payment status to the Webflow CMS

Amazon Pay delivers IPNs through AWS SNS as HTTPS POST requests, and the Webflow CMS is written through its own REST API, so a middleware layer must sit between them. A Lambda function or Cloudflare Worker receives the notification, confirms the transaction state, and updates a CMS item that powers a customer-facing order status page.

To build the sync between Amazon Pay IPNs and the Webflow CMS:

1. Configure your Merchant URL in Seller Central to receive IPNs. Production requires HTTPS with a valid certificate.
2. In your middleware, parse the Message JSON for ObjectType (CHARGE_PERMISSION, CHARGE, REFUND, or CHARGEBACK) and ObjectId, then call the matching GET endpoint, such as GET https://pay-api.amazon.com/:environment/:version/charges/:chargeId, to confirm the current state. The CV2 notification carries only the object type and ID, not the object’s current state, so this GET call is required to read the live state after you validate the SNS message signature.
3. Update the matching CMS item with PATCH https://api.webflow.com/v2/collections/{collection_id}/items/live, which updates up to 100 items per request, using a token with the CMS:write scope.

For chargebacks, the IPN carries only the object ID, so your middleware must call the Dispute API separately to retrieve fields like filingReason and statusDetails.

What you can build with the Amazon Pay Webflow integration

Integrating Amazon Pay with Webflow lets you offer checkout backed by stored Amazon credentials without rebuilding your site on a dedicated ecommerce platform.

• DTC storefronts with express checkout: A fashion or home goods site built in Webflow, with Foxy handling the cart and Amazon Pay at checkout. Amazon Pay case studies report meaningful lifts, such as Moda in Pelle’s 61% Amazon Pay conversion versus 49% for other providers, though these figures are self-reported.
• Subscription and membership billing: A SaaS or subscription-box site where a recurring charge permission bills each cycle through Create Charge. ResumeCoach reports Amazon Pay at 50% of US cart share for its subscription product.
• Nonprofit donation pages: A Webflow donation page where donors click “Donate with Amazon,” confirm the amount on Amazon’s hosted flow, and return to the charity site. Recurring giving is supported through the custom API path.
• Live order status pages: A CMS-driven account or order page where IPN middleware updates payment and refund status in a Webflow Collection, so customers see current state without emailing support.

If you need more control over subscription lifecycles, refund handling, or dispute workflows, the API path covers those cases. If a natively supported provider would serve you better, see how to set up Stripe Checkout in Webflow.