Skip to content

Commit

Permalink
Sequence pay (#445)
Browse files Browse the repository at this point in the history
* initial pay commit

* nav

* final v1 of sequence pay

* updated swap chainlist
  • Loading branch information
JamesLawton authored Nov 22, 2024
1 parent 6e39e61 commit 06d9107
Show file tree
Hide file tree
Showing 10 changed files with 447 additions and 112 deletions.
148 changes: 148 additions & 0 deletions docs/components/CardSections/MonetizationOverview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import clsx from 'clsx'
import * as ICONS from '../Landing/icons'

export const MonetizationOverview = () => (
<section className="flex flex-col gap-5 border-t border-black-10">
<div className="flex md:flex-row flex-col gap-4">
<SolutionsGroup
theme="green"
heading="Sequence Pay"
icon='CartIcon'
items={[
{
title: 'Overview',
body: 'Sequence Pay is an integrated payment solution designed to simplify and enhance the transaction experience within Web3 games. It combines multiple payment functionalities into a cohesive SDK available for Unity, Unreal, and React. ',
link: '/solutions/payments/overview',
},
{
title: 'Checkout',
body: 'Purchase NFTs using any cryptocurrency, transfer funds between wallets, or pay with credit/debit cards.',
link: '/solutions/wallets/sequence-kit/checkout',
},
{
title: 'Smart Swaps',
body: 'Automatically swap between currencies on the same chain with batched transactions to optimize UX and reduce gas costs.',
link: '/solutions/wallets/sequence-kit/smart-swaps',
},
{
title: 'Fiat On-Ramp',
body: 'Enable users to purchase cryptocurrencies with credit or debit cards using region-optimized providers like Transak.',
link: '/solutions/wallets/sequence-kit/on-ramp',
},
// {
// icon: 'CartIcon',
// title: 'Primary Sales',
// body: 'Introducing Jelly Forest: a blockchain-enabled 2D runner game with social sign in, an in-game store, a backend transaction manager and more - all built in Unity using the Sequence platform.',
// link: '/guides/unity-guide',
// },
]}
/>
<SolutionsGroup
theme="purple"
heading="White-Label Marketplace"
icon='MarketplaceIcon'
items={[
{
title: 'Enforce Royalties',
body: 'Enforcing royalties with ERC-2981 to choosing the best trading mechanism for your community, setting fees, and more',
link: '/solutions/marketplaces/white-label-marketplace/guide/',
},
{
title: 'Aggregrate Listings',
body: 'Aggregate listings from major platforms like OpenSea or LooksRare, providing you with the benefit of existing liquidity without relinquishing control of the gaming experience.',
link: '/solutions/marketplaces/white-label-marketplace/guide/',
},
{
title: 'Leverage your Custom Token',
body: 'List your collectibles using your custom token to increase utility and engagement.',
link: '/solutions/marketplaces/white-label-marketplace/guide/',
},
{
title: 'Video Walkthrough',
body: 'Watch as a Sequence team member curates both Skyweaver and Azuki into a custom marketplace by customizing themes and features in the Sequence Builder',
link: '/solutions/marketplaces/white-label-marketplace/video-walkthrough/',
},
]}
/>
</div>
<div className="flex md:flex-row flex-col gap-4">
<div className="md:w-1/2">
<SolutionsGroup
theme="black"
heading="Custom Marketplace"
icon='MinterIcon'
items={[
{
title: 'Marketplace APIs',
body: 'Leverage our marketplace APIs to build your own custom marketplace with the Sequence Market protocol.',
link: 'https://docs.sequence.xyz/api/marketplace/endpoints',
},
{
title: 'Sequence Market Protocol',
body: 'Fully audited, open source, and available on all chains Sequence supports at 0xB537a160472183f2150d42EB1c3DD6684A55f74c. The Sequence Market Protocol is a fully scalable and efficient marketplace protocol utilized by organizations such as Ubisoft.',
link: 'https://github.com/0xsequence/marketplace-contracts/tree/master',
},
{
title: 'Starter Marketplace',
body: 'Instead of starting from scratch, use our starter marketplace as a template to build your own custom marketplace.',
link: '/solutions/marketplaces/orderbook/starter',
},
]}
/>
</div>
</div>
</section>
)

const SolutionsGroup = ({
heading,
items,
theme,
icon,
}: {
heading: string
icon: keyof typeof ICONS
items: {
title: string
body: string
link: string
}[]
theme: 'purple' | 'green' | 'yellow' | 'black'
}) => {
return (
<div className="flex-1 h-fit shrink-0 rounded-xl dark:bg-white-10 bg-white overflow-hidden">
<div className="flex flex-col gap-3 p-4 relative">
<div
className={clsx('absolute inset-0 opacity-20 z-0 pointer-events-none', {
'dark:bg-gradient-to-b from-[#3400A0] to-transparent': theme === 'purple',
'dark:bg-gradient-to-b from-[#0A3F16] to-transparent': theme === 'green',
'dark:bg-gradient-to-b from-[#897031] to-transparent': theme === 'yellow',
'dark:bg-gradient-to-b from-[#000000] to-transparent': theme === 'black',
})}
/>
<div className="flex items-center gap-2 px-4">
{ICONS[icon]({ className: "mt-1" })}

<p className="font-bold text-themed-primary z-10">{heading}</p>
</div>

{items.map((item, index) => {
return (
<a
key={index}
href={item.link}
className="hover-fade p-4 rounded-md z-10 dark:bg-white-10 bg-black-7"
>
<div className="flex gap-2">
<p className="flex items-start gap-2 text-xl leading-7 font-bold text-themed-primary">
{item.title}
</p>
</div>
<p className="text-themed-secondary text-sm font-medium">{item.body}</p>
</a>
)
})}
</div>
</div>
)
}
12 changes: 3 additions & 9 deletions docs/components/Landing/SolutionsSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,9 @@ export const SolutionsSection = () => (
},
{
icon: 'CartIcon',
title: 'NFT Checkout',
body: 'Offer easy purchases with credit card, crypto, IAP support.',
link: '/solutions/wallets/sequence-kit/checkout',
},
{
icon: 'NodeGatewayIcon',
title: 'Fiat On-ramps',
body: 'Allow players to convert from fiat to crypto globally.',
link: '/solutions/payments/onramps/fiat-on-ramps',
title: 'Sequence Pay',
body: 'An integrated payment solution designed to simplify and enhance the transaction experience within Web3 games. It combines multiple payment functionalities into a cohesive SDK available for Unity, Unreal, and React.',
link: '/solutions/payments/overview',
},
]}
/>
Expand Down
23 changes: 9 additions & 14 deletions docs/pages/solutions/monetization-overview.mdx
Original file line number Diff line number Diff line change
@@ -1,28 +1,23 @@
---
title: Maximizing Revenue with Sequence Marketplaces and Sequence Pay
description: Sequence offers various options for monetizing your blockchain-enabled game, such as white-label marketplaces and Sequence Pay.
layout: docs
showOutline: false
content:
width: 100%
---

# Monetization Overview
import { MonetizationOverview } from '../../components/CardSections/MonetizationOverview'
import * as ICONS from '../../components/Landing/icons'

Sequence provides a suite of options to more effectively monetize your blockchain-enabled game like our various **Marketplace** options and **Sequence Pay** - the ultimate toolkit for onboarding users to your game from fiat or crypto.
# Monetize with Sequence

## Sequence Marketplaces
__White-Label Marketplace__:
Start your browser-based marketplace in minutes, even if you have no coding experience. Customize the marketplace with your branding - choose your fonts, colors, and logos. Our white-label marketplace is perfect for those looking to save time on development, focus on a web-based user experience, and begin selling assets.
Earn more revenue, create sustainable economic models, allow users to pay with nearly any currency from crypto to fiat, and more with Sequence's suite of monetization tools.

__Marketplace APIs__:
Take full control and customize your marketplace with our Marketplace APIs. Build your own UI while we handle the complexity of blockchain and backend orchestration. Use our APIs in game engines like Unity or Unreal to create an in-game marketplace or store. Alternatively, integrate them into a browser-based experience - the choice is yours.
<MonetizationOverview/>

Combine these options as you see fit! Start with a white-label marketplace to sell your initial game assets while developing your game. Then, use our marketplace APIs to showcase and offer these assets in your in-game store. Provide a seamless user experience by keeping everything within the game environment.

### Getting Started
[Get started with a readable guide or video walkthrough with a white-label marketplace](/solutions/marketplaces/white-label-marketplace/overview) for more information to walk you through the process.

Additionally, our quickstart page for the [Marketplace APIs](/solutions/marketplaces/orderbook/starter) has a variety of templates, demos, and common integration patterns needed to get you started. We also provide a step by step guide of leveraging the APIs for [building a custom marketplace](/guides/custom-marketplace).

## Sequence Pay
Sequence Pay enables you to easily onboard your users from fiat or crypto to your game or marketplace via [Fiat On-ramps](/solutions/payments/onramps/fiat-on-ramps) as well as direct purchase of NFTs through [NFT Checkout](/solutions/wallets/sequence-kit/checkout).



Expand Down
27 changes: 0 additions & 27 deletions docs/pages/solutions/payments/onramps/fiat-on-ramps.mdx

This file was deleted.

19 changes: 19 additions & 0 deletions docs/pages/solutions/payments/overview.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Maximizing Revenue with Sequence Marketplaces and Sequence Pay
description: Sequence offers various options for monetizing your blockchain-enabled game, such as white-label marketplaces and Sequence Pay.
---

# Overview

Sequence provides a suite of options to more effectively monetize your blockchain-enabled game like our various **Marketplace** options and **Sequence Pay** - the ultimate toolkit for payments in crypto.

## Sequence Pay
Sequence Pay addresses the complexity of handling multi-currency payments, swaps, on-ramping, and transactions in blockchain games, marketplaces, launchpads, and more. The solution introduces streamlined methods and user interface flows in Sequence Kit for web, integrations directly with game engines via our Unity and Unreal SDKs, as well as APIs for Sequence Smart Swaps.

- [Smart Swap](/solutions/wallets/sequence-kit/smart-swaps) with Sequence leveraging currencies in player wallets to another currency on the same chain. Developers can define the target currency and Sequence will handle everything, including the UI and flow through Sequence Kit as well as a suite of [APIs](/api/infrastructure/endpoints). The power comes in conjunction with leveraging Sequence Wallets where we can automatically detect the correct currency to swap to and automatically batch the transactions together to simplify the UXs. Say goodbye to separate `approve` and `transfer` transactions!
- Purchase an ERC721 or ERC1155 token via [Sequence Checkout](/solutions/wallets/sequence-kit/checkout) using a primary or secondary sales contract such as a marketplace with the following payment options:
- Purchase with any cryptocurrency in the wallet.
- Transfer funds from another wallet to a Sequence wallet and purchase.
- Pay using a credit or debit card which will intelligently detect the correct provider for each region, chain and currency.
- Pay with another cryptocurrency in a wallet by doing an automated swap and purchase.
- [On-ramp](/solutions/wallets/sequence-kit/on-ramp) with Sequence to purchase cryptocurrencies with a credit or debit card using a provider such as Transak in [Unity](/sdk/unity/onboard-user-funds), [Unreal](/sdk/unreal/onboard-user-funds) or [Web](/solutions/wallets/sequence-kit/on-ramp).
Loading

0 comments on commit 06d9107

Please sign in to comment.