New Pay Embed Modes and In-App Wallets in Telegram
thirdweb SDK v5.40.0
![New Pay Embed Modes and In-App Wallets in Telegram](/content/images/size/w2000/2024/07/connect-template--2-.png)
PayEmbed Modes
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",
},
}}
/>
Redirect Mode
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",
},
});
Other Improvements
NFTInput
andNFTMetadata
types are now available
Users can now change their wallet in the ConnectEmbed
"Sign In" auth step