import { Charge } from '@boltpay/bolt-js'
import { useState } from 'react'

function CheckoutButton({ checkoutUrl }: { checkoutUrl: string }) {
  const [loading, setLoading] = useState(false)

  const handlePayment = async () => {
    setLoading(true)
    const transaction = await Charge.checkout(checkoutUrl)
    console.log('Payment completed:', transaction.reference)
    // Redirect to success page or update UI
    setLoading(false)
  }

  return (
    
      {loading ? 'Processing...' : 'Pay with Bolt'}
    
  )
}

  
    {{ loading ? 'Processing...' : 'Pay with Bolt' }}
  

import { ref } from 'vue'
import { Charge } from '@boltpay/bolt-js'

const props = defineProps(['checkoutUrl'])
const loading = ref(false)

const handlePayment = async () => {
  loading.value = true
  const transaction = await Charge.checkout(props.checkoutUrl)
  console.log('Payment completed:', transaction.reference)
  loading.value = false
}

import { Charge } from '@boltpay/bolt-js'

// Call this when user wants to buy something
async function buyItem(checkoutUrl: string) {
  const transaction = await Charge.checkout(checkoutUrl)
  console.log('Payment successful!', transaction.reference)

  // Recommended: sync your user object by polling your backend
  // since a transaction webhook will have hit your backend server.
  await syncUserData()
}

// Example usage in your app
document.getElementById('buy-button')?.addEventListener('click', () => {
  buyItem('https://your-checkout-link-here.com')
})