Skip to main content
The Buy Button frame renders a compact express-checkout payment button. It shows the available payment options — Apple Pay, Google Pay, and card — and opens a confirmation sheet when the customer taps to pay. Behind the UI, it runs the same buy orchestration pipeline as the headless Buy frame: it evaluates transaction requirements, creates the transaction, and completes post-transaction processing. The difference is the experience. The Buy frame is headless and leaves every screen under your control. The Buy Button frame provides a visible payment button and confirmation sheet, so you can offer express checkout without building that UI yourself. The message protocol is identical to the Buy frame, so you handle the same events either way.

​
URL

https://blocks.moonpay.com/platform/v1/buy-button

​
Initialization parameters

PropertyTypeRequiredDescription
clientTokenstring✅The client token returned from the connect flow.
channelIdstring✅A unique identifier for the frame generated on your client. This value is attached to each postMessage payload to help identify messages.

The format of this string is up to you.
signaturestring✅The quote signature from the quote endpoint. Pass signature as returned.
externalTransactionIdstringYour own identifier for the transaction. Stored and associated with the MoonPay transaction for correlation.

​
Events

All events are dispatched using the message pattern described in the frames protocol. The Buy Button frame uses the same event payloads as the Buy frame; only the experience differs.

​
Outbound events

frame->parent These events are sent from this frame to the parent window.

​
handshake

The frame requests that you open a message channel. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "handshake"
}

​
ready

The frame finished loading and the payment button is rendered. Use this to coordinate UI transitions if needed. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "ready"
}

​
complete

The transaction is complete. Use the transaction ID to track final status via polling. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "complete",
  "payload": {
    "transaction": {
      "id": "txn_01",
      "status": "pending"
    }
  }
}

​
challenge

Verification is required before the transaction can proceed. Render the challenge frame at the provided URL. Do not construct the URL yourself — use it as-is. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "challenge",
  "payload": {
    "kind": "frame",
    "url": "https://blocks.moonpay.com/platform/v1/challenge?challengeToken=..."
  }
}

​
error

A terminal error occurred. Remove the frame and surface the message to the developer. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "error",
  "payload": {
    "code": "invalidQuote",
    "message": "Unable to decode the quote signature."
  }
}
CodeDescription
configurationErrorMissing or invalid signature parameter
invalidQuoteUnable to decode the quote signature
genericUnspecified error

​
Inbound events

parent->frame These events are sent from the parent window to this frame.

​
ack

Acknowledge the handshake. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "ack"
}

​
setQuote

Provide a new quote to the frame. Send this when the current quote expires before the customer completes the purchase. Pass signature as returned by the quote endpoint. 
{
  "version": 2,
  "meta": { "channelId": "ch_1" },
  "kind": "setQuote",
  "payload": {
    "quote": {
      "signature": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9..."
    }
  }
}