This documentation is intended for existing Collect.js integrations. For new integrations, use the Payment Component with the NMI REST API. If you're migrating from Collect.js, follow the Classic API migration playbook.

Apple Pay and Google Pay enable merchants to accept customer payments with minimal friction and high conversion rates. The payment data from Apple Pay or Google Pay will be provided in the payment_token variable, ensuring that your transaction request remains consistent regardless of the payment method used by your customers.

Apple Pay

Step 1 - Create collect.js Attributes

Provide collect.js data-price, data-country, and data-currency values. And create an Apple Pay button.

<html>
    <head>
        <script
            src="https://secure.nmi.com/token/Collect.js"
            data-tokenization-key="USER.PUBLICAPIKEY"
            data-variant="inline"
            data-country="US"
            data-price="1.00"
            data-currency="USD"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div id="applepaybutton"></div>
        </form>
    </body>
</html>

Step 2 - Upload the Domain Verification File

Apple requires merchants to upload the gateways Domain Verification File to your server to use Apple Pay.

Download the verification file from the Merchant Portal Apple Pay settings page
Upload the verification file to the .well-known directory on your web server
Add your domain to the list of domains allowed to use Apple Pay

Step 3 - Capture Billing and Shipping Data

When data-field-apple-pay-required-billing-contact-fields includes "postalAddress", the following data is included in the payment token:

address1
address2
state
country
city
zip

When data-field-apple-pay-required-billing-contact-fields includes "name", the following data is included in the payment token:

first_name
last_name

When data-field-apple-pay-required-shipping-contact-fields includes "postalAddress", the following data is included in the payment token:

shipping_address_1
shipping_address_2
shipping_state
shipping_country
shipping_city
shipping_zip

When data-field-apple-pay-required-shipping-contact-fields includes "name", the following data is included in the payment token:

shipping_firstname
shipping_lastname

When data-field-apple-pay-contact-fields includes "phone" and data-field-apple-pay-contact-fields-mapped-to is "billing", the following data is included in the payment token:

phone

When data-field-apple-pay-contact-fields includes "phone" and data-field-apple-pay-contact-fields-mapped-to is "shipping", the following data is included in the payment token:

shipping_phone

When data-field-apple-pay-contact-fields includes "email" and data-field-apple-pay-contact-fields-mapped-to is "billing", the following data is included in the payment token:

When data-field-apple-pay-contact-fields includes "email" and data-field-apple-pay-contact-fields-mapped-to is "shipping", the following data is included in the payment token:

shipping_email

HTML Example File

<html>
    <head>
        <script
            src="https://secure.nmi.com/token/Collect.js"
            data-tokenization-key='USER.PUBLICAPIKEY'
            data-variant='inline'
            data-field-apple-pay-selector='.apple-pay-button'
            data-field-apple-pay-shipping-type='delivery'
            data-field-apple-pay-shipping-methods='[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"},{"label":"Express Shipping","amount":"10.00","detail":"Arrives in 2-3 days","identifier":"expressShipping"}]'
            data-field-apple-pay-required-billing-contact-fields='["postalAddress","name"]'
            data-field-apple-pay-required-shipping-contact-fields='["postalAddress","name"]'
            data-field-apple-pay-contact-fields='["phone","email"]'
            data-field-apple-pay-contact-fields-mapped-to='shipping'
            data-field-apple-pay-line-items='[{"label":"Foobar","amount":"3.00"},{"label":"Arbitrary Line Item #2","amount":"1.00"}]'
            data-field-apple-pay-total-label='Total'
            data-field-apple-pay-type='buy'
            data-field-apple-pay-style-button-style='white-outline'
            data-field-apple-pay-style-height='30px'
            data-field-apple-pay-style-border-radius='4px'
            data-field-apple-pay-is-recurring-transaction="true"
            data-field-apple-pay-recurring-payment-description="A description of the recurring payment to display to the user in the payment sheet."
            data-field-apple-pay-recurring-billing-agreement="A localized billing agreement displayed to the user in the payment sheet prior to the payment authorization."
            data-field-apple-pay-recurring-management-url="https://applepaydemo.apple.com"
            data-field-apple-pay-recurring-token-notification-url="https://applepaydemo.apple.com"
            data-field-apple-pay-recurring-label="Recurring"
            data-field-apple-pay-recurring-amount="4.99"
            data-field-apple-pay-recurring-payment-timing="recurring"
            data-field-apple-pay-recurring-recurring-payment-start-date="2023-08-11T11:20:32.369Z"
            data-field-apple-pay-recurring-recurring-payment-interval-unit="month"
            data-field-apple-pay-recurring-recurring-payment-interval-count="6"
            data-field-apple-pay-recurring-recurring-payment-end-date="2024-08-11T11:20:32.369Z"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div class="apple-pay-button"></div>
        </form>
    </body>
</html>

{
	tokenType: "applePay",
	token: "3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: null,
		bin: null,
        exp: null,
        hash: null,
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: "1234",
		cardNetwork: "visa",
		email: "[email protected]",
		billingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"

		},
		shippingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"
		}

	}
}

Customizing The Recurring Payment / Vault Experience

By default, Collect.js will generate an Apple Pay recurring payment request with a $0 authorization up front, and actual billing to be performed later. This matches the default "register recurring payment plan" or "register vault entry" workflows.

Specifying an amount for data-field-apple-pay-recurring-up-front-price will allow you to provide an up-front charge instead.

Providing an amount for data-field-apple-pay-vault-up-front-price will also enable an up-front charge, but the payment request will tell the customer that re-billing will occur when the customer's balance reaches zero, rather than on a specific date.

For either option, when you use the payment_token to register a subscription or vault entry, you must also pass type=sale and a matching value for amount to execute the up-front charge.

Google Pay

Step 1 - Create collect.js Attributes

Provide collect.js data-country and data-currency values. And create a Google Pay button.

<html>
    <head>
        <script
            src="https://secure.nmi.com/token/Collect.js"
            data-tokenization-key="USER.PUBLICAPIKEY"
            data-variant="inline"
            data-field-google-pay-selector=".google-pay-button"
            data-field-google-pay-shipping-address-required="true"
            data-field-google-pay-shipping-address-parameters-phone-number-required="true"
            data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
            data-field-google-pay-billing-address-required="true"
            data-field-google-pay-billing-address-parameters-phone-number-required="true"
            data-field-google-pay-billing-address-parameters-format="MIN"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div class="google-pay-button"></div>
        </form>
    </body>
</html>

Step 2 - Capture Billing and Shipping Data

In addition to the payment data that gets stored for all Google Pay transactions, the payment token will include the following shipping fields when shipping address required is enabled:

shipping_address_1
shipping_address_2
shipping_zip
shipping_city
shipping_state
shipping_country
shipping_firstname
shipping_lastname
phone (also requires phone_number_required to be enabled)

When billing_address_required is enabled, Collect.js will also capture these fields:

address1 (also requires format to be "FULL")
address2 (also requires format to be "FULL")
zip
city (also requires format to be "FULL")
state (also requires format to be "FULL")
country
firstname
lastname
phone (also requires phone_number_required to be enabled)

HTML Example File

<html>
    <head>
        <script
            src="https://secure.nmi.com/token/Collect.js"
            data-tokenization-key="USER.PUBLICAPIKEY"
            data-variant="inline"
            data-field-google-pay-selector=".google-pay-button"
            data-field-google-pay-shipping-address-required="true"
            data-field-google-pay-shipping-address-parameters-phone-number-required="true"
            data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
            data-field-google-pay-billing-address-required="true"
            data-field-google-pay-billing-address-parameters-phone-number-required="true"
            data-field-google-pay-billing-address-parameters-format="MIN"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div class="google-pay-button"></div>
        </form>
    </body>
</html>

{
	tokenType: "googlePay",
	token: "3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: null,
		bin: null,
        exp: null,
        hash: null,
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: "1234",
		cardNetwork: "visa",
		email: "[email protected]",
		billingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"

		},
		shippingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"
		}

	}

Get Started

Design Toolkits for Developers

Online Payments

In-Person Payments

Reporting

Extensions

Embedded Components

Digital Wallet Setup

Apple Pay

Step 1 - Create collect.js Attributes

Step 2 - Upload the Domain Verification File

Step 3 - Capture Billing and Shipping Data

HTML Example File

Customizing The Recurring Payment / Vault Experience

Google Pay

Step 1 - Create collect.js Attributes

Step 2 - Capture Billing and Shipping Data

HTML Example File