@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', // or 'adyen', 'delayed-payment'
  returnUrl: 'https://yourapp.com/success',
  lineItems: [
    {
      name: 'Product Name',
      unitPrice: 99.99,
      quantity: 1
    }
  ]
})

// Get payment status (use { sync: true } after redirect e.g. Vipps to fetch latest from provider)
// Pass redirectResult from the return URL so Adyen can fetch accurate status (e.g. canceled)
const params = new URLSearchParams(window.location.search)
const redirectResult = params.get('redirectResult') ?? params.get('sessionResult')
const status = await client.getPayment(payment.paymentId, { sync: true, redirectResult: redirectResult ?? undefined })
// status.paymentMethod (e.g. "vipps"), status.providerStatus (e.g. "CANCELLED") when known

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

// Discover available payment methods for a specific context
const paymentMethods = await client.getPaymentMethods({
  currency: 'EUR',
  amount: 100,
  churchId: 'your-church-uuid',
  isCompany: false
})

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>

Delayed Payment Component

For manual payment processing via invoice or bank transfer:

<template>
  <div v-if="!paymentSuccess">
    <DelayedPayment
      :payment-id="payment.paymentId"
      :client-data="payment.clientData"
      :amount="99.99"
      currency="EUR"
      :tenant-id="tenantId"
      @success="handleSuccess"
      @error="handleError"
      @ready="handleReady"
    />
  </div>
  <div v-else>
    <h2>✅ Payment Confirmed!</h2>
    <p>{{ successMessage }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PaymentClient } from '@bcc-code/payment-client'
import { DelayedPayment } 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: 'delayed-payment'
})

const tenantId = 'your-tenant-uuid'
const paymentSuccess = ref(false)
const successMessage = ref('')

const handleSuccess = (result: any) => {
  console.log('Payment confirmed:', result)
  paymentSuccess.value = true
  successMessage.value = result.message
  
  // Payment will be processed manually
  // result contains: { status, message, paymentId, transactionNumber }
}

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

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

How it works:

1. User reviews invoice details
2. User clicks "Confirm Payment"
3. Component makes API call in-place (no redirect!)
4. Success event emitted with payment details
5. Your app shows success message

No redirect, no return URL handling needed! The delayed payment component now works exactly like Stripe and Adyen components - simple event-driven API.

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

DelayedPayment Props

• paymentId (string, required) - Payment ID from CreatePaymentResponse
• clientData (string, required) - Client data from CreatePaymentResponse
• amount (number, required) - Payment amount
• currency (string, required) - Currency code (EUR, USD, etc.)
• tenantId (string, optional) - Tenant ID for API calls

Component Events

All components emit the same events for consistency:

• @success - Payment completed successfully
  • Stripe/Adyen: Payment authorized/captured
  • Delayed Payment: Invoice confirmation completed
• @error - Payment error occurred
• @ready - Payment form is ready
• @submit - Payment submission started (fired before processing)
• @additionalDetails - Additional details required (Adyen only, for 3D Secure)

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 only Delayed Payment component
import { DelayedPayment } from '@bcc-code/payment-client/components'

// Import all
import { StripePayment, AdyenPayment, DelayedPayment } 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,
  DelayedPaymentProps
} 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"
    />
    <DelayedPayment
      v-else-if="payment && provider === 'delayed-payment'"
      :payment-id="payment.paymentId"
      :client-data="payment.clientData"
      :amount="amount"
      :currency="currency"
      :tenant-id="tenantId"
      @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, DelayedPayment } 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', 'delayed-payment'
const tenantId = 'your-tenant-uuid'
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
      // No returnUrl needed for delayed-payment in v2.0+
      // Stripe/Adyen may still use returnUrl for 3D Secure redirects
    })
  } 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"]
}