🚧

Beta Release Notice

The NMI Payment Component is currently in beta. While the core functionality is production-ready, some features may change based on user input and ongoing improvements. We recommend using this beta for new integrations and test environments before full-scale deployment.

Overview

The NMI Payment Component is the fastest, most secure way to add payments to your digital experiences. Designed to fit seamlessly into your checkout flow, it lets you accept cards and digital wallets without ever touching sensitive data—keeping you PCI DSS compliant and your customers’ trust intact.

Whether you’re building a new checkout or upgrading your existing flow, our Payment Component delivers the flexibility, security, and branding control you need to deliver a frictionless payment experience.

• Built for Security – Cardholder data never passes through your servers.
• Fast to Implement – Drop it into your site or app with minimal code.
• Brand-Ready – Customize colors, fonts, and layouts with the Appearance API.
• Fraud Protection Built In – Integrated support for 3D Secure (3DS) authentication.

How It Works

1. Embed the Component – Place the NMI Payment Component in your checkout page.
2. Customer Enters Payment Details – Via card entry or supported digital wallets.
3. Secure Tokenization – The component instantly converts payment details into a secure token.
4. Server-to-Server Processing – Your backend sends the token to the NMI Payment API.
5. Get Real-Time Results – NMI processes the payment and returns the transaction outcome.

Getting Started

For the full integration guide, login to guide.nmi.com to see the Payment Component Guide.

Install the Payment Component:

npm install @nmi/payments/nmi-pay-react

Event Reference

• onOnly – Fires when payment data is tokenized and ready to send.
• onChange – Tracks changes in payment input fields.
• onFieldValidated – Confirms that an individual field has passed validation.
• onError – Catches and returns any errors.

Payment Options

• Credit and Debit Cards: Covering card number, expiration date, and CVV.
• Bank Accounts: Supporting US and CAN ACH transactions, covering Account Number, Routing Number, Transit Number, and Institution Number.
• Digital Wallets: Apple Pay and Google Pay
• Recurring Payments: Check with your support specialist to verify processor compatibility for these payment methods.

Enhanced Security with 3D Secure (3DS)

Add an extra layer of protection by verifying the cardholder’s identity:

startThreeDSAuthentication(paymentInformation);

3DS helps prevent fraud by requiring additional authentication during checkout.

Best Practices for Secure Payments

• Never Store Card Data – Always rely on the Payment Component for secure handling.
• Use HTTPS Everywhere – Protect data in transit.
• Stay Up to Date – Regularly update your integration to leverage the latest security features.