# Web SDK integration

A complete guide to integrating Peach Orchestration payments into web applications, with per-framework code samples for Vanilla JavaScript, React, Vue, and Angular.

## What this page covers
- A framework switcher (Vanilla JavaScript, React, Vue, Angular) that swaps all code samples
- Ten sections per framework: Prerequisites, Installation, Configuration, Basic integration, Payment methods, Saved cards, Error handling, Customisation, Testing, Troubleshooting
- Getting credentials from the Peach Payments Dashboard (profile ID `pro_xxx`, publishable key `pk_snd_xxx`/`pk_prd_xxx`, merchant API key `snd_xxx`/`prd_xxx`)
- Creating a payment intent on your backend and driving the Payment Element with the returned `client_secret`
- Payment method ordering, wallet configuration (Apple Pay / Google Pay), tabs vs accordion layout
- Saved cards via customer sessions and Setup Intents
- Appearance theming (theme presets, `variables`, and CSS-like `rules`) and dark mode
- Test cards and end-to-end testing guidance

## Key steps / API

Packages: `@juspay/hyper-js` (core) and `@juspay/react-hyper-js` (React components/hooks). The core SDK can also load via CDN (`HyperLoader.js`) or ESM.

Vanilla JavaScript:
```javascript
import { loadHyper } from '@juspay/hyper-js';

const hyper = await loadHyper('pk_test_your_publishable_key', {
  customBackendUrl: 'https://app.sandbox-next.peachpayments.com/api',
});

// clientSecret comes from your server (POST /payments)
const elements = hyper.elements({ clientSecret, appearance: { theme: 'default' } });
const paymentElement = elements.create('payment', { layout: 'tabs' });
paymentElement.mount('#payment-element');

const { error, paymentIntent } = await hyper.confirmPayment({
  elements,
  confirmParams: { return_url: window.location.origin + '/payment-complete' },
  redirect: 'if_required',
});
```

React:
```typescript
import { loadHyper } from '@juspay/hyper-js';
import { HyperElements, PaymentElement, useHyper, useElements } from '@juspay/react-hyper-js';

const hyperPromise = loadHyper('pk_test_...', { customBackendUrl: '...' });

<HyperElements hyper={hyperPromise} options={{ clientSecret, appearance }}>
  <CheckoutForm />
</HyperElements>
```

Other real API surface referenced in the source:
- `hyper.confirmSetup({ elements, confirmParams })` — save a card via a Setup Intent
- `hyper.paymentRequest({ country, currency, total })` + `canMakePayment()` — wallet availability
- `elements.create('payment', { paymentMethodOrder, wallets, layout })` — method ordering (`'card'`, `'apple_pay'`, `'google_pay'`, `'payjustnow'`), wallet toggles (`'auto' | 'never' | 'always'`), and layout (`'tabs'` or `'accordion'`)
- Appearance: `theme` (`'default'`, `'midnight'`, `'charcoal'`, `'soft'`, `'none'`), `labels`, `variables` (colours, typography, spacing, borders, button styling), and `rules` (CSS-like selectors such as `.Input`, `.Tab`, `.AccordionItem`)
- Saved cards: pass `customerSessionClientSecret` alongside `clientSecret` in `hyper.elements(...)`

Sandbox API base is `https://app.sandbox-next.peachpayments.com/api`; production is `https://app.next.peachpayments.com/api`.

## Related
- [Web SDK customisation](/sdk-customization.md): live theme editor for the appearance API described here
- [iOS SDK](/sdk-mobile-ios.md): native iOS equivalent of this integration
- [API Playground](/playground.md): create a payment intent and get a `client_secret`
- [Simple purchase](/flows/simple-purchase.md): the end-to-end payment flow this SDK drives
- [Testing](/docs/testing.md): test cards and sandbox guidance

---

Interactive version: https://playground.peachpayments.com/sdk-web