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

Braintree payment method

Braintree is a payment gateway that processes debit and credit card payments.

Braintree workflow

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

Braintree sequence diagram

The PWA client calls the createBraintreeClientToken mutation to generate the client token.
The application forwards the request to Braintree.
Braintree returns the token to Adobe Commerce.
The application forwards the token to the client.
The PWA client uses the token to initialize the Braintree hosted fields. These fields collect and tokenize payment information via a secure iframe. This process occurs over several steps.
- On the checkout page, the customer selects Credit Card as the payment method and enters payment information using the Braintree hosted fields. Then the customer clicks Place Order.
- The client requests the Braintree SDK tokenize the user-input payment information.
The Braintree SDK submits the payment information to Braintree client-side and returns a payment token (nonce) to the client.
The client extracts the payment nonce from the Tokenized Payload.
The client uses the setPaymentMethodOnCart mutation to set the payment method to braintree. The payment method nonce is passed with other required and optional properties in the braintree object.
The application returns a Cart object.
The client uses the placeOrder mutation.
The application sends an authorization request to Braintree.
Braintree sends the response to Adobe Commerce.
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 object.

braintree object

The braintree object must contain the following attributes:

Attribute	Data Type	Description
`payment_method_nonce`	String!	The one-time payment token generated by Braintree payment gateway based on card details. Required field for sale transactions
`is_active_payment_token_enabler`	Boolean!	States whether a customer-entered credit/debit card should be tokenized for later usage. Required only if Vault is enabled for Braintree payment integration
`device_data`	String	Optional. Contains a fingerprint provided by the Braintree JS SDK. It should be sent with sale transaction details to the Braintree payment gateway. Specify a value only if Kount (advanced fraud protection) is enabled for Braintree payment integration

Example Usage

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

Request:

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

{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "braintree"
        }
      }
    }
  }
}
Copied to your clipboard
{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "braintree"
        }
      }
    }
  }
}