Quickstart

// Node.js backend: Create a session for Checkout Drop-in
const crypto = require('crypto');
const fetch = require('node-fetch');
const express = require('express');

const app = express();

// {% step id="credentials-setup" %}
// Store your credentials securely
const CLIENT_ID = process.env.PXP_CLIENT_ID;
const TOKEN_ID = process.env.PXP_TOKEN_ID;
const TOKEN_VALUE = process.env.PXP_TOKEN_VALUE;
// {% /step %}

// {% step id="create-signature-function" %}
// Create the HMAC signature function
// Message = timestamp + requestId + requestPath + requestBody (no separators).
// Put Token ID in the Authorization header only — not in the HMAC message body.
function createHmacSignature(timestamp, requestId, requestPath, requestBody) {
  const message = `${timestamp}${requestId}${requestPath}${requestBody}`;
  const hmac = crypto.createHmac('sha256', TOKEN_VALUE);
  hmac.update(message);
  const signature = hmac.digest('hex').toUpperCase();
  return `PXP-UST1 ${TOKEN_ID}:${timestamp}:${signature}`;
}
// {% /step %}

async function createSession() {
  // Unix seconds — matches web sample Session auth and Android create-session
  const timestamp = Math.floor(Date.now() / 1000).toString();
  const requestId = crypto.randomUUID();
  const requestPath = 'api/v1/sessions';

  // {% step id="build-request-body" %}
  // Build the session request body (minified JSON for the HMAC signature)
  const requestBody = JSON.stringify({
    merchant: 'MERCHANT-1',
    site: 'SITE-1',
    sessionTimeout: 120,
    merchantTransactionId: crypto.randomUUID(),
    transactionMethod: {
      intent: {
        card: 'Authorisation',
        paypal: 'Purchase',
        aeropay: 'Authorisation'
      }
    },
    amounts: {
      currencyCode: 'USD',
      transactionValue: 49.99
    },
    allowTransaction: true,
    serviceType: 'CheckoutDropIn',
    // Include when the shopper is known. Omit for guest checkout.
    customerProfileId: 'your-customer-profile-id'
  });
  // {% /step %}

  // {% step id="send-session-request" %}
  // Send the session creation request
  const authHeader = createHmacSignature(timestamp, requestId, requestPath, requestBody);

  const response = await fetch('https://api-services.pxp.io/api/v1/sessions', {
    method: 'POST',
    headers: {
      'X-Client-Id': CLIENT_ID,
      'X-Request-Id': requestId,
      'Authorization': authHeader,
      'Content-Type': 'application/json'
    },
    body: requestBody
  });
  // {% /step %}

  // {% step id="handle-response" %}
  // Return the session data to your app
  const sessionData = await response.json();
  return sessionData;
  // {% /step %}
}

// Express.js endpoint example
app.get('/api/create-session', async (req, res) => {
  try {
    const sessionData = await createSession();
    res.json(sessionData);
  } catch (error) {
    console.error('Session creation failed:', error);
    res.status(500).json({ error: 'Failed to create session' });
  }
});

// {% step id="import-dependencies" %}
import SwiftUI
import PXPCheckoutSDK
// {% /step %}

// {% step id="setup-view" %}
struct CheckoutView: View {
    @StateObject private var viewModel = CheckoutViewModel()
    
    var body: some View {
        Group {
            if let dropIn = viewModel.dropIn {
                // {% step id="render-content" %}
                dropIn.buildContent()
                // {% /step %}
            } else if viewModel.errorMessage == nil {
                ProgressView("Loading checkout...")
            }

            if let error = viewModel.errorMessage {
                VStack(spacing: 16) {
                    Text("Unable to load checkout")
                        .font(.headline)
                    Text(error)
                        .font(.body)
                        .foregroundColor(.secondary)
                    Button("Retry") {
                        Task {
                            await viewModel.loadDropIn()
                        }
                    }
                }
                .padding()
            }
        }
        .task {
            await viewModel.loadDropIn()
        }
    }
}
// {% /step %}

@MainActor
final class CheckoutViewModel: ObservableObject {
    @Published var dropIn: CheckoutDropIn?
    @Published var errorMessage: String?
    
    func loadDropIn() async {
        errorMessage = nil
        dropIn = nil
        do {
            // {% step id="fetch-session" %}
            let url = URL(string: "https://your-backend.com/api/create-session")!
            let (data, _) = try await URLSession.shared.data(from: url)
            
            // Decode the complete SessionData response — pass all fields to Drop-in
            let session = try JSONDecoder().decode(SessionData.self, from: data)
            // {% /step %}
            
            // {% step id="configure-transaction" %}
            let transactionData = DropInTransactionData(
                amount: Decimal(string: "49.99") ?? 0,
                currency: "USD",
                entryType: .ecom,
                intent: DropInTransactionIntentData(
                    card: .authorisation,
                    paypal: .purchase,
                    aeropay: .authorisation
                ),
                merchantTransactionId: UUID().uuidString,
                merchantTransactionDate: { Date() }
            )
            // {% /step %}
            
            // {% step id="initialize-dropin" %}
            let config = CheckoutDropInConfig(
                environment: .test,
                session: session,
                transactionData: transactionData,
                merchantShopperId: "shopper-123",
                ownerId: "your-merchant-group-id",
                // {% step id="setup-shopper" %}
                onGetShopper: {
                    // Card-on-file requires a non-empty id
                    TransactionShopper(id: "shopper-123")
                },
                // {% /step %}
                // {% step id="success-callback" %}
                onSuccess: { result in
                    let systemTransactionId = result.systemTransactionId
                    let merchantTransactionId = result.merchantTransactionId // String?
                    // paymentData is typically nil for card, PayPal, Apple Pay, and Aeropay
                    print("Payment successful: \(systemTransactionId)")
                    Task {
                        await self.verifyPaymentOnBackend(result)
                    }
                },
                // {% /step %}
                // {% step id="error-callback" %}
                onError: { paymentMethod, error in
                    print("Payment failed: \(error.errorMessage)")
                    self.errorMessage = error.errorMessage
                }
                // {% /step %}
            )
            
            let instance = try CheckoutDropIn(config: config)
            // {% /step %}
            
            // {% step id="create-dropin" %}
            await instance.create()
            if errorMessage == nil {
                dropIn = instance
            }
            // {% /step %}
            
        } catch let error as BaseSdkException {
            errorMessage = error.errorMessage
        } catch {
            errorMessage = error.localizedDescription
        }
    }
    
    private func verifyPaymentOnBackend(_ result: DropInSubmitResult) async {
        // Send transaction details to your backend for verification
        do {
            let url = URL(string: "https://your-backend.com/api/verify-payment")!
            var request = URLRequest(url: url)
            request.httpMethod = "POST"
            request.setValue("application/json", forHTTPHeaderField: "Content-Type")
            
            let body = [
                "systemTransactionId": result.systemTransactionId,
                "merchantTransactionId": result.merchantTransactionId ?? ""
            ]
            request.httpBody = try JSONEncoder().encode(body)
            
            let (data, _) = try await URLSession.shared.data(for: request)
            let verification = try JSONDecoder().decode(VerificationResponse.self, from: data)
            
            if verification.success {
                print("Payment verified! Order ID: \(verification.orderId ?? "")")
            }
        } catch {
            print("Verification error: \(error.localizedDescription)")
        }
    }
}

struct VerificationResponse: Codable {
    let success: Bool
    let orderId: String?
    let error: String?
}

// Node.js backend: Webhook handler for payment verification
const crypto = require('crypto');
const express = require('express');
const app = express();

app.use(express.json());

// {% step id="webhook-endpoint" %}
app.post('/webhooks/pxp', async (req, res) => {
  try {
    const events = req.body;

    // {% step id="verify-signature" %}
    // Verify webhook authenticity using HMAC before processing
    const signature = req.headers['x-webhook-signature'];
    const expectedSignature = createWebhookSignature(JSON.stringify(events));

    if (signature !== expectedSignature) {
      console.error('Invalid webhook signature');
      return res.status(401).json({ error: 'Unauthorized' });
    }
    // {% /step %}

    // {% step id="process-events" %}
    for (const event of events) {
      if (event.eventCategory === 'Transaction') {
        const transaction = event.eventData;

        console.log('Processing transaction:', transaction.systemTransactionId);

        // {% step id="check-state" %}
        if (transaction.state !== 'Authorised' && transaction.state !== 'Captured') {
          console.log(`Skipping transaction in state: ${transaction.state}`);
          continue;
        }
        // {% /step %}

        // {% step id="prevent-duplicates" %}
        const existingTransaction = await db.transactions.findOne({
          systemTransactionId: transaction.systemTransactionId
        });

        if (existingTransaction) {
          console.log('Transaction already processed, skipping');
          continue;
        }
        // {% /step %}

        // {% step id="verify-details" %}
        const order = await db.orders.findOne({
          merchantTransactionId: transaction.merchantTransactionId
        });

        if (!order) {
          console.error('Order not found:', transaction.merchantTransactionId);
          continue;
        }

        const transactionAmount = transaction.amounts?.transactionValue || transaction.amount || 0;
        if (Math.abs(transactionAmount - order.amount) > 0.01) {
          console.error('Amount mismatch:', {
            expected: order.amount,
            actual: transactionAmount
          });
          continue;
        }

        const transactionCurrency = transaction.amounts?.currencyCode || transaction.currency;
        if (transactionCurrency !== order.currency) {
          console.error('Currency mismatch');
          continue;
        }
        // {% /step %}

        // {% step id="fulfill-order" %}
        await db.transactions.create({
          systemTransactionId: transaction.systemTransactionId,
          merchantTransactionId: transaction.merchantTransactionId,
          amount: transactionAmount,
          currency: transactionCurrency,
          state: transaction.state,
          paymentMethod: transaction.fundingData?.fundingType || 'Unknown',
          processedAt: new Date()
        });

        await fulfillOrder(order.id, transaction.systemTransactionId);

        console.log('Order fulfilled:', order.id);
        // {% /step %}
      }
    }
    // {% /step %}

    // {% step id="respond" %}
    res.json({ state: 'Success' });
    // {% /step %}

  } catch (error) {
    console.error('Webhook processing error:', error);
    // Always return success to prevent retries
    res.json({ state: 'Success' });
  }
});
// {% /step %}

function createWebhookSignature(body) {
  const secret = process.env.WEBHOOK_SECRET;
  return crypto
    .createHmac('sha256', secret)
    .update(body)
    .digest('hex');
}

async function fulfillOrder(orderId, systemTransactionId) {
  // Your order fulfilment logic here
  // - Update order status
  // - Send confirmation email
  // - Trigger shipping
  // - Update inventory
  console.log(`Fulfilling order ${orderId} for transaction ${systemTransactionId}`);
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Webhook handler listening on port ${PORT}`);
});