Vue SDK

<template>
  <div class="payment-container">
    <PayveButton
      :amount="amount"
      :currency="currency"
      :loading="loading"
      @success="handleSuccess"
      @error="handleError"
    >
      立即支付
    </PayveButton>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { PayveButton, usePayve } from '@payve/vue-sdk'
 
const amount = ref('99.99')
const currency = ref('USDT')
 
const { createPayment, loading } = usePayve({
  apiKey: 'pk_live_your_api_key',
  environment: 'production',
  locale: 'zh'
})
 
const handleSuccess = (result) => {
  console.log('支付成功:', result)
  // 处理支付成功逻辑
}
 
const handleError = (error) => {
  console.error('支付失败:', error)
  // 处理支付失败逻辑
}
</script>

<template>
  <div class="checkout-page">
    <PayveForm
      v-model:amount="orderAmount"
      v-model:currency="selectedCurrency"
      :metadata="orderMetadata"
      @payment-success="onPaymentSuccess"
      @payment-error="onPaymentError"
    />
  </div>
</template>
 
<script>
import { PayveForm } from '@payve/vue-sdk'
 
export default {
  name: 'CheckoutPage',
  components: {
    PayveForm
  },
  data() {
    return {
      orderAmount: '100.00',
      selectedCurrency: 'USDT',
      orderMetadata: {
        orderId: 'ORDER_123',
        userId: 'user_456'
      }
    }
  },
  methods: {
    onPaymentSuccess(result) {
      this.$router.push('/success')
    },
    onPaymentError(error) {
      this.$notify.error('支付失败: ' + error.message)
    }
  }
}
</script>

<template>
  <div>
    <button @click="handlePayment" :disabled="loading">
      {{ loading ? '处理中...' : '立即支付' }}
    </button>
    <div ref="paymentContainer" v-show="showPayment"></div>
  </div>
</template>
 
<script>
import Payve from '@payve/sdk'
 
export default {
  data() {
    return {
      payve: null,
      loading: false,
      showPayment: false
    }
  },
  async mounted() {
    this.payve = new Payve({
      apiKey: 'pk_live_your_api_key',
      environment: 'production',
      currency: 'USDT',
      network: 'TRON',
      locale: 'zh'
    })
  },
  methods: {
    async handlePayment() {
      this.loading = true
      
      try {
        const payment = await this.payve.createPayment({
          amount: '99.99',
          description: '商品购买'
        })
        
        this.showPayment = true
        
        this.payve.mount(this.$refs.paymentContainer, {
          payment: payment,
          onSuccess: this.handleSuccess,
          onError: this.handleError
        })
      } catch (error) {
        console.error('创建支付失败:', error)
      } finally {
        this.loading = false
      }
    },
    handleSuccess(result) {
      console.log('支付成功:', result)
      this.$emit('payment-success', result)
    },
    handleError(error) {
      console.error('支付失败:', error)
      this.$emit('payment-error', error)
    }
  }
}
</script>

<!-- PayvePayment.vue -->
<template>
  <div class="payve-payment">
    <button
      @click="initPayment"
      :disabled="loading"
      class="pay-button"
    >
      <slot name="button-text">
        {{ loading ? '处理中...' : '立即支付' }}
      </slot>
    </button>
    
    <div
      ref="paymentContainer"
      v-show="paymentVisible"
      class="payment-container"
    ></div>
  </div>
</template>
 
<script>
import Payve from '@payve/sdk'
 
export default {
  name: 'PayvePayment',
  props: {
    amount: {
      type: [String, Number],
      required: true
    },
    currency: {
      type: String,
      default: 'USDT'
    },
    network: {
      type: String,
      default: 'TRON'
    },
    description: String,
    metadata: Object,
    apiKey: {
      type: String,
      required: true
    },
    environment: {
      type: String,
      default: 'production'
    }
  },
  emits: ['success', 'error', 'cancel', 'expire'],
  data() {
    return {
      payve: null,
      loading: false,
      paymentVisible: false
    }
  },
  mounted() {
    this.initPayveSDK()
  },
  methods: {
    initPayveSDK() {
      this.payve = new Payve({
        apiKey: this.apiKey,
        environment: this.environment,
        currency: this.currency,
        network: this.network,
        locale: 'zh'
      })
    },
    async initPayment() {
      this.loading = true
      
      try {
        const payment = await this.payve.createPayment({
          amount: this.amount.toString(),
          currency: this.currency,
          network: this.network,
          description: this.description,
          metadata: this.metadata
        })
        
        this.paymentVisible = true
        
        this.payve.mount(this.$refs.paymentContainer, {
          payment: payment,
          onSuccess: this.handleSuccess,
          onError: this.handleError,
          onCancel: this.handleCancel,
          onExpire: this.handleExpire
        })
      } catch (error) {
        this.handleError(error)
      } finally {
        this.loading = false
      }
    },
    handleSuccess(result) {
      this.$emit('success', result)
      this.paymentVisible = false
    },
    handleError(error) {
      this.$emit('error', error)
      this.paymentVisible = false
    },
    handleCancel() {
      this.$emit('cancel')
      this.paymentVisible = false
    },
    handleExpire() {
      this.$emit('expire')
      this.paymentVisible = false
    }
  }
}
</script>
 
<style scoped>
.payve-payment {
  /* 添加您的样式 */
}
 
.pay-button {
  /* 按钮样式 */
}
 
.payment-container {
  margin-top: 1rem;
  /* 支付容器样式 */
}
</style>

<template>
  <div>
    <h1>商品购买</h1>
    <PayvePayment
      :amount="99.99"
      currency="USDT"
      network="TRON"
      description="高级会员订阅"
      :metadata="{ userId: 'user_123' }"
      :api-key="apiKey"
      environment="production"
      @success="handlePaymentSuccess"
      @error="handlePaymentError"
    >
      <template #button-text>购买会员</template>
    </PayvePayment>
  </div>
</template>
 
<script>
import PayvePayment from './components/PayvePayment.vue'
 
export default {
  components: {
    PayvePayment
  },
  data() {
    return {
      apiKey: 'pk_live_your_api_key'
    }
  },
  methods: {
    handlePaymentSuccess(result) {
      this.$router.push('/success')
    },
    handlePaymentError(error) {
      this.$notify.error(`支付失败: ${error.message}`)
    }
  }
}
</script>