Payment SDK

What the Payment SDK does

The HighWire Payment SDK 0.7.0 draws the checkout configured for your account into one container: a secure card field with Apple Pay and Google Pay, the card field alone, or a drop-in payment form. Your gateway session decides the layout. Every payment method reports through the same onResult callback.

The HighWire card field collects card details in a cross-origin iframe and encrypts them before sending them to the gateway. Your page receives field state and payment results, rather than card values. Confirm PCI DSS scope and SAQ eligibility for your complete integration with your acquirer or QSA.

Integration flow

1. Await HighWire.init() with your publishable key and gateway origin.
2. Call hw.mount() when the shopper reaches payment. This creates the payment and draws the checkout.
3. Bind checkout.paymentId to the order on your server before enabling payment controls.
4. Show your Pay button only when checkout.requiresSubmit is true, and call checkout.submit({ customerEmail, billingAddress }) from it with the shopper's email, plus the billing address on a drop-in form that uses your Pay button. It pays with the card field, or with a drop-in form that uses your Pay button. Wallets and other drop-in forms use their own buttons.
5. Handle succeeded, declined, and pending through onResult. Fulfill only from authenticated server-side payment status.

Start with the Integration guide, or follow a framework guide:

• Plain HTML: versioned CDN script with integrity verification.
• React / Next.js: pinned CDN loading, TypeScript types, and component cleanup.

Use the API Reference to look up every checkout method, parameter, callback, and return type.

See Drop-in & wallets for layout, Apple Pay setup, and CSP. See Security & server verification for the merchant backend contract. Coming from 0.6.0? Read Upgrading from 0.6.0.

Payment SDK and the Direct API collector

The checkout SDK runs its own device session and attaches the session key to the payments mount() creates. You do not need a separate collector for mount().

If you also charge through the Direct API, load the collector: the same npm package provides it as a separate @highwirepayments/payment-sdk/collect entry, exporting HighWireCollect. It collects browser context and the device-session key without loading checkout code. See Device screening for Direct API charges. The Payment SDK instance no longer returns the key.