Payment Result

Displays the outcome of a payment attempt (success, error, or processing).

---

Usage

const result = client.components.paymentResult({
  containerId: 'result',
  status: 'success',
  payment: paymentObject,
  onDone: () => {
    console.log('Done clicked');
  },
});

---

Configuration

PaymentResultConfig

Property	Type	Required	Description
containerId	string	Yes	ID of the container element
status	'success' | 'error' | 'processing'	Yes	Payment outcome
payment	Payment	No	Payment details (for success)
error	Error	No	Error details (for error status)
theme	ThemeConfig	No	Custom theme configuration
onDone	() => void	No	Called when "Done" is clicked
onRetry	() => void	No	Called when "Retry" is clicked (errors)

---

Status Types

Success

Shows a success message with payment details.

const result = client.components.paymentResult({
  containerId: 'result',
  status: 'success',
  payment: {
    id: 'pay_xxx',
    amount: 150.00,
    currency: 'USD',
    // ...
  },
  onDone: () => {
    window.location.href = '/dashboard';
  },
});

Error

Shows an error message with retry option.

const result = client.components.paymentResult({
  containerId: 'result',
  status: 'error',
  error: new Error('Card declined'),
  onRetry: () => {
    // Go back to payment method selection
    showPaymentMethods();
  },
  onDone: () => {
    window.location.href = '/dashboard';
  },
});

Processing

Shows a processing indicator for async payments.

const result = client.components.paymentResult({
  containerId: 'result',
  status: 'processing',
  onDone: () => {
    window.location.href = '/dashboard';
  },
});

---

Example

<div id="result"></div>

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

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

  // Get payment result from previous step
  const paymentResult = getPaymentResult();

  const result = client.components.paymentResult({
    containerId: 'result',
    status: paymentResult.success ? 'success' : 'error',
    payment: paymentResult.payment,
    error: paymentResult.error,
    onDone: () => {
      // Return to main application
      window.location.href = '/';
    },
    onRetry: () => {
      // Try again
      window.location.href = '/pay';
    },
  });
</script>

---

Display

Success screen shows:

• Success icon and message

• Payment confirmation number

• Amount paid

• "Done" button

Error screen shows:

• Error icon and message

• Error details

• "Retry" button

• "Done" button

Processing screen shows:

• Loading indicator

• Processing message

• "Done" button (to continue anyway)