In the ever-evolving landscape of online payments, businesses often find themselves searching for ways to offer seamless and secure checkout experiences for their customers. While there are numerous payment gateways available, customizing your payment form can provide a distinct advantage. In this guide, I will explore how to create a custom payment form using Authorize.Net, the leading and highly well-known payment gateway provider. I'll delve into the use case and value of building your own payment form before diving into the step-by-step details.

Use Case

Imagine you run an e-commerce website or a subscription-based service. You want to offer your customers a streamlined, branded payment experience, rather than redirecting them to a third-party payment page. This not only enhances your brand's professionalism but also instills trust in your customers.

By creating your custom payment form with Authorize.Net, you can:

1. Maintain Brand Consistency: Your payment form will seamlessly integrate with your website's design and branding, offering a cohesive user experience.

2. Enhance Security: You have full control over data security, ensuring that sensitive payment information is handled according to industry standards.

3. Access Advanced Features: Custom forms can be tailored to include additional features like coupon codes, subscription options, and more, providing a flexible checkout process.

4. Capture Customer Data: You can capture and store customer data securely for future transactions, simplifying the checkout process for return customers.

But you already know the use case and if you're reading this, then you might have your use case already, so I will just dive right in:

Step 1: Set Up Your Authorize.Net Account

Before you can start building your custom payment form, you'll need to have an Authorize.Net account, if you don't already have one. Once registered, you'll obtain your API credentials: an API Login ID and a Transaction Key.

Step 2: Include The Authorize.Net JavaScript SDK

In your HTML code, include the Authorize.Net JavaScript SDK. This SDK will allow you to interact with Authorize.Net's payment processing services. You can load it from their CDN like this:

<script src="https://jstest.authorize.net/v3/Accept.js" charset="utf-8"></script>

Step 3: Create the Payment Form

Design your payment form. For simplicity, I will include just the input fields for the credit card number and expiration date. For example:

<form id="payment-form" method="post" action="process_payment.php">
    <div>
        <label for="credit-card">Credit Card Number:</label>
        <input type="text" id="credit-card" name="credit-card" placeholder="XXXX XXXX XXXX XXXX" required>
    </div>
    <div>
        <label for="expiration-date">Expiration Date:</label>
        <input type="text" id="expiration-date" name="expiration-date" placeholder="MM/YYYY" required>
    </div>
    <!-- put other input fields here needed -->
    <div id="payment-container"></div>
    <button type="submit">Submit Payment</button>
</form>

Step 4: Initialize Authorize.Net Payment Form

In your JavaScript code, initialize the Authorize.Net payment form. Replace 'YOUR_API_LOGIN_ID' with your actual API Login ID:

var authorizeNetOptions = {
    apiLoginID: 'YOUR_API_LOGIN_ID',
    paymentOptions: {
        container: 'payment-container',
        testRequest: true, // Remove this for live transactions
        transactionType: 'authCaptureTransaction', // or 'authOnlyTransaction' for authorization only
        currency: 'USD', // Change to your preferred currency
        amount: '10.00', // Set the payment amount
        successCallback: function(response) {
            // Handle successful payment
            console.log(response);
        },
        errorCallback: function(response) {
            // Handle payment error
            console.error(response);
        }
    }
};

var secureData = {};

var secureDataOptions = {
    secureData: secureData,
    success: function(response) {
        // Handle secure data success
        console.log(response);
    }
};

var paymentForm = new AuthorizeNet(apiLoginID, secureDataOptions);

Step 5: Submit the Payment Form

When your users or customers submit the form, the payment information will be securely processed within your environment. Handle the success or error callbacks accordingly.

Step 6: Process the Payment Server-Side

Create a server-side script (e.g., process_payment.php) to handle the payment processing. Use the Authorize.Net API to process the payment and handle the transaction response as shown in the step above.

<?php
require 'anet_php_sdk/autoload.php'; // Include the Authorize.Net PHP SDK

use net\authorize\api\contract\v1 as AnetAPI;
use net\authorize\api\controller as AnetController;

// Define your Authorize.Net API credentials
define("API_LOGIN_ID", "YOUR_API_LOGIN_ID");
define("API_TRANSACTION_KEY", "YOUR_API_TRANSACTION_KEY");
define("SANDBOX", true); // Set to true for sandbox/testing, false for production

// Get the credit card and expiration date from the form
$creditCardNumber = $_POST['credit-card'];
$expirationDate = $_POST['expiration-date'];

// Create a transaction request
$request = new AnetAPI\CreateTransactionRequest();
$request->setMerchantAuthentication(
    new AnetAPI\MerchantAuthenticationType([
        'name' => API_LOGIN_ID,
        'transactionKey' => API_TRANSACTION_KEY
    ])
);

// Create a payment type with the credit card information
$creditCard = new AnetAPI\CreditCardType();
$creditCard->setCardNumber($creditCardNumber);
$creditCard->setExpirationDate($expirationDate);

$paymentOne = new AnetAPI\PaymentType();
$paymentOne->setCreditCard($creditCard);

// Create an order
$order = new AnetAPI\OrderType();
$order->setDescription("Payment Description");

// Set the transaction amount
$amount = 10.00; // Set the desired payment amount
$transactionRequestType = new AnetAPI\TransactionRequestType();
$transactionRequestType->setTransactionType("authCaptureTransaction");
$transactionRequestType->setAmount($amount);
$transactionRequestType->setOrder($order);
$transactionRequestType->setPayment($paymentOne);

$request->setTransactionRequest($transactionRequestType);

// Create a transaction controller
$controller = new AnetController\CreateTransactionController($request);

if (SANDBOX) {
    $request->setTestRequest("true");
}

// Execute the transaction
$response = $controller->executeWithApiResponse(\net\authorize\api\constants\ANetEnvironment::SANDBOX);

if ($response != null) {
    $tresponse = $response->getTransactionResponse();

    if ($tresponse != null && $tresponse->getResponseCode() == "1") {
        // Successful transaction, do something (e.g., save the transaction details)
        $transactionId = $tresponse->getTransId();
        echo "Transaction ID: " . $transactionId;
    } else {
        // Payment declined or error, handle accordingly
        echo "Transaction Failed: " . $tresponse->getErrors()[0]->getErrorText();
    }
} else {
    // Error with the request, handle accordingly
    echo "Transaction Failed: " . $response->getMessages()->getMessage()[0]->getText();
}
?>

Creating a custom payment form with Authorize.Net offers your business the flexibility to tailor the payment experience, maintain brand consistency, and ensure data security. By following these steps, you can provide your customers with a seamless and trusted payment process that enhances their overall shopping or subscription experience on your website/platform.

Are you a startup or small business processing $25,000+ in transactions every month and you're looking for a corporate card with high credit limits? Check out Paygeon.io to see if you qualify with no negative impact on your credit score!

Paygeon is the new fintech sweeping the nation, providing vendor management services using AI and its highly coveted smart corporate card.

"...One thing I absolutely love is the option to set up automatic payments for invoices. It's like a magic trick that takes away the monthly hassle of sitting down and paying each invoice one by one."

Amy Schiffman on TrustPilot

"...They seem to have nailed their algorithm catching invoices that should be disputed. For example, I set up an account using a free trial of [software]. Paygeon caught the [recurring] invoice and brought it to my attention before I was charged several months' worth of a product I was not using."

Sidney P. on G2