EscrowCreate payload throws `ReferenceError: require is not defined at ... require('five-bells-condition')`

Greetings and Salutations, I am trying to adapt my HTML page to XUMM's SignIn and Payment payload to EscrowCreateby adding the following code from Send a Conditionally-Held Escrow. SignIn works and Payment works. However, following code throws ReferenceError: require is not defined at document.getElementById.onclick (*refers to require('five-bells-condition') line*). Is it possible to use XUMM app to EscrowCreate`?

            const { sdk } = await xumm.state()
            const cc = require('five-bells-condition')
            const crypto = require('crypto')
            const preimageData = crypto.randomBytes(32)
            const fulfillment = new cc.PreimageSha256()
            fulfillment.setPreimage(preimageData)
            const condition = fulfillment.getConditionBinary().toString('hex').toUpperCase()
            console.log('Condition:', condition)
            const fulfillment_hex = fulfillment.serializeBinary().toString('hex').toUpperCase()
            console.log('Fulfillment:', fulfillment_hex)
            
            const rippleOffset = 946684800
            const cancelAfter = Math.floor(Date.now() / 1000) + (60) - rippleOffset // cancel after 60 sec
            console.log(cancelAfter)

            const payload = await sdk.payload.create({
                TransactionType: 'EscrowCreate',
                Destination: 'rXRPaddress...................................',
                Amount: String(3_000),
                Condition: 'condition',
                CancelAfter: 'cancelAfter',
            })

            if (payload.pushed) {
                alert('Payload `' + payload.uuid + '` pushed to your phone.')
            } else {
                alert('Payload not pushed, opening payload...')
                window.open(payload.next.always)
            }
        } ```