Thanks to Something Digital (now Rightpoint) for contributing this topic!

Braintree Vault payment method

Braintree Vault is a payment gateway that processes debit and credit card payments from the Magento_Vault.

Braintree Vault workflow

The following diagram shows the workflow for placing an order when Braintree Vault is the selected payment method.

Braintree sequence diagram

Use the customerPaymentTokens query to retrieve the payment tokens the customer has stored in the vault.
The application returns an array of payment tokens.
The client renders the token information, and the customer selects a payment method.
When the customer selects a stored payment method, the PWA uses the setPaymentMethodOnCart 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.
The application returns a Cart object.
The client runs the placeOrder mutation.
The application sends an authorization request to the gateway.
The gateway sends the response to Magento.
The application creates an order and sends an order ID in response to the placeOrder mutation.

`setPaymentMethodOnCart` mutation

When you set the payment method to Braintree in the setPaymentMethodOnCart 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. JSON-encoded device data for Kount integration

Example Usage

The following example shows the setPaymentMethodOnCart mutation constructed for the Braintree Vault payment method.

Request:

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
        title
      }
    }
  }
}
Copied to your clipboard
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
        title
      }
    }
  }
}

Response:

{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "braintree_cc_vault"
          "title": "Stored Cards"
        }
      }
    }
  }
}
Copied to your clipboard
{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "braintree_cc_vault"
          "title": "Stored Cards"
        }
      }
    }
  }
}