diff --git a/guides/v2.3/graphql/payment-methods/braintree-vault.md b/guides/v2.3/graphql/payment-methods/braintree-vault.md new file mode 100644 index 000000000000..e9c34bad2243 --- /dev/null +++ b/guides/v2.3/graphql/payment-methods/braintree-vault.md @@ -0,0 +1,83 @@ +--- +group: graphql +title: Braintree Vault payment method +contributor_name: Something Digital +contributor_link: https://www.somethingdigital.com/ +--- + +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" + } + } + } + } +} +``` diff --git a/guides/v2.3/graphql/payment-methods/braintree.md b/guides/v2.3/graphql/payment-methods/braintree.md new file mode 100644 index 000000000000..70b02a7d405e --- /dev/null +++ b/guides/v2.3/graphql/payment-methods/braintree.md @@ -0,0 +1,92 @@ +--- +group: graphql +title: Braintree payment method +contributor_name: Something Digital +contributor_link: https://www.somethingdigital.com/ +--- + +Braintree is a payment gateway that processes debit and credit card payments. + +## Braintree workflow + +1. Generate 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" + } + } + } + } +} +``` diff --git a/guides/v2.3/graphql/reference/braintree-create-client-token.md b/guides/v2.3/graphql/reference/braintree-create-client-token.md new file mode 100644 index 000000000000..4b1bedb120c7 --- /dev/null +++ b/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"} + } +} +```