Secure Fields

Embed individual card input fields for full UI control while maintaining PCI compliance

Overview

Secure Fields lets you embed individual, PCI-compliant card input fields (card number, expiry date, CVV) directly into your custom checkout UI. Each field is rendered in a secure iframe managed by Yuno, so sensitive card data never touches your servers.

Secure Fields gives you complete design freedom while keeping your PCI scope at SAQ-A level (the simplest compliance level. Card data never touches your servers).

Using React or Vue? Check out the React Components or Vue Components for framework-specific wrappers.

Prerequisites

• Yuno API keys (Authentication)
• @yuno-payments/sdk-web installed (SDK Overview)
• A custom checkout page where you control the form layout

Integration Flow

1. Create a checkout session (server-side)

   const session = await createCheckoutSession({
     amount: { currency: 'USD', value: 75.00 },
     country: 'US',
     merchant_order_id: 'order-456',
     workflow: 'SDK_SECURE_FIELDS',
   });
   
2. Initialize the SDK

   const yuno = await Yuno.initialize({
     publicApiKey: 'your-public-api-key',
     checkoutSession: session.checkout_session,
     country: 'US',
   });
   
3. Mount individual Secure Fields

   Create container elements for each field and mount them:

   <form id="payment-form">
     <label>Card Number</label>
     <div id="yuno-card-number"></div>
   
     <label>Expiry Date</label>
     <div id="yuno-expiry"></div>
   
     <label>CVV</label>
     <div id="yuno-cvv"></div>
   
     <button type="submit">Pay</button>
   </form>
   

   const secureFields = yuno.mountSecureFields({
     cardNumber: { elementSelector: '#yuno-card-number' },
     expiryDate: { elementSelector: '#yuno-expiry' },
     cvv: { elementSelector: '#yuno-cvv' },
     onReady: () => console.log('Secure Fields ready'),
     onFieldChange: (field, event) => {
       if (event.error) {
         showFieldError(field, event.error.message);
       } else {
         clearFieldError(field);
       }
     },
   });
   
4. Generate a one-time token

   When the user submits the form, generate a token from the secure fields:

   document.getElementById('payment-form').addEventListener('submit', async (e) => {
     e.preventDefault();
     try {
       const { token } = await secureFields.generateToken({
         cardHolderName: 'Dee Hock',
       });
       // Send token to your server to create the payment
       await createPayment(token);
     } catch (error) {
       console.error('Tokenization failed:', error);
     }
   });
   

   The one-time token expires after a single use. Generate a new token for each payment attempt.

5. Create payment and handle 3DS

   Use the token server-side to create the payment, then call continuePayment() client-side for 3DS:

   yuno.continuePayment();
   

Styling Secure Fields

You can style the iframe inputs to match your design system:

const secureFields = yuno.mountSecureFields({
  styles: {
    base: {
      fontSize: '16px',
      color: '#333',
      fontFamily: 'Inter, sans-serif',
    },
    focus: { borderColor: '#0066FF' },
    error: { color: '#E53E3E' },
  },
});

See Customization for the full list of style properties.