Skip to main content
This integration is currently in preview and subject to change.
Use this guide to execute a transaction with Apple Pay after you have a connected customer.

​
Prerequisites

  • A connected customer (via client.getConnection() or client.connect()).
  • A UI surface where you can render the Apple Pay frame.

​
Display payment methods

Use the SDK or API to fetch and display the payment methods that are available for the customer right now.
During the preview, only Apple Pay is available (Safari desktop and iOS only).
// After connecting, list available payment methods
const paymentMethodsResult = await client.getPaymentMethods();

if (!paymentMethodsResult.ok) {
  // Handle error
}

console.log(paymentMethodsResult.value);

​
Get quotes

Quotes provide real-time prices and fees for transactions. Present detailed quotes in your UI using data from the SDK or API. Only executable quotes can be used for transactions. In some cases, quotes require a challenge before you can execute a transaction. See handling challenges for details. 
const quoteResult = await client.getQuote({
  source: "USD", // The fiat currency for payment
  destination: "ETH", // The crypto the customer will receive
  sourceAmount: "100.00", // The amount to purchase
  walletAddress: "0x1234...", // The destination wallet address
  paymentMethod: "apple_pay", // The payment method type
});

if (!quoteResult.ok) {
  // Handle error
}

console.log(quoteResult.value);

​
Execute the transaction

To execute a transaction, set up the payment flow based on the quote. Different payment methods have different requirements—you can configure each as needed to control your experience. For the frame URL, size, permissions, and events, see the Apple Pay frame reference.
In some cases, transactions require a challenge. See handling challenges for details.
Apple Pay
import type { ApplePayEvent } from "@moonpay/platform";

// Render the Apple Pay frame into your UI and handle callbacks
const applePayResult = await client.setupApplePay({
  quote: quoteResult.value.signature, // The quote signature from getQuote

  container: document.querySelector("#applePayContainer"), // DOM element to render the button

  onEvent: (event: ApplePayEvent) => {
    switch (event.kind) {
      case "ready":
        // The frame is ready. Use this event to reveal the button if needed.
        break;

      case "complete":
        // The transaction is executing. Track the final status via polling and/or webhooks.
        console.log(event.payload.transaction);
        // { id: "txn_01", status: "pending" }
        break;

      case "quoteExpired":
        // Fetch a new quote, then pass its signature into the frame
        // const newQuote = await client.getQuote({...});
        // event.payload.setQuote(newQuote.value.signature);
        break;

      case "error":
        // Depending on the error, you can have the customer pick a different payment method or retry.
        console.error(event.payload.message);
        break;

      case "unsupported":
        // Apple Pay isn't supported in the current environment.
        break;
    }
  },
});

if (!applePayResult.ok) {
  // Handle error setting up Apple Pay
}

// You can update the quote or dispose the frame later
// applePayResult.value.setQuote(newQuoteSignature);
// applePayResult.value.dispose();

​
Transaction statuses

Transactions have the following statuses:
  • Pending: The transaction has been initiated and the payment accepted. The assets are being transferred.
  • Complete: The transaction is finalized. The payment is complete and the assets have been delivered to their destination.
  • Failed: The transaction has failed. The payment was not executed and funds were not transferred.