# Hosted Checkout ## Checkout in 3 steps This web 3 hosted checkout allows customers to checkout with crypto. Simply add a checkout button to your online store and when a customer adds his/her product to cart, they will be offered the option to proceed to checkout to complete their purchase. There is also an option to upload a company logo to make it more congruent with your brand for increased conversion rates. ### How it works(example): * ***Checkout button*** - Bob adds a product to cart by clicking on the merchants checkout button on their online store * ***Shopping cart*** - after adding a product to cart, the shopping cart opens & Bob proceeds to checkout * ***Step 1*** - Bob arrives at the first page on the hosted checkout and can view what product/s he has in cart. He now creates a universal shopping account by logging in with his Google account. This is done through [Auth0](https://auth0.com/) and [Torus Custom Auth](https://customauth.io/). Otherwise he connects his web 3 wallet to log in. * ***Step 2*** - Bob enters in his first, last name, email address, wallet address (if enabled) and shipping details since its a physical product and clicks "Continue to payment" * ***Step 3*** - Bob views his order summary, decides to pay with his XGT rewards('Pay with rewards") approves the transaction and is directed to the purchase completed page once it's successfully processed * ***Purchase complete*** - Bob has completed his purchase, can contact the merchant, proceed to manage his orders, view cashback issued(if unlocked and paid with anything besides XGT), view his blockchain transaction and more {% tabs %} {% tab title="STEP 1 - SIGN IN" %} ## Sign in with Web 3, Email or a Social Media Account We've kept it as simple as possible for customers to instantly create a universal shopping wallet/account that allows them to checkout from any online store that is using Xions Payment Gateway. Once a customer logs in with one of the options mentioned above, it immediately creates a crypto wallet([Torus Custom Auth](https://tor.us/)) to checkout with. It's the easiest way to checkout in a web 3 environment without even realising you using a crypto wallet. Otherwise, just connect your web 3 wallet to sign in(e.g. MetaMask). ### Features: * Login with a web 3 wallet or use email, Google, Facebook, Reddit or Discord to login to your existing or new Torus wallet(Custom Auth) * View/hide your order summary(any products or subscriptions added to cart) * Upload a company logo in [Xion Global](https://xion.app) and it'll be displayed at the top of every checkout(example is the logo below "XION") ![](/files/-Mj0DIlNHzaiBJkO7TKg) {% endtab %} {% tab title="STEP 2 - DETAILS" %} ## Enter in your personal, shipping and billing details As a merchant you need to collect certain details from customers to fulfil their orders, whether physical or digital products and services. Depending on what product a customer is checking out with, will either show or hide certain details. For example, a digital product won't show any shipping address fields but a physical product would as a merchant would need the details to ship the order. ### Features: * Copy connected wallet address (used for depositing xDAI and/or XGT) * Personal details (first name, last name, cell number with validation) * Automatic address completion and validation to decrease failed charges & incorrect shipping addresses * Automatic details storage and population to streamline repeat purchases * T\&C's and Privacy Policy tick box(removed once approved) * Logout of your current shopping account to complete a purchase with a different account/wallet * Dynamic wallet address collection (Polygon, Ethereum, BNB Chain, Gnosis Chain etc) ![](/files/-Mj0DzEmamyJiOuG4_YQ) {% endtab %} {% tab title="STEP 3 - PAYMENT" %} ## Pay with crypto This checkout process is so fast that when your customers decide to pay, it takes just a few seconds or less to complete the purchase. Why... because of the fast and inexpensive xDAI chain(layer 2). Now whether it's a purchase with xDAI, XGT, BTC, ETH, LTC etc, there will be an approve or cancel pop up to process or decline the payment. Shortly after they approve, there will be a verifying payment spinner until the payment is successful or failed. Once payment is completed, the customer will be taken to the purchase completed page with an order summary and the option to manage their order. Any orders created through the hosted checkout will be displayed in your merchant "[Management](https://xion.app/management)" dashboard and customers can also manage their orders in the "[My Orders](https://xion.app/my-orders)" page. ### Features: * Crypto payments * Order summary(price per product/subscription, shipping cost, transaction fee for card purchases, cashback total) * XGT Rewards balance in USD and native token amounts * Dustbin icon to remove products from cart * Transaction authorisation(approve or decline crypto and XGT rewards payments using [Torus Custom Auth](https://customauth.io/)) or prompting web 3 wallet transactions(MetaMask) * XGT & xDAI balance checker to enable or disable crypto or XGT rewards payment options(example, disabled "Pay with crypto" button because user doesn't have enough xDAI to pay for the product) * Cashback rewards lock and unlock feature(based on available cashback rewards) * ### Crypto Payment Options: * BTC, LTC, DASH, ETH, BCH, XDAI, XGT, USDT ![](/files/-Mj0FOobVAyNG6W1W2Y2) {% endtab %} {% tab title="PURCHASE COMPLETE" %} ## Purchase Completed Customer has now completed their purchase and is provided with a few different options to manage their order. They can view their order summary, contact the merchant via email, view their transaction or view the amount of cashback rewards issued(if unlocked). ### Features: * Order summary(order code, total price paid, product name, quantity, currency, transaction fee) * Cashback rewards issued(if unlocked) * Merchant contact details to easily enquire about recent orders(email address) * Manage your orders button to redirect customers to their product/subscription management dashboard in [Xion Global](https://xion.app/myorders) * View your transaction button to redirect customers to [blockscout](https://blockscout.com/xdai/mainnet/), where they can view their blockchain transaction(if available) * XGT Rewards balance for customers to view their remaining XGT balance if they example, purchased their product with XGT ![Purchase Complete](/files/-Mf8DCa_47yKmfd8WuQw) {% endtab %} {% endtabs %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://xionwiki.gitbook.io/xion-global/hosted-checkout.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.