How to add Apple Pay and Google Pay

// Google Pay — optionally override the display name (the merchant ID
// always comes from the backend configuration)
const googlePayReady = await payrails.isGooglePayAvailable("Your Store");

// Apple Pay — Safari / Apple devices only
const applePayReady = await payrails.isApplePayAvailable();

const googlePayButton = payrails.googlePayButton({ ... });
if (await googlePayButton.isAvailable) {
  googlePayButton.mount('#google-pay-button');
}

<div id="google-pay-button"></div>

const googlePayButton = payrails.googlePayButton({
  merchantName: "Your Store",
  styles: {
    buttonColor: "black", // default 'black'
    buttonType: "long", // default 'pay'
    buttonSizeMode: "fill", // default 'fill'
    locale: "en",
  },
});

// Reveal the container only when Google Pay is usable in this browser/device.
googlePayButton.isAvailable.then((available) => {
  if (available) {
    document.getElementById("google-pay-button").hidden = false;
    googlePayButton.mount("#google-pay-button");
  }
});

// Payment outcomes ride on the instance emitter; filter by paymentMethodCode.
payrails.on("success", (e) => {
  if (e.paymentMethodCode === "googlePay") {
    // payment authorized
  }
});
payrails.on("failed", (e) => {
  if (e.paymentMethodCode === "googlePay")
    console.error("Google Pay failed", e);
});

<div id="apple-pay-button"></div>

const applePayButton = payrails.applePayButton({
  styles: {
    type: "buy", // default 'buy' — also 'plain', 'checkout', 'donate', …
    style: "black", // default 'black' — also 'white', 'whiteOutline', 'automatic'
    locale: "en",
  },
  translations: {
    labels: {
      paymentScreenLabel: "Your Store", // label shown in the Apple Pay sheet
    },
  },
});

// Reveal the container only when Apple Pay is usable in this browser/device.
applePayButton.isAvailable.then((available) => {
  if (available) {
    document.getElementById("apple-pay-button").hidden = false;
    applePayButton.mount("#apple-pay-button");
  }
});

payrails.on("success", (e) => {
  if (e.paymentMethodCode === "applePay") {
    // payment authorized
  }
});
payrails.on("failed", (e) => {
  if (e.paymentMethodCode !== "applePay") return;
  if (e.data?.code === "USER_CANCELLED") {
    // shopper closed the Apple Pay sheet — not an error
    return;
  }
  console.error("Apple Pay failed", e);
});

payrails.on("deliveryAddressChanged", (event) => {
  const address = event.deliveryAddress;
  // Before authorization Apple only exposes redacted fields:
  // city, postalCode, state, and country.code.
  if (!isServiceableRegion(address?.postalCode, address?.country?.code)) {
    event.preventDefault();
  }
});