GraphQL: Add PayPal Website Payments Pro payment method docs

_data/toc/graphql.yml

@@ -68,6 +68,9 @@ pages:
         - label: customerPaymentTokens query
           url: /graphql/queries/customer-payment-tokens.html
 
+        - label: getHostedProUrl query
+          url: /graphql/queries/get-hosted-pro-url.html
+
         - label: storeConfig query
           url: /graphql/queries/store-config.html
 
@@ -208,6 +211,9 @@ pages:
         - label: PayPal Payments Advanced
           url: /graphql/payment-methods/payments-advanced.html
 
+        - label: PayPal Website Payments Pro Hosted Solution
+          url: /graphql/payment-methods/hosted-pro.html
+
     - label: Tutorial
       class: tutorial
       url: /graphql/tutorials/checkout/index.html

_includes/graphql/payment-methods/hosted-pro-attributes.md

@@ -0,0 +1,4 @@
+Attribute |  Data Type | Description
+--- | --- | ---
+`cancel_url` | String! | The relative URL of the page that PayPal will redirect to when the buyer cancels the transaction in order to choose a different payment method. If the full URL to this page is `https://www.example.com/paypal/action/cancel.html`, the relative URL is `paypal/action/cancel.html`
+`return_url` | String! | The relative URL of the final confirmation page that PayPal will redirect to upon payment success. If the full URL to this page is `https://www.example.com/paypal/action/return.html`, the relative URL is `paypal/action/return.html`

_includes/graphql/payment-methods/hosted-pro-workflow.md

@@ -0,0 +1,21 @@
+1. The PWA client uses the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html) mutation to set the payment method.
+
+1. The mutation returns a `Cart` object.
+
+1. The client runs the [`placeOrder`]({{page.baseurl}}/graphql/reference/quote-place-order.html) mutation, which creates an order in Magento and begins the authorization process.
+
+2. Magento sends information about the order to PayPal and requests a secure URL that the PWA client will later use to connect to PayPal.
+
+3. PayPal's response includes the secure URL.
+
+4. The `placeOrder` mutation returns an order ID. The order has the status `payment pending`.
+
+5. The client runs the [`getHostedProUrl`]({{page.baseurl}}/graphql/queries/get-hosted-pro-url.html) query to retrieve the secure URL.
+
+6. Magento returns the secure URL in the `secure_form_url` attribute.
+
+7. The PWA client displays a payment form in an iframe rendered from the secure URL. When the customer completes the form, the client sends the payment information directly to the PayPal gateway, bypassing the Magento server.
+
+8. After PayPal processes the payment, the gateway runs a silent post request against the Magento server. As a result, Magento sets the order status to processing, and the order is ready to be invoiced.
+
+9. The PayPal gateway returns control of the customer's browser to the client.

guides/v2.3/graphql/payment-methods/hosted-pro.md

@@ -0,0 +1,69 @@
+---
+group: graphql
+title: PayPal Website Payments Pro Hosted Solution payment method
+---
+
+PayPal's [Website Payments Pro Hosted Solution](https://developer.paypal.com/docs/classic/paypal-payments-pro/integration-guide/) allows merchants to accept credit cards, debit cards, and PayPal payments directly on their websites. The merchant must be based in the United Kingdom to create a new integration with this payment method. PayPal continues to support merchants with existing integrations outside the UK.
+
+This payment method is applicable to Direct Payment and Express Checkout implementations of the Website Payments Pro Hosted Solution.
+
+PayPal's product name for this payment method varies from country to country. [PayPal Website Payments
+Pro Hosted Solution Integration Guide](https://www.paypalobjects.com/webstatic/en_GB/developer/docs/pdf/hostedsolution_uk.pdf) provides more information.
+
+## Website Payments Pro Hosted Solution workflow
+
+The following diagram shows the workflow for placing an order when Website Payments Pro Hosted Solution is the selected payment method.
+
+![PayPal Website Payments Pro Hosted Solution sequence diagram]({{site.baseurl}}/common/images/graphql/paypal-hosted-pro.svg)
+
+{% include graphql/payment-methods/hosted-pro-workflow.md %}
+
+## `setPaymentMethodOnCart` mutation
+
+When you set the payment method for a Website Payments Pro Hosted Solution, you must set the `code` attribute to `hosted_pro`. In addition, the payload must contain a `hosted_pro` object, which defines the following attributes:
+
+{% include graphql/payment-methods/hosted-pro-attributes.md %}
+
+## Example setPaymentMethodOnCart mutation
+
+The following example shows the `setPaymentMethodOnCart` mutation constructed for the Website Payments Pro Hosted Solution payment method.
+
+**Request**
+
+```graphql
+mutation {
+  setPaymentMethodOnCart(input: {
+    cart_id: "H87OmEkvusP7ZPkd2634pQFxY4dKI3a4"
+    payment_method: {
+      code: "hosted_pro"
+      hosted_pro: {
+        cancel_url: "paypal/hostedpro/cancel"
+        return_url: "paypal/hostedpro/return"
+      }
+    }
+  })
+  {
+    cart {
+      selected_payment_method {
+        code
+      }
+    }
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "data": {
+    "setPaymentMethodOnCart": {
+      "cart": {
+        "selected_payment_method": {
+          "code": "hosted_pro",
+        }
+      }
+    }
+  }
+}
+```

guides/v2.3/graphql/queries/get-hosted-pro-url.md

@@ -0,0 +1,52 @@
+---
+group: graphql
+title: getHostedProUrl query
+---
+
+The `getHostedProUrl` query is required to complete a transaction when the [PayPal Website Payments Pro Hosted Solution payment method]({{page.baseurl}}/graphql/payment-methods/hosted-pro.html) is selected. The query retrieves a PayPal-generated URL that the PWA client connects to, enabling the customer to enter their PayPal credentials and complete the transaction. Run this query after you [set the payment method]({{ page.baseurl}}/graphql/reference/quote-payment-method.html) and [place the order]({{ page.baseurl}}/graphql/reference/quote-place-order.html).
+
+## Syntax
+
+`getHostedProUrl(input: HostedProUrlInput!): HostedProUrl`
+
+## Example usage
+
+The following query returns the customer's wish list:
+
+**Request**
+
+```graphql
+query {
+  getHostedProUrl(input: { cart_id: "mwqoyxgbibvgkr3udszfzomxpoj2gmj6" }) {
+    secure_form_url
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "data": {
+    "getHostedProUrl": {
+      "secure_form_url": "https://securepayments.sandbox.paypal.com/webapps/HostedSoleSolutionApp/webflow/sparta/hostedSoleSolutionProcess?hosted_button_id=HSSS-iKGrv2XMlHcGGj8u.hlOHA2AeoQHcIQOvoqTEbvgBlKTLXcS8tAg0BRg1AklvfIhU5ip0g"
+    }
+  }
+}
+```
+
+## Input attributes
+
+The `getHostedProUrl` query must contain the following attribute:
+
+Attribute | Data type | Description
+--- | --- | ---
+`cart_id` | String! | The unique ID that identifies the customer’s cart
+
+## Output attributes
+
+The query returns the PayPal URL that enables the customer to sign in to PayPal and complete the transaction.
+
+Attribute | Data type | Description
+--- | --- | ---
+`secure_form_url` | String | Secure URL generated by PayPal