Secure Fields

Overview

The Secure Fields solution from PayOS offers merchants more control over their checkout experience while offloading the responsibility of PCI compliance. With Secure Fields, sensitive data such as card details is captured within iFrames managed by PayOS, ensuring that merchants never directly handle this data.

Key Benefits

1. Flexible Checkout Design: Maintain control over the look and feel of your checkout without the overhead of PCI-DSS certification.

2. Seamless PCI Compliance: Sensitive data is captured and tokenized via PayOS’s hosted fields, reducing your compliance scope.

3. Easy Integration: Use JavaScript APIs to securely render payment input fields within your web or mobile application.

Getting Started with Secure Fields

Using Session IDs

As part of our SDK, a session ID is passed in to dynamically render the form for our merchants. This session ID is crucial as it ties the payment process to a specific session, ensuring security and context for the transaction. Refer to the sessionId parameter in the OpenAPI specification for more details.

Simplified Method for Rendering Input Fields

For an even easier integration, you can use the <MethodForm> component provided by our SDK. This component automatically renders the available payment methods and their required input fields, simplifying the integration process.

1
<MethodForm sessionId="SESSION_abcdef123456">
2
  <!-- The form and fields are dynamically rendered here -->
3
</MethodForm>

This approach eliminates the need for manually creating containers for each input field, allowing for a more streamlined setup.

Create Containers for Input Fields

However, for more control, you can use HTML <div> containers where the secure input fields will be rendered. This method gives you flexibility in designing your checkout page.

1
<form id="checkout-form">
2
  <div id="card-number"></div>
3
  <div id="expiry-date"></div>
4
  <div id="cvv"></div>
5
  <button type="submit">Pay Now</button>
6
</form>

Example Payment Flow

1. Initialize Secure Fields: Load and render the fields on your checkout page.

2. Submit Payment Data: When the form is submitted, PayOS tokenizes the data and returns a secure token.

3. Use the Token: Send the token to PayOS via your backend to complete the payment.

1
document.getElementById('checkout-form').addEventListener('submit', async (event) => {
2
  event.preventDefault();
3
  const token = await secureFields.tokenize();
4
  console.log('Received token:', token);
5
});

Handling Errors and Validation

Secure Fields automatically validates input fields as customers enter their data. Use the following event listeners to capture validation errors:

1
secureFields.on('change', (event) => {
2
  if (event.isValid) {
3
    console.log('Field is valid');
4
  } else {
5
    console.error('Validation error:', event.error);
6
  }
7
});

Styling Secure Fields

Customize the appearance of Secure Fields using CSS-like objects.

1
const styles = {
2
  input: {
3
    base: {
4
      border: '1px solid #ccc',
5
      padding: '10px',
6
    },
7
    focus: {
8
      border: '1px solid #0070f3',
9
    },
10
    invalid: {
11
      border: '1px solid #e00',
12
    },
13
  },
14
};
15
16
secureFields.updateStyles(styles);

Best Practices

• Focus on UX: Customize fields to match your branding and enhance user experience.
• Monitor Errors: Implement error handling to capture issues during input.
• Token Storage: Never store raw card details—always use tokens provided by PayOS.