This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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

  1. Use the customerPaymentTokens query to retrieve the payment tokens the customer has stored in the vault.

  2. Magento returns an array of payment tokens.

  3. The client renders the token information, and the customer selects a payment method.

    When the customer clicks Place Order, 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.

  4. Magento returns a Cart object.

  5. The client runs the placeOrder mutation.

  6. Magento sends an authorization request to the gateway.

  7. The gateway sends the response to Magento.

  8. Magento 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:

1
2
3
4
5
6
7
8
9
10
11
{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "braintree_cc_vault"
        }
      }
    }
  }
}