Merge pull request AdobeDocs#400 from AdobeDocs/PAY-5913

PAY-5913: Updates the PS folder with updated workflows for the vaulted card with/without purchase feature

Author: meker12

src/data/navigation/sections/graphql.js

@@ -1249,6 +1249,14 @@ module.exports = [
                 title: "Minicart",
                 path: "/graphql/payment-services-extension/workflows/minicart.md",
               },
+              {
+                title: "Vault a card during a checkout authorization",
+                path: "/graphql/payment-services-extension/workflows/vault-with-purchase.md",
+              },
+              {
+                title: "Vault a credit card without a purchase",
+                path: "/graphql/payment-services-extension/workflows/vault-without-purchase.md",
+              },
               {
                 title: "Vaulted card",
                 path: "/graphql/payment-services-extension/workflows/vaulted-card.md",

src/pages/_images/graphql/payment-services-paypal-vault.svg renamed to src/pages/_images/graphql/payment-services-paypal-vaulted-card.svg

@@ -0,0 +1,108 @@
+---
+title: Vault a card during a checkout authorization
+description: Learn how to vault a credit card during a typical checkout authorization.
+keywords:
+  - GraphQL
+  - Payments
+---
+
+# Vault a card during a checkout authorization
+
+These steps describe the flow of requests and responses required to [vault a credit card](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/payment-services/payments-checkout/vaulting#vaulting-a-payment-method-during-checkout) during a typical checkout authorization with Payment Services enabled.
+
+The following conditions must be true to vault a card during checkout:
+
+* You must have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.10.0 or higher.
+* The customer must be logged in.
+
+## Workflow
+
+![Payment Services sequence diagram](../../../_images/graphql/payment-services-vault-with-purchase.svg)
+
+1. Run the [`getPaymentConfig`](../../payment-services-extension/queries/get-payment-config.md) query to fetch the payment configuration needed to render details of hosted fields.
+
+1. Commerce returns the payment configuration information.
+
+1. Run the [`setPaymentMethodOnCart`](../../schema/cart/mutations/set-payment-method.md) mutation to [set the payment method](../../tutorials/checkout/set-payment-method.md).
+
+1. Adobe Commerce returns a `Cart` object.
+
+1. Run the [`createPaymentOrder`](../../payment-services-extension/mutations/create-payment-order.md) mutation with `vaultIntent` set to `true` to begin the authorization process.
+
+1. Commerce forwards the request to PayPal.
+
+1. PayPal returns an `id` value.
+
+1. Adobe Commerce generates a `order_id` and forwards the value in the `mp_order_id` field and the PayPal response in the `id` field.
+
+1. Run [`setPaymentMethodOnCart`](../../schema/cart/mutations/set-payment-method.md) again with [`is_active_payment_token_enabler`](https://developer.adobe.com/commerce/webapi/graphql/payment-services-extension/workflows/checkout/#setpaymentmethodoncartinput-object) set to `true`. This indicates whether a customer-entered credit/debit card should be tokenized for later usage.
+
+1. Adobe Commerce returns a token.
+
+1. (Optional) If hosted fields and the Signifyd integration are enabled, run the [`getPaymentOrder`](../../payment-services-extension/queries/get-payment-order.md) query.
+
+1. (Optional) Adobe Commerce returns details about the payment order.
+
+1. Run the [`placeOrder`](../../schema/cart/mutations/place-order.md) mutation.
+
+1. Commerce sends an authorization request to PayPal.
+
+1. PayPal returns the result to Commerce.
+
+1. Commerce creates an order.
+
+1. Paypal returns a vault token.
+
+1. Commerce stores the vault token for the vaulted card.
+
+## Additional information
+
+It is only possible to vault configuration details for hosted fields. See [`getPaymentConfig`](../../payment-services-extension/queries/get-payment-config.md) query for more information.
+
+### `setPaymentMethodOnCart` mutation example
+
+The following example shows the `setPaymentMethodOnCart` mutation with the attribute `is_active_payment_token_enabler` set to `true`.
+
+**Request:**
+
+```graphql
+mutation {
+    setPaymentMethodOnCart ( input: {
+      cart_id: "uocGxUi5H97XFAMhY3s66q4aFYG3Bmdr",
+      payment_method: {
+        code: "payment_services_paypal_hosted_fields",
+        payment_services_paypal_hosted_fields: {
+          payment_source: "cc",
+          payments_order_id: "mp-order-a4babd34-13d3-4ac0-b1b0-109bb7be1574",
+          paypal_order_id: "9R90936863877801D",
+          is_active_payment_token_enabler: true
+        }
+      }
+    }
+    ) {
+       cart {
+         id
+         selected_payment_method {
+           code
+         }
+       }
+    }
+  } 
+```
+
+**Response:**
+
+```json
+{
+  "data": {
+    "setPaymentMethodOnCart": {
+      "cart": {
+        "id": "uocGxUi5H97XFAMhY3s66q4aFYG3Bmdr",
+        "selected_payment_method": {
+          "code": "payment_services_paypal_hosted_fields"
+        }
+      }
+    }
+  }
+}
+```

src/pages/_images/graphql/payment-services-vault-with-purchase.svg

@@ -0,0 +1,45 @@
+---
+title: Vaulting a credit card without a purchase
+description: Learn how to vault a payment method without a typical checkout authorization.
+keywords:
+  - GraphQL
+  - Payments
+---
+
+# Vaulting a credit card without a checkout authorization
+
+These steps describe the flow of requests and responses required to [vault a payment method](https://experienceleague.adobe.com/en/docs/commerce-merchant-services/payment-services/payments-checkout/vaulting#vaulting-without-purchase) without the typical checkout authorization with Payment Services enabled.
+
+## Workflow
+
+![Payment Services sequence diagram](../../../_images/graphql/payment-services-vault-without-purchase.svg)
+
+1. Run the [`getVaultConfig`](../../payment-services-extension/queries/get-vault-config.md) query to fetch the vault configuration details for the available payment methods. Attribute `is_vault_enabled` set to `true`.
+
+1. Commerce returns the vault configuration details.
+
+1. Run the  [`createVaultCardSetupToken`](../../payment-services-extension/mutations/create-vault-card-setup-token.md) mutation to create a temporary `setup_token` associated to the given payment source.
+
+1. Commerce forwards token request to PayPal.
+
+1. PayPal returns the temporary `setup_token` to Commerce.
+
+1. Commerce receives the `setup_token`.
+
+1. PayPal SDK updates the credit card information in the storefront.
+
+1. Run the [`createVaultCardPaymentToken`](../../payment-services-extension/mutations/create-vault-card-payment-token.md) mutation to create a permanent `vault_token_id` and associate it with an optional card description, visible in the storefront.
+
+1. Commerce forwards `setup_token` to PayPal.
+
+1. PayPal returns a permanent `vault_token_id` to Commerce.
+
+1. Commerce vaults the payment method.
+
+## Additional payment information
+
+The setup token is generated with an empty card number in the `payment_source` object purposefully. The PayPal SDK, in conjunction with hosted fields or credit cards field components, securely updates the setup token with payment details.
+
+See [PayPal SDK developer documentation](https://developer.paypal.com/docs/multiparty/checkout/save-payment-methods/purchase-later/js-sdk/cards/) for more information.
+
+To run the `createVaultCardPaymentToken` mutation, use the `setup_token` generated by the [`createVaultCardSetupToken`](../mutations/create-vault-card-setup-token.md) mutation.

src/pages/_images/graphql/payment-services-vault-without-purchase.svg

@@ -1,16 +1,16 @@
 ---
-title: Payment Services vault workflow
-description: Learn how to use the GraphQL APIs to integrate the Payment Services vault solution.
+title: Payment Services vaulted card workflow
+description: Learn how to use the GraphQL APIs to integrate the Payment Services into a checkout process with a vaulted card.
 keywords:
   - GraphQL
   - Payments
 ---
 
-# Payment Services Vault workflow
+# Payment Services vaulted card workflow
 
 The following diagram shows the workflow of a checkout authorization using a vaulted card.
 
-![Payment Services Vault sequence diagram](../../../_images/graphql/payment-services-paypal-vault.svg)
+![Payment Services Vault sequence diagram](../../../_images/graphql/payment-services-paypal-vaulted-card.svg)
 
 1. Use the [`customerPaymentTokens`](../../schema/checkout/queries/customer-payment-tokens.md) query to retrieve the payment tokens the customer stored in the vault.