Payment Confirmation

Review screen before submitting a payment. Shows invoice details, selected payment method, and payment amount.

---

Usage

const confirmation = client.components.paymentConfirmation({
  containerId: 'confirmation',
  invoiceId: 'inv_xxx',
  paymentMethodId: 'pm_xxx',
  customerId: 'cus_xxx',
  onPaymentSuccess: (payment) => {
    console.log('Payment successful:', payment.id);
  },
  onPaymentError: (error) => {
    console.error('Payment failed:', error);
  },
  onBack: () => {
    console.log('Back clicked');
  },
});

---

Configuration

PaymentConfirmationConfig

Property	Type	Required	Description
containerId	string	Yes	ID of the container element
invoiceId	string	Yes	Invoice being paid
paymentMethodId	string	Yes	Selected payment method
customerId	string	Yes	Customer making the payment
theme	ThemeConfig	No	Custom theme configuration
onConfirm	() => void	No	Called when payment is initiated
onBack	() => void	No	Called when "Back" is clicked
onPaymentSuccess	(payment: Payment) => void	No	Called when payment succeeds
onPaymentError	(error: Error) => void	No	Called when payment fails
onError	(error: Error) => void	No	Called on other errors

---

Payment Object

The onPaymentSuccess callback receives a Payment object:

interface Payment {
  id: string;
  status: 'PENDING' | 'COMPLETED' | 'FAILED';
  amount: number;
  currency: string;
  invoice_id: string;
  payment_method_id: string;
  created_at: string;
  // ... additional fields
}

---

Example

<div id="confirmation"></div>

<script type="module">
  import { AlternativeClient } from '@getalternative/partner-sdk';

  const client = new AlternativeClient({
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
  });

  // Get IDs from URL or state
  const params = new URLSearchParams(window.location.search);

  const confirm = client.components.paymentConfirmation({
    containerId: 'confirmation',
    invoiceId: params.get('invoice'),
    paymentMethodId: params.get('payment_method'),
    customerId: params.get('customer'),
    onPaymentSuccess: (payment) => {
      // Redirect to success page
      window.location.href = `/success?payment=${payment.id}`;
    },
    onPaymentError: (error) => {
      // Show error or retry
      alert('Payment failed: ' + error.message);
    },
    onBack: () => {
      window.history.back();
    },
  });
</script>

---

Display

The confirmation screen shows:

• Invoice summary (number, amount, due date)

• Selected payment method details

• Total amount to be charged

• "Pay Now" button to submit payment

• "Back" button to return to previous screen