@graphcommerce/magento-payment-braintree 8.1.0-canary.2 → 8.1.0-canary.20

package/CHANGELOG.md

@@ -1,6 +1,108 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+### Patch Changes
+
+- [#2277](https://github.com/graphcommerce-org/graphcommerce/pull/2277) [`f9199f7`](https://github.com/graphcommerce-org/graphcommerce/commit/f9199f798583138a68dd641ea6637375c487f29b) - Solve issue where Braintree wouldn't place the order after successfully validating a Credit Card.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+## 8.1.0-canary.8
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2188](https://github.com/graphcommerce-org/graphcommerce/pull/2188) [`eec7498`](https://github.com/graphcommerce-org/graphcommerce/commit/eec7498213f34f0f850123b577b77bf678e3c80b) - Braintree Credit Card: Hosted payment fields now have proper styling and all focus/blur and error states are correctly handled.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+### Patch Changes
+
+- [#2188](https://github.com/graphcommerce-org/graphcommerce/pull/2188) [`eec7498`](https://github.com/graphcommerce-org/graphcommerce/commit/eec7498213f34f0f850123b577b77bf678e3c80b) - Braintree Credit Card: Hosted payment fields now have proper styling and all focus/blur and error states are correctly handled.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/hooks/useBraintreeHostedFields.ts

@@ -1,46 +1,56 @@
-import braintree, { HostedFields } from 'braintree-web'
-import { useRef } from 'react'
+import braintree, { HostedFields, ThreeDSecure } from 'braintree-web'
+import { useEffect, useState } from 'react'
 import { useBraintreeClient } from './useBraintree'
 
-let hostedFieldsPromise: Promise<HostedFields> | undefined
-function getLocalPaymentPromise(braintreePromise: ReturnType<typeof useBraintreeClient>) {
-  if (!hostedFieldsPromise) {
-    hostedFieldsPromise = new Promise((resolve, reject) => {
+let teardownPromise: Promise<void> | undefined | void
+
+export function useBraintreeHostedFields() {
+  const braintreePromise = useBraintreeClient()
+  const [hostedFields, setHostedFields] = useState<
+    [HostedFields, ThreeDSecure] | [undefined, undefined]
+  >([undefined, undefined])
+
+  useEffect(() => {
+    if (!hostedFields[0] && !teardownPromise) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      ;(async () => {
-        try {
-          const client = await braintreePromise
-
-          resolve(
-            await braintree.hostedFields.create({
-              client,
-              fields: {
-                number: {
-                  container: '#card-number',
-                  // placeholder: '4111 1111 1111 1111',
-                },
-                cvv: {
-                  container: '#cvv',
-                  // placeholder: '123',
-                },
-                expirationDate: {
-                  container: '#expiration-date',
-                  // placeholder: '10/2022',
-                },
-              },
-            }),
-          )
-        } catch (e) {
-          reject(e)
+      braintreePromise.then(async (client) => {
+        if (teardownPromise) {
+          await teardownPromise
+          teardownPromise = undefined
         }
-      })()
-    })
-  }
 
-  return hostedFieldsPromise
-}
+        const threeDSecure = await braintree.threeDSecure.create({ client, version: 2 })
 
-export function useBraintreeHostedFields() {
-  const braintreePromise = useBraintreeClient()
-  return useRef<Promise<HostedFields>>(getLocalPaymentPromise(braintreePromise)).current
+        const hosted = await braintree.hostedFields.create({
+          client,
+          styles: {
+            input: {
+              // change input styles to match
+              // bootstrap styles
+              'font-size': '1rem',
+              color: '#495057',
+              'padding-left': '16px',
+              'padding-right': '16px',
+            },
+          },
+          fields: {
+            number: { container: '#card-number' },
+            cvv: { container: '#cvv' },
+            expirationDate: { container: '#expiration-date' },
+            // cardholderName: { container: '#cardholder-name' },
+            // postalCode: { container: '#postal-code' },
+          },
+        })
+
+        setHostedFields([hosted, threeDSecure])
+      })
+    }
+
+    return () => {
+      teardownPromise = hostedFields[0]?.teardown()
+      hostedFields[1]?.teardown()
+    }
+  }, [])
+
+  return teardownPromise ? [undefined, undefined] : hostedFields
 }

package/hooks/useBraintreePaypal.ts

@@ -0,0 +1,39 @@
+import braintree, { PayPalCheckout } from 'braintree-web'
+import { useEffect, useState } from 'react'
+import { useBraintreeClient } from './useBraintree'
+
+let teardownPromise: Promise<void> | undefined | void
+
+export function useBraintreePaypal() {
+  const braintreePromise = useBraintreeClient()
+  const [paypalCheckout, setPaypalCheckout] = useState<PayPalCheckout | undefined>(undefined)
+
+  useEffect(() => {
+    if (!paypalCheckout && !teardownPromise) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      braintreePromise.then(async (client) => {
+        if (teardownPromise) {
+          await teardownPromise
+          teardownPromise = undefined
+        }
+
+        const checkout = await braintree.paypalCheckout.create({ client })
+
+        const loaded = await checkout.loadPayPalSDK({
+          debug: true,
+          currency: 'EUR',
+          locale: 'en-US',
+          intent: 'capture',
+          vault: false,
+        })
+        setPaypalCheckout(loaded)
+      })
+    }
+
+    return () => {
+      teardownPromise = paypalCheckout?.teardown()
+    }
+  }, [braintreePromise, paypalCheckout])
+
+  return teardownPromise ? undefined : paypalCheckout
+}

package/methods/braintree/PaymentMethodOptions.tsx

@@ -1,33 +1,252 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { PaymentOptionsProps } from '@graphcommerce/magento-cart-payment-method'
-import { useFormCompose } from '@graphcommerce/react-hook-form'
-import { BraintreePaymentMethodOptionsDocument } from '../../BraintreePaymentMethodOptions.gql'
+import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import { PaymentOptionsProps, useCartLock } from '@graphcommerce/magento-cart-payment-method'
+import { BillingPageDocument } from '@graphcommerce/magento-cart-checkout'
+import { ErrorSnackbar, FormRow, FullPageMessage } from '@graphcommerce/next-ui'
+import {
+  FieldValues,
+  FormProvider,
+  Path,
+  UseControllerProps,
+  useController,
+  useFormCompose,
+} from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { Box, CircularProgress, TextField } from '@mui/material'
+import { HostedFields } from 'braintree-web'
+import { HostedFieldsEvent, HostedFieldsHostedFieldsFieldName } from 'braintree-web/hosted-fields'
+import React, { useEffect, useState } from 'react'
+import {
+  BraintreePaymentMethodOptionsDocument,
+  BraintreePaymentMethodOptionsMutation,
+  BraintreePaymentMethodOptionsMutationVariables,
+} from '../../BraintreePaymentMethodOptions.gql'
 import { useBraintreeHostedFields } from '../../hooks/useBraintreeHostedFields'
+import { isBraintreeError } from '../../utils/isBraintreeError'
+
+const Field = React.forwardRef<any, { ownerState: unknown; as: string }>((props, ref) => {
+  const { ownerState, as, ...rest } = props
+  return <Box {...rest} ref={ref} sx={{ height: 54, width: '100%' }} />
+})
+
+export function BraintreeField<T extends FieldValues>(
+  props: {
+    hostedFields: HostedFields | undefined
+    id: string
+    label: string
+    name: HostedFieldsHostedFieldsFieldName
+  } & Omit<UseControllerProps<T>, 'name' | 'defaultValue'>,
+) {
+  const { hostedFields, id, label, name, control, disabled } = props
+  const scopedName: HostedFieldsHostedFieldsFieldName = name
+
+  const {
+    field: { ref, ...field },
+    fieldState,
+  } = useController({
+    name: name as Path<T>,
+    control,
+    disabled: Boolean(!hostedFields || disabled),
+    // shouldUnregister: true,
+    rules: {
+      validate: () => {
+        console.log('validate')
+        if (!hostedFields) return false
+        const hostedField = hostedFields.getState().fields[name]
+
+        if (hostedField.isEmpty) return i18n._(/* i18n */ 'This field is required')
+        if (!hostedField.isPotentiallyValid) return i18n._(/* i18n */ 'This field is invalid')
+        if (!hostedField.isValid) return i18n._(/* i18n */ 'This field is invalid')
+
+        return true
+      },
+    },
+  })
+
+  const { invalid, error } = fieldState
+
+  const [focused, setFocused] = useState(false)
+  const [shrink, setShrink] = useState(false)
+
+  // Manual ref handling
+  ref({
+    focus: () => {
+      hostedFields?.focus(scopedName)
+      setFocused(true)
+    },
+  })
+
+  useEffect(() => {
+    if (!hostedFields) return () => {}
+    const handleBlur = (event: HostedFieldsEvent) => {
+      if (event.emittedBy !== name) return
+      setShrink(!event.fields[name].isEmpty)
+      setFocused(false)
+    }
+    const handleFocus = (event: HostedFieldsEvent) => {
+      if (event.emittedBy !== name) return
+      setShrink(true)
+      setFocused(true)
+    }
+    const handleNotEmpty = (event: HostedFieldsEvent) => {
+      if (event.emittedBy !== name) return
+      setShrink(true)
+    }
+
+    try {
+      hostedFields.on('focus', handleFocus)
+      hostedFields.on('blur', handleBlur)
+      hostedFields.on('notEmpty', handleNotEmpty)
+    } catch {
+      // swallow error, sometimes due to timing issue this gets called after the hostedFields.teardown() is called.
+    }
+
+    return () => {
+      hostedFields.off('focus', handleFocus)
+      hostedFields.off('blur', handleBlur)
+      hostedFields.off('blur', handleNotEmpty)
+    }
+  }, [hostedFields, name])
+
+  return (
+    <TextField
+      id={id}
+      label={label}
+      error={invalid}
+      helperText={error?.message}
+      focused={focused}
+      InputProps={{ slots: { input: Field } }}
+      InputLabelProps={{ shrink }}
+      {...field}
+    />
+  )
+}
 
 /** It sets the selected payment method on the cart. */
 export function PaymentMethodOptions(props: PaymentOptionsProps) {
   const { code, step, Container } = props
-  const hosted = useBraintreeHostedFields()
+  const [hostedFields, threeDSecure] = useBraintreeHostedFields()
+  const cart = useCartQuery(BillingPageDocument)
+  const [lockstate, lock, unlock] = useCartLock()
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    if (!lockstate.justLocked && lockstate.locked) unlock({})
+  }, [lockstate.justLocked, lockstate.locked, unlock])
+
+  useEffect(() => {
+    if (!threeDSecure) return
+
+    threeDSecure.on('lookup-complete', (data, next) => {
+      console.log('lookup-complete', data)
+      next?.()
+    })
+    threeDSecure.on('customer-canceled', (data, next) => {
+      console.log('customer-canceled', data)
+      next?.()
+    })
+  }, [threeDSecure])
 
   /**
    * In the this folder you'll also find a PaymentMethodOptionsNoop.graphql document that is
    * imported here and used as the basis for the form below.
    */
-  const form = useFormGqlMutationCart(BraintreePaymentMethodOptionsDocument, {
+  const form = useFormGqlMutationCart<
+    BraintreePaymentMethodOptionsMutation,
+    BraintreePaymentMethodOptionsMutationVariables & {
+      [K in HostedFieldsHostedFieldsFieldName]?: string
+    }
+  >(BraintreePaymentMethodOptionsDocument, {
     defaultValues: { code },
+    experimental_useV2: true,
     onBeforeSubmit: async (variables) => {
+      if (!hostedFields) throw new Error('Hosted fields not available')
+      if (!threeDSecure) throw new Error('3D Secure not available')
+      if (!cart.data?.cart?.prices?.grand_total?.value) throw Error('Cart total not found')
+
       try {
-        const bla = await hosted
-        const { nonce } = await bla.tokenize()
-        return {
-          ...variables,
-          deviceData: '',
-          nonce,
-          isTokenEnabler: false,
+        const tokenResult = await hostedFields.tokenize()
+
+        const verifyResult = await threeDSecure.verifyCard({
+          nonce: tokenResult.nonce,
+          amount: String(cart.data.cart.prices.grand_total.value),
+          bin: tokenResult.details.bin,
+          collectDeviceData: true,
+          billingAddress: {
+            givenName: cart.data.cart.billing_address?.firstname,
+            surname: cart.data.cart.billing_address?.lastname,
+            countryCodeAlpha2: cart.data.cart.billing_address?.country?.code,
+            streetAddress: cart.data.cart.billing_address?.street?.join(' '),
+            postalCode: cart.data.cart.billing_address?.postcode ?? undefined,
+            phoneNumber: cart.data.cart.billing_address?.telephone ?? undefined,
+            region: cart.data.cart.billing_address?.region?.code ?? undefined,
+            locality: cart.data.cart.billing_address?.city,
+          },
+          email: cart.data.cart.email ?? undefined,
+          mobilePhoneNumber: cart.data.cart.billing_address?.telephone ?? undefined,
+        })
+
+        if (!verifyResult.threeDSecureInfo.liabilityShifted) {
+          throw Error('Liability not shifted')
         }
+
+        await lock({ method: code })
+        return { ...variables, deviceData: '', nonce: verifyResult.nonce, isTokenEnabler: false }
       } catch (e) {
-        console.error(e)
+        if (isBraintreeError(e)) {
+          switch (e.code) {
+            case 'HOSTED_FIELDS_FIELDS_EMPTY':
+              // occurs when none of the fields are filled in
+              console.error('All fields are empty! Please fill out the form.')
+              break
+            case 'HOSTED_FIELDS_FIELDS_INVALID':
+              // occurs when certain fields do not pass client side validation
+              // console.error('Some fields are invalid:', tokenizeErr.details.invalidFieldKeys)
+
+              // you can also programtically access the field containers for the invalid fields
+              // e.details.invalidFields.forEach((fieldContainer) => {
+              //   form.setError(fieldContainer.fieldKey, {})
+              //   fieldContainer.className = 'invalid'
+              // })
+              break
+            case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':
+              // occurs when:
+              //   * the client token used for client authorization was generated
+              //     with a customer ID and the fail on duplicate payment method
+              //     option is set to true
+              //   * the card being tokenized has previously been vaulted (with any customer)
+              // See: https://developers.braintreepayments.com/reference/request/client-token/generate/#options.fail_on_duplicate_payment_method
+              console.error('This payment method already exists in your vault.')
+              break
+            case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':
+              // occurs when:
+              //   * the client token used for client authorization was generated
+              //     with a customer ID and the verify card option is set to true
+              //     and you have credit card verification turned on in the Braintree
+              //     control panel
+              //   * the cvv does not pass verfication (https://developers.braintreepayments.com/reference/general/testing/#avs-and-cvv/cid-responses)
+              // See: https://developers.braintreepayments.com/reference/request/client-token/generate/#options.verify_card
+              console.error('CVV did not pass verification')
+              break
+            case 'HOSTED_FIELDS_FAILED_TOKENIZATION':
+              // occurs for any other tokenization error on the server
+              console.error('Tokenization failed server side. Is the card valid?')
+              break
+            case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':
+              // occurs when the Braintree gateway cannot be contacted
+              console.error('Network error occurred when tokenizing.')
+              break
+            default:
+              console.error('Something bad happened!', e)
+          }
+        } else if (e instanceof Error) {
+          form.setError('nonce', {
+            message:
+              'Could not verify your Credit Card, please check your information and try again.',
+          })
+        }
+        await unlock({})
         throw e
       }
     },
@@ -39,20 +258,60 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
   /** To use an external Pay button we register the current form to be handled there as well. */
   useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
 
+  const nonce = form.getFieldState('nonce')
+
+  const loading = !hostedFields
+
   /** This is the form that the user can fill in. In this case we don't wat the user to fill in anything. */
   return (
-    <Container>
+    <FormProvider {...form}>
       <form onSubmit={submit}>
+        <ErrorSnackbar open={nonce.invalid} onClose={() => form.clearErrors('nonce')}>
+          <>{nonce.error?.message}</>
+        </ErrorSnackbar>
+
         <input type='hidden' {...register('code')} />
-        <label htmlFor='card-number'>Card Number</label>
-        <div id='card-number' />
 
-        <label htmlFor='cvv'>CVV</label>
-        <div id='cvv' />
+        {loading && (
+          <FullPageMessage
+            icon={<CircularProgress />}
+            title={<Trans id='Loading' />}
+            disableMargin
+            sx={{ mb: 0 }}
+          />
+        )}
+
+        <Box sx={[loading && { display: 'none' }]}>
+          <Container>
+            <FormRow sx={[]}>
+              <BraintreeField
+                control={form.control}
+                name='number'
+                hostedFields={hostedFields}
+                id='card-number'
+                label='Card Number'
+              />
+            </FormRow>
 
-        <label htmlFor='expiration-date'>Expiration Date</label>
-        <div id='expiration-date' />
+            <FormRow>
+              <BraintreeField
+                control={form.control}
+                name='expirationDate'
+                hostedFields={hostedFields}
+                id='expiration-date'
+                label='Expiration Date (MM/YYYY)'
+              />
+              <BraintreeField
+                hostedFields={hostedFields}
+                id='cvv'
+                control={form.control}
+                name='cvv'
+                label='CVV'
+              />
+            </FormRow>
+          </Container>
+        </Box>
       </form>
-    </Container>
+    </FormProvider>
   )
 }

package/methods/braintree/index.ts

@@ -1,10 +1,8 @@
-import {
-  PaymentMethodPlaceOrderNoop,
-  PaymentModule,
-} from '@graphcommerce/magento-cart-payment-method'
+import type { PaymentModule } from '@graphcommerce/magento-cart-payment-method'
+import { PaymentMethodPlaceOrderNoop } from '@graphcommerce/magento-cart-payment-method/PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop'
 import { PaymentMethodOptions } from './PaymentMethodOptions'
 
-export const braintree = {
+export const braintree: PaymentModule = {
   PaymentOptions: PaymentMethodOptions,
   PaymentPlaceOrder: PaymentMethodPlaceOrderNoop,
-} as PaymentModule
+}

package/methods/braintree_local_payments/BraintreeLocalPaymentsCart.graphql

@@ -19,8 +19,7 @@ query BraintreeLocalPaymentsCart($cartId: String!) {
     }
     prices {
       grand_total {
-        currency
-        value
+        ...Money
       }
     }
   }

package/methods/braintree_local_payments/PaymentMethodOptions.tsx

@@ -48,11 +48,10 @@ function validateAndBuildStartPaymentParams(cartData: BraintreeLocalPaymentsCart
 
   return {
     amount: amount.toString(),
-
     currencyCode,
     shippingAddressRequired: false,
     email: cart?.email ?? '',
-    phone,
+    phone: phone ?? '',
     givenName,
     surname,
     address: { streetAddress, extendedAddress, locality, postalCode, region, countryCode },
@@ -98,7 +97,7 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
       if (!selectedMethod?.code) throw Error('Selected method not found')
       const options = validateAndBuildStartPaymentParams(cartData)
 
-      lock({ payment_id: null, method: selectedMethod?.code })
+      await lock({ payment_id: null, method: selectedMethod?.code })
 
       const localPayment = await localPaymentPromise
       try {
@@ -109,8 +108,8 @@ export function PaymentMethodOptions(props: PaymentOptionsProps) {
             buttonText: 'Return to website',
             url: window.location.href,
           },
-          onPaymentStart: ({ paymentId }, next) => {
-            lock({ payment_id: paymentId, method: selectedMethod?.code })
+          onPaymentStart: async ({ paymentId }, next) => {
+            await lock({ payment_id: paymentId, method: selectedMethod?.code })
             next()
           },
         })

package/methods/braintree_local_payments/index.ts

@@ -6,9 +6,9 @@ import { PaymentHandler } from './PaymentHandler'
 import { PaymentMethodOptions } from './PaymentMethodOptions'
 import { expandMethods } from './expandMethods'
 
-export const braintree_local_payment = {
+export const braintree_local_payment: PaymentModule = {
   PaymentOptions: PaymentMethodOptions,
   PaymentPlaceOrder: PaymentMethodPlaceOrderNoop,
   PaymentHandler,
   expandMethods,
-} as PaymentModule
+}

package/methods/braintree_paypal/PaymentMethodOptions.tsx

@@ -0,0 +1,90 @@
+import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
+import {
+  PaymentOptionsProps,
+  usePaymentMethodContext,
+} from '@graphcommerce/magento-cart-payment-method'
+import { useFormCompose } from '@graphcommerce/react-hook-form'
+// import { PayPalCheckoutCreatePaymentOptions } from 'braintree-web/paypal-checkout'
+import type { FlowType, Intent } from 'paypal-checkout-components'
+import { useEffect } from 'react'
+import { BraintreePaymentMethodOptionsDocument } from '../../BraintreePaymentMethodOptions.gql'
+import { StartPaymentOptions } from '../../hooks/useBraintree'
+import { useBraintreeCartLock } from '../../hooks/useBraintreeCartLock'
+import { useBraintreePaypal } from '../../hooks/useBraintreePaypal'
+import { isBraintreeError } from '../../utils/isBraintreeError'
+import { BraintreeLocalPaymentsCartDocument } from '../braintree_local_payments/BraintreeLocalPaymentsCart.gql'
+
+export function PaymentMethodOptions(props: PaymentOptionsProps) {
+  const paypal = useBraintreePaypal()
+
+  useEffect(() => {})
+
+  const { code, step, child } = props
+  const { data: cartData } = useCartQuery(BraintreeLocalPaymentsCartDocument)
+  const [lockState, lock, unlock] = useBraintreeCartLock()
+  const { selectedMethod } = usePaymentMethodContext()
+
+  useEffect(() => {
+    if (lockState.locked && !lockState.justLocked) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      unlock({ payment_id: null })
+    }
+  }, [lockState.justLocked, lockState.locked, unlock])
+
+  const form = useFormGqlMutationCart(BraintreePaymentMethodOptionsDocument, {
+    defaultValues: { code },
+    onBeforeSubmit: async () => {
+      if (!cartData?.cart?.id) throw Error('Cart id is missing')
+      if (!cartData.cart.prices?.grand_total?.value) throw Error("Cart doesn't have a total")
+      if (!cartData.cart.prices.grand_total.currency) throw Error("Cart doesn't have a total")
+      if (!selectedMethod?.code) throw Error('Selected method not found')
+      if (!paypal) throw Error('Paypal not loaded')
+
+      await lock({ payment_id: null, method: selectedMethod?.code })
+
+      const address = cartData.cart.shipping_addresses?.[0]
+
+      console.log('hoi')
+
+      const nonce = await paypal.createPayment({
+        flow: 'checkout' as FlowType, // Required
+        amount: cartData.cart.prices.grand_total.value,
+        currency: cartData.cart.prices.grand_total.currency,
+        intent: 'authorize' as Intent,
+
+        enableShippingAddress: true,
+        shippingAddressEditable: false,
+        shippingAddressOverride: {
+          recipientName: `${address?.firstname} ${address?.lastname}`,
+          line1: address?.street.join(' ') ?? '',
+          // line2: 'Unit 1',
+          city: address?.city ?? '',
+          countryCode: address?.country.code ?? '',
+          postalCode: address?.postcode ?? '',
+          state: address?.region?.code ?? '',
+          phone: address?.telephone ?? '',
+        },
+      })
+
+      try {
+        return { cartId: cartData?.cart?.id, deviceData: '', isTokenEnabler: false, nonce, code }
+      } catch (e) {
+        if (isBraintreeError(e)) await unlock({ payment_id: null })
+        throw e
+      }
+    },
+  })
+
+  const { handleSubmit, register } = form
+  const submit = handleSubmit(() => {})
+
+  /** To use an external Pay button we register the current form to be handled there as well. */
+  useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
+
+  /** This is the form that the user can fill in. In this case we don't wat the user to fill in anything. */
+  return (
+    <form onSubmit={submit}>
+      <input type='hidden' {...register('code')} />
+    </form>
+  )
+}

package/methods/braintree_paypal/index.ts

@@ -0,0 +1,10 @@
+import {
+  PaymentMethodPlaceOrderNoop,
+  PaymentModule,
+} from '@graphcommerce/magento-cart-payment-method'
+import { PaymentMethodOptions } from './PaymentMethodOptions'
+
+export const braintree_paypal: PaymentModule = {
+  PaymentOptions: PaymentMethodOptions,
+  PaymentPlaceOrder: PaymentMethodPlaceOrderNoop,
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-payment-braintree",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.2",
+  "version": "8.1.0-canary.20",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,19 +18,19 @@
     "braintree-web": "^3.99.0"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/graphql": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.2",
-    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.2",
-    "@graphcommerce/magento-product": "^8.1.0-canary.2",
-    "@graphcommerce/magento-product-configurable": "^8.1.0-canary.2",
-    "@graphcommerce/magento-store": "^8.1.0-canary.2",
-    "@graphcommerce/next-ui": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.20",
+    "@graphcommerce/graphql": "^8.1.0-canary.20",
+    "@graphcommerce/image": "^8.1.0-canary.20",
+    "@graphcommerce/magento-cart": "^8.1.0-canary.20",
+    "@graphcommerce/magento-cart-payment-method": "^8.1.0-canary.20",
+    "@graphcommerce/magento-cart-shipping-address": "^8.1.0-canary.20",
+    "@graphcommerce/magento-product": "^8.1.0-canary.20",
+    "@graphcommerce/magento-product-configurable": "^8.1.0-canary.20",
+    "@graphcommerce/magento-store": "^8.1.0-canary.20",
+    "@graphcommerce/next-ui": "^8.1.0-canary.20",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.20",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.20",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.20",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/AddBraintreeMethods.tsx

@@ -2,13 +2,24 @@ import { PaymentMethodContextProviderProps } from '@graphcommerce/magento-cart-p
 import type { PluginProps } from '@graphcommerce/next-config'
 import { braintree } from '../methods/braintree'
 import { braintree_local_payment } from '../methods/braintree_local_payments'
+import { braintree_paypal } from '../methods/braintree_paypal'
 
 export const component = 'PaymentMethodContextProvider'
 export const exported = '@graphcommerce/magento-cart-payment-method'
 
 function AddBrainTreeMethods(props: PluginProps<PaymentMethodContextProviderProps>) {
   const { modules, Prev, ...rest } = props
-  return <Prev {...rest} modules={{ ...modules, braintree, braintree_local_payment }} />
+  return (
+    <Prev
+      {...rest}
+      modules={{
+        ...modules,
+        braintree,
+        braintree_local_payment,
+        // braintree_paypal,
+      }}
+    />
+  )
 }
 
 export const Plugin = AddBrainTreeMethods