FrontStream Docs
FrontStream Payments
FrontStream Payments
  • Introducing our Embedded Form
    • Overview and Features
    • Payment Methods process
    • How to implement
    • Compare Embedded Form and Direct API integration
  • Welcome to our Payment API
    • Overview
    • Quick Start
    • API references
      • Search for a Charity for your Donation
      • Make a Payment
      • Learn how to cover Fees
      • Test Payment API Features
        • CharitySearch
        • Payment
        • Fee
      • Temp - Make a Payment - API specification
      • Temp - Charity Search API specification
      • Payment - Specification
      • Calculate Fees - Specification
    • Specification
    • CharitySearch - Specification
Powered by GitBook
On this page
  • FrontStream Embedded Payment Form Overview and Features
  • Overview
  • Objective
  • Architecture Components
  • User Flow
  • Benefits
Export as PDF
  1. Introducing our Embedded Form

Overview and Features

FrontStream Embedded Payment Form Overview and Features

Overview

This document outlines the architecture and security measures for an embedded payment form that can be integrated into customer websites or portals via an iframe. This form allows customers to accept multiple payment types, including credit cards, debit cards, Apple Pay, Google Pay, and ACH, without handling sensitive cardholder data, thus removing the need for PCI DSS certification on the customer's part.

Objective

To provide a secure, flexible, and compliant solution for customers to embed a payment form within their site. The embedded payment form will facilitate a seamless checkout experience, supporting various payment methods while ensuring compliance with PCI DSS requirements.

Architecture Components

1. Frontend (Embedded Payment Form via iframe)

  • The payment form is delivered to the customer’s site through an iframe hosted on our domain and is mobile responsive.

  • The iframe contains fields for the payment information: card number, expiration date, CVV, etc., all of which are tokenized and encrypted before transmission.

  • Customizable UI elements allow branding options for the customer, ensuring the iframe matches their portal's aesthetic while preserving the integrity and security of the payment fields.

  • A client-side code library is provided to integrate the payment form into the application. Server-side code is provided to initiate the payment session.

2. Payment Gateway Integration

  • The iframe communicates with the FrontStream secure, PCI DSS-compliant ArgoFire payment gateway that processes with either a Merchant Account or with the FrontStream Global Fund (DAF).

  • The ArgoFire gateway manages the processing of payments, including handling authorization, tokenization, and settlement processes.

  • The form is configured to support multiple payment methods: credit cards, debit cards, Apple Pay, Google Pay, and ACH, providing customers with a comprehensive range of options.

3. Tokenization and Encryption

  • Payment details entered by the end-user are sent over HTTPS through a secured backend server proxy.

  • Payment details entered by the end-user are immediately encrypted within the iframe.

  • Card and account information is tokenized by the payment gateway, which generates a unique, secure token representing the payment data. This token is used to complete the transaction without exposing sensitive cardholder information to the customer’s servers.

4. Security and Compliance

  • Since all sensitive payment data is captured within the iframe and processed by the payment gateway, customers are not exposed to sensitive cardholder data, effectively "outsourcing" PCI DSS compliance to our infrastructure.

  • The iframe is hosted in a secure, PCI DSS-certified environment, leveraging HTTPS and HSTS to prevent data interception.

  • The solution meets or exceeds PCI DSS requirements for iframe-based payments, ensuring compliance without impacting the customer’s PCI scope.

5. Embedded Form Customization and Management

  • A self-service portal allows customers to generate iframe code and customize the embedded form’s appearance (e.g., colors, fonts) while maintaining security standards.

  • Customers can configure payment methods based on their preferences and business needs (e.g., enabling or disabling Apple Pay, Google Pay, or ACH).

User Flow

  1. Initiation: The end-user accesses the payment form embedded within the customer's site.

  2. Data Entry: The end-user enters payment details, which are secured within the iframe, ensuring no sensitive information is passed to the customer’s servers.

  3. Transaction Processing: The payment information is sent to the configured payment gateway API, which authorizes the transaction.

  4. Confirmation: The customer receives transaction metadata, allowing them to confirm the payment without handling sensitive data directly.

  5. Receipts: The purchaser or donor receives a receipt sent to their email detailing the transaction.

Benefits

  • PCI Scope Reduction: As the iframe handles all sensitive data, the customer’s environment is exempt from PCI DSS certification.

  • Security: Encrypted data transmission, tokenization, and gateway handling ensure secure processing.

  • Ease of Integration: The iframe-based solution minimizes development work, requiring only simple integration to enable secure payments on the customer’s website.

  • Multi-Payment Support: The solution provides flexible payment options, catering to diverse customer preferences.

  • Multi-Purchase Items: Multiple items can be purchased with a single transaction (registrations, donations, purchase items, etc).

  • Surcharging Support: The solution allows surcharge options that are configured for the organization.

This architecture provides a seamless, secure, and PCI-compliant solution for embedded payments.

PreviousIntroducing our Embedded FormNextPayment Methods process

Last updated 5 months ago

Page cover image