New Pay Embed Modes and In-App Wallets in Telegram

Greg

The Pay Embed now directly supports three separate use cases or "modes".

"Fund wallets" allows any connect wallet to buy tokens with their wallet's existing funds or credit card.

import { PayEmbed } from "thirdweb/react";
 
<PayEmbed
  client={client}
  payOptions={{
    mode: "fund_wallet",
  }}
/>;

"Direct payment" allows any wallet to accept payments via crypto or credit card.

import { PayEmbed } from "thirdweb/react";
 
<PayEmbed
  client={client}
  payOptions={{
    mode: "direct_payment",
    paymentInfo: {
      sellerAddress: "0x...",
      chain: base,
      amount: "0.1",
    },
    metadata: {
      name: "Black Hoodie (Size L)",
      image: "https://example.com/image.png",
    },
  }}
/>;

"Transaction" lets users pay for a specified transaction using credit card or crypto on any chain.

import { PayEmbed } from "thirdweb/react";
 
<PayEmbed
  client={client}
  payOptions={{
    mode: "transaction",
    transaction: claimTo({
      contract,
      tokenId: 0n,
      to: toAddress,
    }),
    metadata: nft?.metadata,
  }}
/>;

You can also configure the TransactionButton component to show metadata to personalize the transaction payment flow.

import { TransactionButton } from "thirdweb/react";
 
<TransactionButton
  transaction={() => {
    return transfer({
      contract,
      amount: 10n,
      to: toAddress,
    });
  }}
  payModal={{
    metadata: {
      name: "Buy me a coffee",
      image: "https://example.com/image.png",
    },
  }}
/>;

Our default social login uses a popup to prompt the user to complete OAuth sign-in. This can cause issues on certain browsers or embedded experiences such as telegram. For these cases, we've added the ability to use a redirect rather than popup window when authenticating users.

import { inAppWallet } from "thirdweb/wallets";
 
const wallet = inAppWallet({
  auth: {
    mode: "redirect",
  },
});

• NFTInput and NFTMetadata types are now available

Users can now change their wallet in the ConnectEmbed "Sign In" auth step