# Tutorial: Transaction using the Checkout UI In this tutorial, you create transactions in USD between: - A user and the publisher - A user and another user Allow about 15 minutes to complete this tutorial. This tutorial consists of two separate transactions that are created by the api and completed in the Tilia-hosted Checkout UI. While the transaction process is the same in both cases, the differences appear in the structure of the transaction request body. The following diagram shows a successful user-to-publisher transaction that uses the Checkout UI. ![User to publisher transaction in USD using the Checkout UI](/assets/tutorial-user-to-publisher-transaction-flow.4e2bb42930058e570f39446ab4c4c8995e01961d4a66ca3cf28d41b691e090b6.9c1bb791.png) ### API operations in this tutorial | Tutorial interaction | API operations used | Scope | | --- | --- | --- | | [Create user-to-publisher transaction that uses the Checkout UI](#create-user-to-publisher-transaction) | | `write_invoices`, `write_user_tokens` | | [Create user-to-user transaction that uses the Checkout UI](#create-user-to-user-transaction) | | `write_invoices`, `write_user_tokens` | ## To complete this tutorial This tutorial uses the **Explore Tilia transactions** collection from the [shared Postman workspace](https://www.postman.com/tilia-docs-testing/workspace/get-started-using-tilia-services/overview). **To complete this tutorial successfully:** 1. Make sure the software described in [Get started with the tutorials](/tutorials/tutorial_get_started) has been installed on your system and configured. 2. Make sure that you have initialized the **Tilia Client Info** environment variables by running the [User account tutorials](/tutorials/user-accounts). 3. In Postman: 1. Open the **Tilia tutorial workspace** you created in [Get started with the tutorials](/tutorials/tutorial_get_started) for this tutorial. 2. Make sure you have the **Explore Tilia transactions** collection forked to your **Tilia tutorial workspace**. 3. Make sure that you've selected the **Tilia Client Info** environment and confirmed that it has: 1. Your Tilia developer credentials. 2. All of the user-related environment variables with **Current values** defined. 4. In your **Tilia tutorial workspace**, open the list of **Collections**. 5. In the list of **Collections**, expand the **Explore Tilia transactions** collection. 6. If it's been more than an hour since you last got an access token for this collection, get a new one as described in [Tutorial: Transactions overview](/tutorials/transactions#get-an-access-token), and then return to continue here. ## Create user-to-publisher transaction This exercise creates a user-to-publisher invoice in which the user buys some digital goods from the publisher and pays for them in USD. Creating an invoice starts with collecting all the required information, and then sending it to Tilia to create the complete invoice. By sending the invoice details to the API, instead of returning an invoice to the application for subsequent payment, the API returns a URL to the Tilia-hosted Checkout UI with the invoice details. The user completes the purchase and the invoice in the Tilia-hosted Checkout UI. ### Prepare the user-to-publisher invoice The invoice data is collected in the request body object that is sent to . The invoice data used in this example is shown here. Notice that each line item has a `transaction_type` value of `user_to_integrator`. With this value, the recipient is the publisher and so no recipient value is required. ```json { "account_id": "{{payers_account_id}}", "is_escrow": false, "invoice_mechanism": "tilia_hosted", "reference_type": "authorize_purchase_demo", "reference_id": "authorize_demo: {{$timestamp}}", "line_items": [ { "description": "Product 21 description", "product_sku": "Product 21 SKU", "transaction_type": "user_to_integrator", "currency": "USD", "amount": 1100 }, { "description": "Product 22 description", "product_sku": "Product 22 SKU", "transaction_type": "user_to_integrator", "currency": "USD", "amount": 300 } ] } ``` **To send this information and create a new user-to-publisher transaction, in Postman:** 1. In the **Explore Tilia transactions** collection, in the **Transaction with publisher using the checkout UI** folder, open the **Authorize invoice** request. 2. In the request **Body** tab, notice that it has the information described previously. 3. In the **Authorize invoice** request, choose **Send**. 4. After the response returns, open the response **Body** tab below the request to review the response body details. 5. From the response body, copy and save the value of the `payload.redirect` property to use in the next exercise. A typical response body looks like the following. ```json { "status": "Success", "message": [], "codes": [], "payload": { "nonce_auth_id": "c72f809a-9e38-4540-908f-8fbfdb598d9b", "authorized_invoice_id": "193f3f8d-6e9f-4e4d-84c1-1951171378a5", "redirect": "https://pub.staging.tilia-inc.com/tilia-test/checkout/c72f809a-9e38-4540-908f-8fbfdb598d9b?authorized_invoice_id=193f3f8d-6e9f-4e4d-84c1-1951171378a5&is_escrow=false&is_virtual=false" } } ``` ### Pay the user-to-publisher invoice The `payload.redirect` value from the previous exercise is the URL to the Tilia-hosted Checkout UI with the details of the invoice already loaded and ready for payment. **To pay the invoice using the Checkout UI:** 1. Open another browser window. 2. In the address bar of the new browser window, paste the `payload.redirect` value from the previous exercise and navigate to that page. 3. The Checkout UI for that invoice should open. In the Checkout UI, select the payment method and complete the purchase. 4. After the transaction finishes processing, choose **Done** to exit. At this point, the transaction has completed. In an application context, the user would return to the application. Visit [Next steps](#next-steps) for information about how to view the transaction details of this, and other transactions, or continue to the next exercise. ## Create user-to-user transaction This exercise creates a user-to-user invoice in which the user buys some digital goods from another user and pays for them in USD. The process for this type of transaction, shown in the following image, is very similar to that of the user-to-publisher example described earlier. ![User to user transaction in USD using the Checkout UI](/assets/tutorial-user-to-user-usd-transaction-flow.0beeaf4d318ce98c839559e469e6ca7b2d289af367a15a0f0c40f217c11822b5.9c1bb791.png) In a user-to-user transaction, the recipient must be specified in the invoice line items. Creating a user-to-user invoice starts with collecting all the required information, and then sending it to Tilia to create the complete invoice. By sending the invoice details to the API, instead of returning an invoice to the application for subsequent payment, the API returns a URL to the Tilia-hosted Checkout UI with the invoice details. The user completes the purchase and the invoice in the Tilia-hosted Checkout UI. ### Prepare the user-to-user invoice The invoice data is collected in the request body object that is sent to . The invoice data used in this example is shown here. Notice that each line item has a `transaction_type` value of `user_to_user`. With this value, the recipients must be specified in the `recipients` property. Also, notice that in the `recipients` objects: - The `source_wallet_id` is not used so the payer's default wallet is used. - The `destination_wallet_id` is not used so the default wallet in the account identified by `destination_account_id` is used. ```json { "account_id": "{{payers_account_id}}", "is_escrow": false, "invoice_mechanism": "tilia_hosted", "reference_type": "authorize_purchase_demo", "reference_id": "authorize_demo: {{$timestamp}}", "line_items": [ { "description": "Product 21 description", "product_sku": "Product 21 SKU", "transaction_type": "user_to_user", "currency": "USD", "amount": 1100, "recipients": [ { "amount": 1100, "description": "digital good", "destination_account_id": "{{recipients_account_id}}" } ] }, { "description": "Product 22 description", "product_sku": "Product 22 SKU", "transaction_type": "user_to_user", "currency": "USD", "amount": 300, "recipients": [ { "amount": 300, "description": "digital good", "destination_account_id": "{{recipients_account_id}}" } ] } ] } ``` **To send this information and create a new user-to-user transaction, in Postman:** 1. In the **Explore Tilia transactions** collection, in the **Transaction between users using the checkout UI** folder, open the **Authorize invoice** request. 2. In the request **Body** tab, notice that it has the information described previously. 3. In the **Authorize invoice** request, choose **Send**. 4. After the response returns, open the response **Body** tab below the request to review the response body details. 5. From the response body, copy and save the value of the `payload.redirect` property to use in the next exercise. A typical response body looks like the following. ```json { "status": "Success", "message": [], "codes": [], "payload": { "nonce_auth_id": "c72f809a-9e38-4540-908f-8fbfdb598d9b", "authorized_invoice_id": "193f3f8d-6e9f-4e4d-84c1-1951171378a5", "redirect": "https://pub.staging.tilia-inc.com/tilia-test/checkout/c72f809a-9e38-4540-908f-8fbfdb598d9b?authorized_invoice_id=193f3f8d-6e9f-4e4d-84c1-1951171378a5&is_escrow=false&is_virtual=false" } } ``` ### Pay the user-to-user invoice The `payload.redirect` value from the previous exercise is the URL to the Tilia-hosted Checkout UI with the details of the invoice already loaded and ready for payment. **To pay the invoice using the Checkout UI:** 1. Open another browser window. 2. In the address bar of the new browser window, paste the `payload.redirect` value from the previous exercise and navigate to that page. 3. The Checkout UI for that invoice should open. In the Checkout UI, select the payment method and complete the purchase. 4. After the transaction finishes processing, choose **Done** to exit. At this point, the transaction has completed. In an application context, the user would return to the application. Visit [Next steps](#next-steps) for information about how to view the transaction details of this, and other transactions, or continue to the next exercise. ## Next steps The exercises in this tutorial used Postman to call the Tilia APIs. For an example of how to integrate the payment flow demonstrated in this tutorial into a web page, see [User-to-Integrator Purchase](/guides/user-to-integrator). If you're curious, you can review the wallet balances of the users involved in this transaction by using the exercises in the [Get info about transactions](/tutorials/transactions/tutorial_txn_info) tutorial. You can also return to the [Transaction tutorials overview](/tutorials/transactions) and find another transaction tutorial, or just go to the next transaction tutorial.