Skip to main content

​
Payment Setup

The payment module is the core of the Headless SDK. It lets you discover which payment methods are configured for a store, tokenize cards, process payments with 3DS, and handle express checkout (Apple Pay, Google Pay).

​
Discover Available Payment Methods

Every store has a payment setup config — a map of payment methods (card, Apple Pay, Google Pay, Klarna, etc.) with their enabled/disabled state, processor IDs, and flow IDs. 
const setup = await tagada.payment.getPaymentSetup(checkoutSessionId);

// Example response:
// {
//   "card": { enabled: true, method: "card", paymentFlowId: "pf_xxx" },
//   "apple_pay:stripe": { enabled: true, method: "apple_pay", express: true, processorId: "proc_xxx" },
//   "google_pay:stripe": { enabled: true, method: "google_pay", express: true },
//   "klarna:stripe": { enabled: true, method: "klarna", processorId: "proc_stripe" },
// }

​
Just the enabled method keys

const methods = await tagada.payment.getEnabledMethods(checkoutSessionId);
// ["card", "apple_pay:stripe", "google_pay:stripe"]

​
Express methods with browser availability

const express = await tagada.payment.getExpressMethods(checkoutSessionId);
// {
//   applePay: { available: true, processorId: "proc_xxx" },
//   googlePay: { available: true },
//   klarna: { available: true, processorId: "proc_stripe" },
// }
The SDK automatically checks ApplePaySession.canMakePayments() in the browser to determine Apple Pay availability.

​
Card Payment Flow

​
1. Tokenize

const { tagadaToken, rawToken } = await tagada.payment.tokenizeCard({
  cardNumber: '4242424242424242',
  expiryDate: '12/28',
  cvc: '123',
  cardholderName: 'Jane Doe',
});

// rawToken.metadata?.auth?.scaRequired tells you if 3DS is needed
tokenizeCard() requires @tagadapay/core-js as an optional peer dependency. Install it: npm install @tagadapay/core-js.

​
2. Pay

const result = await tagada.payment.pay({
  checkoutSessionId: session.id,
  tagadaToken,
});

​
3. Handle result

if (result.payment.status === 'succeeded') {
  // Done — redirect to thank you page
}

if (result.payment.requireAction === 'threeds_auth') {
  // 3DS challenge — show the authentication modal
  // In production, use @tagadapay/core-js useThreeds() to handle this
}

if (result.payment.requireAction === 'redirect') {
  // APM redirect (Klarna, iDEAL, etc.)
  window.location.href = result.payment.requireActionData.redirectUrl;
}

​
Express Checkout

​
Apple Pay

const result = await tagada.payment.processApplePay({
  checkoutSessionId: session.id,
  applePayToken: applePayEvent.payment.token,
});

​
Google Pay

const result = await tagada.payment.processGooglePay({
  checkoutSessionId: session.id,
  googlePayToken: paymentData.paymentMethodData.tokenizationData.token,
});

​
Redirect APMs (Klarna, iDEAL, etc.)

const result = await tagada.payment.processApm({
  checkoutSessionId: session.id,
  paymentMethod: 'klarna',
  processorId: 'proc_stripe',
});

if (result.payment.requireAction === 'redirect') {
  window.location.href = result.payment.requireActionData.redirectUrl;
}

​
Payment Polling

After 3DS or redirect, poll for the final payment status: 
const finalStatus = await tagada.payment.pollPaymentStatus(paymentId, {
  intervalMs: 1500,
  timeoutMs: 60000,
});

if (finalStatus.status === 'succeeded') {
  // Payment confirmed
}

​
Low-Level API

For advanced use cases, you can create instruments and process payments separately: 
// Create a reusable payment instrument
const { paymentInstrument } = await tagada.payment.createInstrument({
  tagadaToken,
  storeId: 'store_xxx',
  customerData: { email: 'jane@example.com' },
});

// Create 3DS session
const threeds = await tagada.payment.create3dsSession({
  paymentInstrumentId: paymentInstrument.id,
  sessionData: { sessionId: 'bt_session_xyz' },
});

// Process with instrument directly
const result = await tagada.payment.payDirect({
  checkoutSessionId: session.id,
  paymentInstrumentId: paymentInstrument.id,
  threedsSessionId: threeds.id,
});
Need even more control? For instrument-level management, MIT (merchant-initiated) charges, auth+capture flows, or mobile app integrations, see the Low-Level Payments guide which uses @tagadapay/core-js + REST directly.