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.

1. The PWA client calls the createBraintreeClientToken mutation to generate the client token.

2. Magento forwards the request to Braintree.

3. Braintree returns the token to Magento.

4. Magento forwards the token to the client.

5. 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.

6. The Braintree SDK submits the payment information to Braintree client-side and returns a payment token (nonce) to the client.

7. 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.

8. Magento returns a Cart object.

9. The client uses the placeOrder mutation.

10. Magento sends an authorization request to Braintree.

11. Braintree sends the response to Magento.

12. 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 object.

braintree object

The braintree object must contain the following attributes:

Example Usage

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

Request:

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

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