PAY-5702: Adds docs for the updated vault feature in Payment Services

src/data/navigation/sections/graphql.js

@@ -305,18 +305,6 @@ module.exports = [
                 title: "getPayflowLinkToken",
                 path: "/graphql/schema/checkout/queries/get-payflow-link-token/",
               },
-              {
-                title: "getPaymentConfig",
-                path: "/graphql/schema/checkout/queries/get-payment-config/",
-              },
-              {
-                title: "getPaymentOrder",
-                path: "/graphql/schema/checkout/queries/get-payment-order/",
-              },
-              {
-                title: "getPaymentSDK",
-                path: "/graphql/schema/checkout/queries/get-payment-sdk/",
-              },
             ],
           },
           {
@@ -335,10 +323,6 @@ module.exports = [
                 title: "createPayflowProToken",
                 path: "/graphql/schema/checkout/mutations/create-payflow-pro-token/",
               },
-              {
-                title: "createPaymentOrder",
-                path: "/graphql/schema/checkout/mutations/create-payment-order/",
-              },
               {
                 title: "createPaypalExpressToken",
                 path: "/graphql/schema/checkout/mutations/create-paypal-express-token/",
@@ -351,10 +335,6 @@ module.exports = [
                 title: "handlePayflowProResponse",
                 path: "/graphql/schema/checkout/mutations/handle-payflow-pro-response/",
               },
-              {
-                title: "syncPaymentOrder",
-                path: "/graphql/schema/checkout/mutations/sync-payment-order/",
-              },
             ],
           },
         ],
@@ -1246,22 +1226,72 @@ module.exports = [
     ],
   },
   {
-    title: "Payment Services payment methods",
-    path: "/graphql/payment-services/",
+    title: "Payment Services extension",
+    path: "/graphql/payment-services-extension/",
     pages: [
       {
-        title: "Checkout",
-        path: "/graphql/payment-services/checkout.md"
-      },
-      {
-        title: "Minicart",
-        path: "/graphql/payment-services/minicart.md"
-      },
+        title: "Workflows",
+        path: "/graphql/payment-services-extension/workflows/",
+        pages: [
+              {
+                title: "Checkout",
+                path: "/graphql/payment-services-extension/workflows/checkout.md",
+              },
+              {
+                title: "Minicart",
+                path: "/graphql/payment-services-extension/workflows/minicart.md",
+              },
+              {
+                title: "Vault",
+                path: "/graphql/payment-services-extension/workflows/vault.md",
+        },
+      ],
+    },
       {
-        title: "Vault",
-        path: "/graphql/payment-services/vault.md"
-      }
-    ]
+            title: "Queries",
+            path: "/graphql/payment-services-extension/queries/",
+            pages: [
+                {
+                    title: "getPaymentConfig",
+                    path: "/graphql/schema/checkout/queries/get-payment-config/",
+                  },
+                  {
+                    title: "getPaymentOrder",
+                    path: "/graphql/schema/checkout/queries/get-payment-order/",
+                  },
+                  {
+                    title: "getPaymentSDK",
+                    path: "/graphql/schema/checkout/queries/get-payment-sdk/",
+                  },
+                  {
+                    title: "getVaultConfig",
+                    path: "/graphql/schema/checkout/queries/get-vault-config/",
+                  },
+            ],
+          },
+          {
+            title: "Mutations",
+            path: "/graphql/payment-services-extension/mutations/",
+            pages: [
+              {
+                title: "createPaymentOrder",
+                path: "/graphql/payment-services-extension/mutations/create-payment-order/",
+              },
+              {
+                title: "createVaultCardPaymentToken",
+                path: "/graphql/payment-services-extension/mutations/create-vault-card-payment-token/",
+              },
+              {
+                title: "createVaultCardSetupToken",
+                path: "/graphql/payment-services-extension/mutations/create-vault-card-setup-token/",
+              },
+              {
+                title: "syncPaymentOrder",
+                path: "/graphql/payment-services-extension/mutations/sync-payment-order/",
+              },
+            ],
+          },
+    ],
   },
   {
     title: "Tutorial",

src/pages/graphql/payment-methods/index.md

@@ -16,4 +16,4 @@ Supported payment providers include:
 - Klarna (deprecated)
 - PayPal
 
-[Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.3.0 and higher provides enhanced payment method capabilities. See [Payment Services Payment Methods](../payment-services/index.md) for more information.
+[Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.3.0 and higher provides enhanced payment method capabilities. See [Payment Services Payment Methods](../payment-services-extension/index.md) for more information.

src/pages/graphql/payment-services/index.md → src/pages/graphql/payment-services-extension/index.md

@@ -1,12 +1,12 @@
 ---
-title: Payment Services Payment Methods
+title: Payment Services extension
 description: Learn how to use the GraphQL APIs to integrate the Payment Services extension.
 keywords:
   - GraphQL
   - Payments
 ---
 
-# Payment Services Payment Methods
+# Payment Services extension
 
 Payment Services is your one-stop-shop for online checkout (from settlement and refunds to getting paid). Payment Services is designed to meet _all_ your payment needs.
 
@@ -17,10 +17,24 @@ It provides powerful tools to give you the insight and control needed for creati
 * **Cash flow management financial reporting**---Synchronize [payment details](https://experienceleague.adobe.com/docs/commerce-merchant-services/payment-services/reporting/order-payment-status.html) with orders to get full order and payment transparency, [payouts](https://experienceleague.adobe.com/docs/commerce-merchant-services/payment-services/reporting/payouts.html), and detailed [transaction-level reporting](https://experienceleague.adobe.com/docs/commerce-merchant-services/payment-services/reporting/transactions.html) for financial reconciliation.
 * **Efficient checkout experience**---Remove any barriers to a fast and simple checkout with [card vaulting](https://experienceleague.adobe.com/docs/commerce-merchant-services/payment-services/payments-checkout/vaulting.html) and [Instant Purchase](https://experienceleague.adobe.com/docs/commerce-admin/stores-sales/point-of-purchase/checkout-instant-purchase.html) (enabled by default for Adobe Commerce) features.
 
+## Payment Services GraphQL
+
 [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.3.0 and higher provides enhanced payment method capabilities. With this extension, you can implement the following payment methods:
 
 * Apple Pay with PayPal
 * Google Pay with PayPal
 * PayPal Hosted Fields
 * PayPal Smart Buttons
-* PayPal Vault
+* Credit card vaulting
+
+## Credit card vaulting
+
+The vault-related changes to the schema allow you to generate stored payment details and to modify a payment token.
+
+The Payment Services Vault method is a solution in which shoppers can store—or "vault"—their credit card credentials to use in a later purchase:
+
+* Logged-in customers can vault a payment method in the **My Account** dashboard [without a purchase](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/payment-services/payments-checkout/vaulting#vaulting-without-purchase). This functionality is available only if you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.10.0 or higher.
+
+* Logged-in customers can [vault a credit card during checkout](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/payment-services/payments-checkout/vaulting#vaulting-a-payment-method-during-checkout) to use in a later purchase in the current store or other stores within the same merchant account.
+
+See [Payment Services Vault workflow](../payment-services-extension/workflows/vault.md) for more information.

src/pages/graphql/schema/checkout/mutations/create-payment-order.md → src/pages/graphql/payment-services-extension/mutations/create-payment-order.md

@@ -1,5 +1,6 @@
 ---
 title: createPaymentOrder mutation
+description: This mutation creates a payment order for later processing when Payment Services extension is enabled.
 ---
 
 # createPaymentOrder mutation
@@ -77,9 +78,9 @@ Attribute |  Data Type | Description
 --- | --- | ---
 `cartId` | String! | The unique ID of the cart
 `location` | PaymentLocation! | The origin location for that payment request. The possible values are
-PRODUCT_DETAIL, MINICART, CART, CHECKOUT, ADMIN
+`PRODUCT_DETAIL`, `MINICART`, `CART`, `CHECKOUT`, `ADMIN`
 `methodCode` | String! | The code for the selected payment method
-`paymentSource` | String! | The payment source for the payment method. The possible values are credit card (`cc`), PayPal (`paypal`), and Apple Pay (`applepay`)
+`paymentSource` | String! | The payment source for the payment method The possible values are credit card (`cc`), PayPal (`paypal`), and Apple Pay (`applepay`)
 `vaultIntent` | Boolean | Indicates whether the payment information should be vaulted. This attribute is only applicable to the `hosted_fields` payment method. The default value is `false`
 
 ## Output attributes

src/pages/graphql/payment-services-extension/mutations/create-vault-card-payment-token.md

@@ -0,0 +1,105 @@
+---
+title: createVaultCardPaymentToken mutation
+description: This mutation creates a permanent token ID and associates an optional card description, visible in the storefront.
+---
+
+# createVaultCardPaymentToken mutation
+
+<InlineAlert variant="info" slots="text" />
+
+This mutation is available only if you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.10.0 or higher.
+
+The `createVaultCardPaymentToken` mutation creates a permanent `vault_token_id` and associates an optional card description, visible in the storefront.
+
+To run the `createVaultCardPaymentToken` mutation, you need the `setup_token` generated with the [`createVaultCardSetupToken`](create-vault-card-setup-token.md) mutation.
+
+## Syntax
+
+```graphql
+mutation { 
+    createVaultCardPaymentToken(
+        input: CreateVaultCardPaymentTokenInput! 
+    ) CreateVaultCardPaymentTokenOutput    
+}
+```
+
+## Example usage
+
+The following example runs the `createVaultCardPaymentToken` mutation to create a permanent `vault_token_id` for the given payment method.
+
+## Request
+
+```graphql
+mutation {
+  createVaultCardPaymentToken(
+      input: {
+        setup_token_id: "23N11484TX9371211"
+        card_description: "My New Card"
+      } 
+  ) {
+      vault_token_id 
+      payment_source { 
+          card {
+              brand 
+              last_digits 
+              expiry
+          } 
+      }
+  }
+}
+```
+
+## Response
+
+```json
+{
+    "data": {
+        "createVaultCardPaymentToken": {
+            "vault_token_id": "745bf41a-4196-41a6-a17a-0234f89118fc",
+            "payment_source": {
+                "card": {
+                    "brand": "VISA",
+                    "last_digits": "0004",
+                    "expiry": "2027-02"
+                }
+            }
+        }
+    }
+} 
+```
+
+## Input attributes
+
+The `CreateVaultCardPaymentTokenInput` object contains the following input attributes:
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`setup_token_id` | String! | The `setup_token` obtained with the `createVaultCardSetupToken` mutation
+`card_description` | String | The description of the vaulted card
+
+## Output attributes
+
+The `CreateVaultCardPaymentTokenOutput` object contains the following attributes:
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`vault_token_id` | String! | The vault payment token information
+`payment_source` | PaymentSourceOutput! | The payment source information
+
+### `PaymentSourceOutput` attributes
+
+The `PaymentSourceOutput` object describes the payment source information. It contains the following attribute:
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`card` | CardPaymentSourceOutput! | The card payment source information.
+
+### `CardPaymentSourceOutput` object
+
+The `CardPaymentSourceOutput` object describes the card payment source information
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`brand` | String | The brand of the card
+`last_digits` | String | Last digits of the card
+`expiry` | String | The expiry date of the card