Skip to main content
Render your own pay button outside the widget iframe while keeping card fields, validation, and payment processing inside the widget.

​
Overview

Set hidePaymentButton: true to hide the in-iframe Pay and Upsell buttons. Call submitPayment() or submitUpsell() from the host page when the user clicks your custom button. Apple Pay and Google Pay still render in host containers via applePayContainerId / googlePayContainerId.

​
Configuration

{
  hidePaymentButton: true,
  productId: YOUR_PRODUCT_ID,
  sessionId: 'YOUR_SESSION_ID',
  environment: 'sandbox',
  amount: 29.99,
  customer: { email: 'customer@example.com', country: 'US' },
}

​
Host API

​
Vanilla JavaScript

const widget = PaySightSDK.createWidget({ targetId: 'widget', config, onMessage });

document.getElementById('pay-btn').onclick = () => widget.submitPayment();
MethodUse when
submitPayment()Card checkout (normal form)
submitUpsell()Page 2 upsell / usePreviousPaymentMethod flow
Wait for READY before enabling your button.

​
Layout

┌─────────────────────────┐
│  Widget iframe          │
│  (fields + card, no btn)│
└─────────────────────────┘
│  Your order summary     │
│  Your checkbox          │
┌─────────────────────────┐
│  [ Pay $29.99 ]  host   │
└─────────────────────────┘

​
Events

EventWhen
ERRORValidation or guard failure
PAYMENT_STARTCard payment attempt started
PAYMENT_SUCCESS / PAYMENT_ERRORCheckout or upsell result (payload.mode)
Structured ERROR codes: see Error codes.

​
Subscription opt-out (singlePurchase)

When your product includes an optional subscription, use a host checkbox and update the widget before pay: 
// User declined subscription → one-time purchase only
widget.update({ singlePurchase: true });

// User opted in to subscription
widget.update({ singlePurchase: false });
singlePurchaseMeaning
trueCharge without subscription
falseInclude subscription per product config
omittedDefault product behavior

​
Two-page checkout + upsell

Page 1: hidePaymentButton: true + submitPayment() + savePaymentMethod: true. Page 2: hidePaymentButton: true + submitUpsell() + upsell.initialPaymentSession. See Saved payment & upsell and the external button example.

​
Live demo

Hosted demo: https://payment.paysight.io/demo?preset=external-button