@bcc-code/payment-client

Client SDK for BCC Payment Orchestrator API with Vue 3 payment components.

Installation

pnpm add @bcc-code/payment-client
# or
npm install @bcc-code/payment-client

Peer Dependencies

This package requires the following peer dependencies. Install them based on which payment providers you use:

Required:

• vue ^3.0.0

For Stripe payments:

pnpm add @stripe/stripe-js@^3.0.0

For Adyen payments:

pnpm add @adyen/adyen-web@^6.0.0

Install all at once:

pnpm add @bcc-code/payment-client vue@^3.0.0 @stripe/stripe-js@^3.0.0 @adyen/adyen-web@^6.0.0

API Client Usage

import { PaymentClient } from '@bcc-code/payment-client'

const client = new PaymentClient({
  baseUrl: 'http://localhost:3200',
  tenantId: 'your-tenant-uuid',
  getAuthToken: async () => {
    // Implement your BCC Auth0 token retrieval
    return await getBccAuthToken()
  }
})

// Create a payment
const payment = await client.createPayment({
  amount: 99.99,
  currency: 'EUR',
  paymentMethodType: 'stripe',
  returnUrl: 'https://yourapp.com/success',
  lineItems: [
    {
      name: 'Product Name',
      unitPrice: 99.99,
      quantity: 1
    }
  ]
})

// Get payment status
const status = await client.getPayment(payment.paymentId)

// Get receipt
const receipt = await client.getReceipt(payment.paymentId)

Vue Components Usage

The SDK includes pre-built Vue 3 components for Stripe and Adyen payments.

Import CSS (Required for Adyen)

If you're using Adyen payments, import the CSS file:

import '@bcc-code/payment-client/styles/adyen.css'

Stripe Payment Component

<template>
  <StripePayment
    :payment-id="payment.paymentId"
    :client-data="payment.clientData"
    :amount="99.99"
    currency="EUR"
    :publishable-key="stripePublishableKey"
    :return-url="returnUrl"
    @success="handleSuccess"
    @error="handleError"
    @ready="handleReady"
  />
</template>

<script setup lang="ts">
import { PaymentClient } from '@bcc-code/payment-client'
import { StripePayment } from '@bcc-code/payment-client/components'

const paymentClient = new PaymentClient({
  baseUrl: 'http://localhost:3200',
  tenantId: 'your-tenant-uuid',
  getAuthToken: async () => getBccAuthToken()
})

const payment = await paymentClient.createPayment({
  amount: 99.99,
  currency: 'EUR',
  paymentMethodType: 'stripe',
  returnUrl: 'https://yourapp.com/success'
})

const stripePublishableKey = 'pk_test_...' // Your Stripe publishable key
const returnUrl = 'https://yourapp.com/payment/success'

const handleSuccess = (result: any) => {
  console.log('Payment succeeded:', result)
}

const handleError = (error: any) => {
  console.error('Payment error:', error)
}

const handleReady = () => {
  console.log('Payment form ready')
}
</script>

Adyen Payment Component

<template>
  <AdyenPayment
    :payment-id="payment.paymentId"
    :client-data="payment.clientData"
    :client-key="adyenClientKey"
    :environment="payment.environment"
    :amount="99.99"
    currency="EUR"
    @success="handleSuccess"
    @error="handleError"
    @ready="handleReady"
  />
</template>

<script setup lang="ts">
import '@bcc-code/payment-client/styles/adyen.css'
import { PaymentClient } from '@bcc-code/payment-client'
import { AdyenPayment } from '@bcc-code/payment-client/components'

const paymentClient = new PaymentClient({
  baseUrl: 'http://localhost:3200',
  tenantId: 'your-tenant-uuid',
  getAuthToken: async () => getBccAuthToken()
})

const payment = await paymentClient.createPayment({
  amount: 99.99,
  currency: 'EUR',
  paymentMethodType: 'adyen',
  returnUrl: 'https://yourapp.com/success'
})

const adyenClientKey = payment.clientKey || 'test_...' // From payment response

const handleSuccess = (result: any) => {
  console.log('Payment succeeded:', result)
}

const handleError = (error: any) => {
  console.error('Payment error:', error)
}

const handleReady = () => {
  console.log('Payment form ready')
}
</script>

Component Props

StripePayment Props

• paymentId (string, required) - Payment ID from CreatePaymentResponse
• clientData (string, optional) - Client data from CreatePaymentResponse
• clientKey (string, optional) - Client key (alternative to publishableKey)
• amount (number, required) - Payment amount
• currency (string, required) - Currency code (EUR, USD, etc.)
• publishableKey (string, optional) - Stripe publishable key
• appearance (object, optional) - Stripe Elements appearance configuration
• showPayButton (boolean, default: true) - Show payment button
• locale (string, default: 'en') - Locale for Stripe Elements
• loader ('auto' | 'always' | 'never', default: 'auto') - Loading indicator
• returnUrl (string, optional) - Return URL after payment

AdyenPayment Props

• paymentId (string, required) - Payment ID from CreatePaymentResponse
• clientData (string, optional) - Client data from CreatePaymentResponse (contains session data)
• clientKey (string, required) - Adyen client key
• environment (string, optional) - Environment (test/live)
• amount (number, optional) - Payment amount
• currency (string, optional) - Currency code
• paymentData (any, optional) - Additional payment data
• onCancel (function, optional) - Cancel callback

Component Events

Both components emit the following events:

• @success - Payment completed successfully
• @error - Payment error occurred
• @ready - Payment form is ready
• @submit - Payment submitted (Stripe only)
• @additionalDetails - Additional details required (Adyen only)

Tree-shaking

You can import only the components you need:

// Import only Stripe component
import { StripePayment } from '@bcc-code/payment-client/components'

// Import only Adyen component
import { AdyenPayment } from '@bcc-code/payment-client/components'

// Import both
import { StripePayment, AdyenPayment } from '@bcc-code/payment-client/components'

// Note: Components must be imported from the '/components' entry point
// The main entry point only exports the API client and types

TypeScript Types

import type {
  PaymentClient,
  PaymentClientOptions,
  CreatePaymentRequest,
  CreatePaymentResponse,
  PaymentResponse,
  StripePaymentProps,
  AdyenPaymentProps
} from '@bcc-code/payment-client'

Examples

Complete Payment Flow

<template>
  <div>
    <div v-if="loading">Creating payment...</div>
    <div v-else-if="error">{{ error }}</div>
    <StripePayment
      v-else-if="payment && provider === 'stripe'"
      :payment-id="payment.paymentId"
      :client-data="payment.clientData"
      :amount="amount"
      :currency="currency"
      :publishable-key="stripePublishableKey"
      @success="handlePaymentSuccess"
      @error="handlePaymentError"
    />
    <AdyenPayment
      v-else-if="payment && provider === 'adyen'"
      :payment-id="payment.paymentId"
      :client-data="payment.clientData"
      :client-key="payment.clientKey"
      :environment="payment.environment"
      :amount="amount"
      :currency="currency"
      @success="handlePaymentSuccess"
      @error="handlePaymentError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import '@bcc-code/payment-client/styles/adyen.css'
import { PaymentClient } from '@bcc-code/payment-client'
import { StripePayment, AdyenPayment } from '@bcc-code/payment-client/components'
import type { CreatePaymentResponse } from '@bcc-code/payment-client'

const paymentClient = new PaymentClient({
  baseUrl: 'http://localhost:3200',
  tenantId: 'your-tenant-uuid',
  getAuthToken: async () => getBccAuthToken()
})

const amount = 99.99
const currency = 'EUR'
const provider = 'stripe' // or 'adyen'
const loading = ref(false)
const error = ref<string | null>(null)
const payment = ref<CreatePaymentResponse | null>(null)
const stripePublishableKey = 'pk_test_...'

const createPayment = async () => {
  loading.value = true
  error.value = null
  
  try {
    payment.value = await paymentClient.createPayment({
      amount,
      currency,
      paymentMethodType: provider,
      returnUrl: `${window.location.origin}/payment/success`
    })
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to create payment'
  } finally {
    loading.value = false
  }
}

const handlePaymentSuccess = (result: any) => {
  console.log('Payment successful:', result)
  // Redirect or update UI
}

const handlePaymentError = (err: any) => {
  console.error('Payment error:', err)
  error.value = err.message || 'Payment failed'
}

// Create payment on mount
createPayment()
</script>

Troubleshooting

Peer Dependency Warnings

If you see peer dependency warnings, make sure you've installed the required packages:

pnpm add vue@^3.0.0 @stripe/stripe-js@^3.0.0 @adyen/adyen-web@^6.0.0

CSS Not Loading (Adyen)

Make sure you import the Adyen CSS:

import '@bcc-code/payment-client/styles/adyen.css'

Component Not Rendering

1. Ensure Vue 3 is installed and properly configured
2. Check that you've installed the required peer dependencies
3. Verify that clientData or clientKey props are provided correctly
4. Check browser console for errors

TypeScript Errors

If you see TypeScript errors about .vue files, ensure your tsconfig.json includes:

{
  "compilerOptions": {
    "types": ["vite/client"]
  },
  "include": ["**/*.vue"]
}