Digital Wallet Setup

Accept ApplePay and GooglePay payments

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.

  1. Download the verification file from the Merchant Portal Apple Pay settings page
  2. Upload the verification file to the .well-known directory on your web server
  3. 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:

  • email

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

	}