Style checkout and add wallets
Use the Appearance API while preserving usable payment states and wallet prerequisites.
Use the Appearance API
NMI’s Component Studio generates an Appearance object for the component library. Start from the light or dark theme, adjust the design, then use the generated object in the appearance prop. Do not invent undocumented theme-property names or try to style protected fields by reaching into an iframe. Open Component Studio for the relevant merchant testing setup. Set typography, color, spacing and borders to match your product. Copy the generated Appearance object from its code view. Store the object as a versioned frontend configuration and pass it to NmiPayments.
Keep theme and component behavior separate
The Studio also exposes options that belong directly on the payment component rather than inside appearance. Preserve that distinction when copying configuration. This example expects appearanceFromStudio to be the actual generated object, not a placeholder API schema. <NmiPayments tokenizationKey={publicKey} appearance={appearanceFromStudio} onPay={handlePayment} />
Add wallet methods deliberately
The documented paymentMethods values are apple-pay and google-pay. Wallet buttons invoke onExpressCheckout; route their token through the same trusted order validation and server payment flow as card entry. Availability still depends on the device, browser, merchant and supported processing configuration. <NmiPayments tokenizationKey={publicKey} paymentMethods={["apple-pay", "google-pay"]} onPay={handlePayment} onExpressCheckout={handleExpressPayment} />
Complete Apple Pay domain setup
Apple Pay requires a gateway domain-verification file and an allowed-domain entry. In Merchant Portal, use Settings → Apple Pay to download the file and configure the domain. Deploy the file to the .well-known directory on the website that hosts checkout, and verify it is publicly reachable as required by the account setup. Repeat for each intended checkout domain. Confirm Apple Pay availability for the merchant and processor. Download the gateway-provided domain-verification file. Place it in the required .well-known location without altering its contents. Add the checkout domain to the account’s allowed-domain configuration. Test on a supported Apple Pay device and verify the resulting transaction, not just button visibility.
Review every state
Check contrast, focus, loading, incomplete input, decline and long error messages at narrow widths and 200% zoom. Keep labels visible and errors understandable without color. Test dark mode independently. A matching appearance is not a complete compliance assessment, and wallet display alone does not prove end-to-end acceptance.