Frontend components - component usage

npm install @waffo/payment-sdk

import WaffoSDK from '@waffo/payment-sdk';

const sdk = new WaffoSDK('your-client-api-key', {
  env: 'prod',    // 'prod' | 'testing' | 'sandbox'
  locale: 'en'    // optional, defaults to 'en'
});

const result = await sdk.tokenizationSubmit('tokenSessionId', {
  tokenData: {
    pan: '4111111111111111',  // Card number
    name: 'John Doe',         // Cardholder name
    expiry: '12/2025',        // Expiry date MM/YYYY
    cvv: '123'                // CVV (optional)
  },
  billingAddress: {            // Optional
    countryCode: 'USA',
    region: 'CA',
    city: 'San Francisco',
    postalCode: '94102',
    address: '123 Main St'
  }
});

if (result.success) {
  if (result.data.validateUrl) {
    // 3DS verification required, redirect the user
    window.location.href = result.data.validateUrl;
  } else {
    // Card binding successful, wait for Webhook to receive tokenId
  }
}

WaffoSDK.renderIframe({
  // Customize theme color, logo, Apple Pay, etc.
});