Appearance

Getting Started ​

Setting up a new session and tokenizing card info for a customer payment or checkout session follows the following sequence:

NOTE

Examples and sample code snippets are intended to be framework agnostic and are written in standard HTML and Javascript.

Prerequisites ​

Before you begin implementing the Hosted Payments solution, you will need API credentials from PayNetWorx.

API Authentication ​

Your API authentication key (referred to as YOUR_API_KEY in the documentation) will be provided by PayNetWorx. You will receive:

  • QA API Key - For testing and development in the QA environment
  • Production API Key - For live transactions in the production environment

Getting Your API Key

Contact PayNetWorx to obtain your API credentials.

See contacts for information on how to reach PayNetWorx support.

Security Best Practices

  • Never commit API keys to version control
  • Store credentials securely (use environment variables, secrets manager, etc.)
  • Use QA credentials only in test environments
  • Use production credentials only in production
  • Keep your API keys confidential - treat them like passwords

Environments ​

PayNetWorx Hosted Payments provides two environments for development and production use:

IMPORTANT

Never use production credentials in your test/development environments, and never use QA credentials in production.

See the environment pages for complete details on URLs, authentication, and best practices.

Implementation Steps ​

The card tokenization workflow consists of the following steps:

  1. Initialize a New Session - Create a payment session via the PayNetWorx API
  2. Embed the iFrame - Load the hosted payment form into your page
  3. Tokenize Card Data - Securely request card tokenization via postMessage
  4. Listen for Response - Handle the tokenized payment information
  5. Use Tokenized Data - Make subsequent Payment API calls with the token

Quick Overview ​

The PayNetWorx Hosted Payments solution allows you to securely collect and tokenize card information without handling sensitive card data directly. The process uses an embedded iframe that communicates with your application via the postMessage API, ensuring PCI compliance while maintaining a seamless user experience.

Next Steps ​

Begin by initializing a new payment session to get started with the implementation.