BraintreeGraphQl Workflow

Corresponds to magento/graphql-ce#392

Author: pmclain

guides/v2.3/graphql/payment-methods/braintree-vault.md

@@ -0,0 +1,81 @@
+---
+group: graphql
+title: Braintree Vault payment method
+---
+
+Braintree Vault is a payment gateway that processes debit and credit card payments from the Magento_Vault.
+
+## Braintree Vault workflow
+
+1. Fetch vault payment method for customer with [`customerPaymentTokens`]({{page.baseurl}}/graphql/reference/vault.html)
+   query.
+
+2. Customer selects stored Braintree payment method.
+
+3. When the customer clicks **Place Order**, the PWA uses the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html)
+   mutation to set the payment method to `braintree_cc_vault`. The vaulted public hash is passed with other optional
+   properties in the [`braintree_cc_vault`](#braintree_cc_vault-object).
+
+4. 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.
+
+5. Magento sends an authorization request to the gateway.
+
+6. The gateway sends the response to Magento.
+
+7. Magento creates an order and sends an order ID in response to the `placeOrder` mutation.
+
+## Additional Payment information
+
+When you set the payment method to Braintree in the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html)
+mutation, the `payment_method` object must contain a `braintree_cc_vault` object.
+
+### braintree_cc_vault object
+
+The `braintree_cc_vault` object must contain the following attributes:
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`public_hash` | String! | Required input for Magento_Vault public hash for the selected stored payment method
+`device_data` | String | Optional input json encoded device data for Kount integration
+
+## Example setPaymentMethodOnCart mutation
+
+The following example shows the `setPaymentMethodOnCart` mutation constructed for the Braintree Vault payment method.
+
+**Request**
+
+```text
+mutation {
+  setPaymentMethodOnCart(input: {
+    cart_id: "IeTUiU0oCXjm0uRqGCOuhQ2AuQatogjG"
+    payment_method: {
+      code: "braintree_cc_vault"
+      braintree_cc_vault: {
+        public_hash: "fake-public-hash"
+      }
+    }
+  }) {
+  cart {
+    selected_payment_method {
+      code
+    }
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "data": {
+    "setPaymentMethodOnCart": {
+      "cart": {
+        "selected_payment_method": {
+          "code": "braintree_cc_vault"
+        }
+      }
+    }
+  }
+}
+```

guides/v2.3/graphql/payment-methods/braintree.md

@@ -0,0 +1,90 @@
+---
+group: graphql
+title: Braintree payment method
+---
+
+Braintree is a payment gateway that processes debit and credit card payments.
+
+## Braintree workflow
+
+1. Generation Braintree Client token using the [`createBraintreeClientToken`]({{page.baseurl}}/graphql/reference/braintree-create-client-token.html)
+   mutation
+
+2. Initial [Braintree hosted fields](https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v3)
+   using the client token to collect and tokenize payment information via a secure iframe.
+
+3. On the checkout page, the customer selects **Credit Card** as the payment method and enters the credit card
+   information as well as the billing and shipping addresses.
+
+4. When the customer clicks **Place Order**, the PWA [creates a payment token](https://braintree.github.io/braintree-web/3.46.0/HostedFields.html#tokenize)
+   from the Braintree hosted fields.
+
+5. The client uses the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html) mutation
+   to set the payment method to `braintree`. The payment method nonce is passed with other required and optional
+   properties in the [`braintree`](#braintree-object).
+
+6. 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.
+
+7. Magento sends an authorization request to the gateway.
+
+8. The gateway sends the response to Magento.
+
+9. Magento creates an order and sends an order ID in response to the `placeOrder` mutation.
+
+## Additional Payment information
+
+When you set the payment method to Braintree in the [`setPaymentMethodOnCart`]({{page.baseurl}}/graphql/reference/quote-payment-method.html)
+mutation, the `payment_method` object must contain a `braintree` object.
+
+### braintree object
+
+The `braintree` object must contain the following attributes:
+
+Attribute |  Data Type | Description
+--- | --- | ---
+`payment_method_nonce` | String! | Required input for Braintree client-side generated nonce
+`is_active_payment_token_enabler` | Boolean! | Required input dictating if payment should be stored in `Magento_Vault`
+`device_data` | String | Optional input json encoded device data for Kount integration
+
+## Example setPaymentMethodOnCart mutation
+
+The following example shows the `setPaymentMethodOnCart` mutation constructed for the Braintree payment method.
+
+**Request**
+
+```text
+mutation {
+  setPaymentMethodOnCart(input: {
+    cart_id: "IeTUiU0oCXjm0uRqGCOuhQ2AuQatogjG"
+    payment_method: {
+      code: "braintree"
+      braintree: {
+        payment_method_nonce: "fake-nonce"
+        is_active_payment_token_enabler: false
+      }
+    }
+  }) {
+  cart {
+    selected_payment_method {
+      code
+    }
+  }
+}
+```
+
+**Response**
+
+```json
+{
+  "data": {
+    "setPaymentMethodOnCart": {
+      "cart": {
+        "selected_payment_method": {
+          "code": "braintree"
+        }
+      }
+    }
+  }
+}
+```

guides/v2.3/graphql/reference/braintree-create-client-token.md

@@ -0,0 +1,34 @@
+---
+group: graphql
+title: createBraintreeClientToken mutation
+---
+
+The `createBraintreeClientToken` mutation creates the client token required by the Braintree SDK for nonce generation.
+
+## Syntax
+
+`mutation: {createBraintreeClientToken}: String`
+
+## Example usage
+
+### Create a Braintree client token
+
+**Request**
+
+```text
+mutation {
+  createBraintreeClientToken
+}
+```
+
+**Response**
+
+The response 
+
+```json
+{
+  "data": {
+    "createBraintreeClientToken": "4JQaNVJokOpFxrykGVvYrjhiNv9qt31C"}
+  }
+}
+```