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="000000-000000-000000-000000"
            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 gateway’s 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='000000-000000-000000-000000'
            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'
        ></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"
		}

	}
}

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="000000-000000-000000-000000"
            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="000000-000000-000000-000000"
            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"
		}

	}