Documentation Index
Fetch the complete documentation index at: https://bancofcalifornia-preview.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Apple Pay allows merchants to accept payments from their customers with little friction and high conversion rates. For most customers using Apple devices, it’s the preferred payment method when shopping online.
Using Collect.js, merchants can add Apple Pay into their websites with ease. Whether using the Lightbox or Inline integration methods, Apple Pay can be added in no time at all. And to make the integration as seamless as possible, the Apple Pay data will be returned to you in the “payment_token” variable, so no matter what payment method your customers make, your transaction request can be exactly the same. Apple Pay data can be used for single transactions, stored to the Customer Vault, or used to initiate a recurring payment.
Apple Pay supports Global Payments East - EMV, Test CC Processor, First Data Nashville, Chase Paymentech Salem, Chase Paymentech Tampa, EPX, Vantiv Now Worldpay eCommerce - Host Capture (Litle & Co), Global Payments Canada, First Data Nashville North, Vantiv Now Worldpay Core - Terminal Capture, Paymentech Salem Dev, Vantiv Now Worldpay eCommerce - Terminal Capture (Litle & Co.), First Data Nashville North V2, FACe - Vantiv Pre-Live, FACe - Vantiv, First Data Compass, TSYS - EMV, Credomatic Web Service, Credomatic Web Service Dev, First Data Rapid Connect Nashville North - EMV, First Data Rapid Connect Cardnet North - EMV, First Data Rapid Connect Nashville - EMV, FACe - Vantiv (Next Day Funding), Elavon viaConex, First Data Rapid Connect Omaha - EMV, Elavon EISOP UK/EU - EMV, American Express Direct UK/EU - EMV, Credorax ePower EU - EMV, Worldpay APACS UK/EU - EMV, First Data APACS UK/EU - EMV, Lloyds Cardnet APACS UK/EU - EMV, Barclaycard HISO UK/EU - EMV, AIBMS APACS UK/EU - EMV, Global Payments APACS UK/EU - EMV, Checkout.com Unified Payments, BancEdge Payments and FACe - Worldpay Core processors configured for e-commerce.
To use Apple Pay, you must provide Collect.js price, country, and currency values. These values are used to ensure the user can only select a valid card. You must also provide an HTML element on your page that Collect.js can use to draw the Apple Pay button.
<html>
<head>
<script
src="https://gateway.bancedge.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>
This will create an Apple Pay button that will be inserted in the div. When a user clicks the button, they are presented with a payment sheet requesting the user’s payment details. After the user submits the payment sheet, Collect.js executes the callback function if one were provided, or submits your form with the payment token attached.
Uploading the Domain Verification File
Apple requires merchants to upload the gateway’s Domain Verification File to your server to use Apple Pay. You can download the file and add your website to the “Allowed Domains” on your account from the merchant control panel’s Apple Pay settings page. In short, you need to:
Download the verification file
Download the verification file from the merchant control panel’s Apple Pay settings page.
Upload the file to your web server
Upload the verification file to the .well-known directory on your web server.
Allow your domain for Apple Pay
Add your domain to the list of domains allowed to use Apple Pay.
Once these steps are complete, Apple Pay will be able to work with Collect.js.
Capture Billing and Shipping Data
Collect.js also allows you to capture the user’s shipping and billing details with Apple Pay, just like the credit card data. This eliminates the need for you to capture this manually in your own web form. When these options are enabled, Apple Pay will also request the user’s information and Collect.js will store all that data in the payment token.
Please note that Apple Pay tokens are one-time use tokens and should not be saved to the Customer Vault. They will not be able to be charged again.
We currently suggest not using Apple Pay in checkout flows where you are also saving customers to the Vault.
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:
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 “postalAddress”, 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:
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:
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:
Below is an example of an Apple Pay integration in Collect.js with all available configuration options:
<html>
<head>
<script
src="https://secure.networkmerchants.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'
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,
check:null,
institution:null
},
wallet: {
cardDetails: "1234",
cardNetwork: "visa",
email: "email@example.com",
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"
}
}
}
Note:
Collect.JS defaults to building recurring Apple Pay payments with a 0up−frontamount.Thisenablesuseofa0 authorization to validate and set up the payment info during the subscription registration process, while deferring the first real payment to the given start date.