Links

Apple Pay Hosted Checkout Objects Reference (Request)

For complete sample code please refer here

Available dictionary objects

iStatus

const iStatus = {
success: 100,
unsupported: -100,
error: -200
}
Use: iStatus.success

APButtonColor

const APButtonColor = {
black: "black",
white: "white",
whiteOutline: "white-outline"
}
Use: APButtonColor.black

APButtonType

const APButtonType = {
buy: "buy",
pay: "pay",
plain: "plain",
order: "order",
donate: "donate",
continue: "continue",
checkout: "check-out"
}
Use: APButtonType.buy

APRequiredFeatures

const APRequiredFeatures = {
address_validation: "address_validation",
support_recurring: "support_recurring",
support_subscription : "support_subscription"
}
Use: APRequiredFeatures.address_validation

APErrorCode

const APErrorCode = {
shippingContactInvalid: "shippingContactInvalid",
billingContactInvalid: "billingContactInvalid",
addressUnserviceable: "addressUnserviceable",
couponCodeInvalid: "couponCodeInvalid",
couponCodeExpired: "couponCodeExpired",
unknown: "unknown"
}
Use: APErrorCode.addressUnserviceable

APErrorContactField

const APErrorContactField = {
phoneNumber: "phoneNumber",
emailAddress: "emailAddress",
name: "name",
phoneticName: "phoneticName",
postalAddress: "postalAddress",
addressLines: "addressLines",
locality: "locality",
subLocality: "subLocality",
postalCode: "postalCode",
administrativeArea: "administrativeArea",
subAdministrativeArea: "subAdministrativeArea",
country: "country",
countryCode: "countryCode"
}
Use: APErrorContactField.administrativeArea

Request objects

ApplePayRequest

The Main object that contains all the information necessary to communicate with Apple Pay API.
Name
Type
Required
Description
merchantIdentifier
String
Yes
For merchants integrating their own Apple Developer account must be Merchant Identifier from the account, otherwise must be merchant.cardknox.com
buttonOptions
No
Provides Apple Pay button customization options. For more information please click the link
requiredFeatures
No
Features required by Merchant. Each Feature is available with the certain iOS version. Therefore if device doesn’t support that version (Feature) - Apple Pay Button won’t be displayed.
requiredBillingContactFields
No
List of field names used for requesting contact information in a payment request.
requiredShippingContactFields
No
List of field names used for requesting contact information in a payment request.
onAPButtonLoaded
String
Yes
Name of a callback function to be called when Apple Pay button is loaded. Accepts an object of type APButtonLoadedResult Please click here for the sample code
onGetTransactionInfo
String
Yes
Name of a callback function to be called that returns the final price and tax calculations. Please click here for the sample code
onGetShippingMethods
String
Yes
Name of a callback function to be called that returns a list of available Shipping Methods. Please click here for the sample code
onShippingContactSelected
String
Yes
Name of a callback function to be called when Shipping Contact is selected/changed. Accepts a parameter PaymentContact. Returns ShippingContactResponse. If address_validation is part of requiredFeatures in your ApplePay Request object you can return an Error as part of ShippingContactResponse. Please click here for the sample code
onShippingMethodSelected
String
Yes
Name of a callback function to be called when Shipping Method is selected/changed. Accepts a parameter ShippingMethod. Please click here for the sample code
onPaymentMethodSelected
String
Yes
Name of a callback function to be called when Payment Method is selected/changed. Accepts a parameter PaymentMethod. Please click here for the sample code
onBeforeProcessPayment
String
Yes
Name of a callback function to be called when consumer clicked the button but before Apple Pay sheet is loaded. Usually used to make validations before the payment. Please click here for the sample code
onValidateMerchant
String
Yes
Name of a callback function to be called to validate the Merchant. This functions accepts a parameter validationUrl. Please click here for the sample code
onPaymentAuthorize
String
Yes
Name of a callback function to be called when Apple Payment is authorized for the completion of the transaction. This function accepts a parameter of PaymentResponse. Please click here for the sample code
onPaymentComplete
String
Yes
Name of a callback function to be called when Apple confirms the completion of the transaction. This function accepts a parameter of PaymentComplete. Please click here for the sample code
onCancel
String
Yes
Name of a callback function to be called when user cancels. Please click here for the sample code

Request Examples

Payment Request example

1
initAP: function() {
2
return {
3
buttonOptions: this.buttonOptions,
4
merchantIdentifier: "merchant.cardknoxdev.com",
5
requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
6
requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
7
onGetTransactionInfo: "apRequest.onGetTransactionInfo",
8
onGetShippingMethods: "apRequest.onGetShippingMethods",
9
onShippingContactSelected: "apRequest.onShippingContactSelected",
10
onShippingMethodSelected: "apRequest.onShippingMethodSelected",
11
onPaymentMethodSelected: "apRequest.onPaymentMethodSelected",
12
onValidateMerchant: "apRequest.onValidateMerchant",
13
onPaymentAuthorize: "apRequest.onPaymentAuthorize",
14
onPaymentComplete: "apRequest.onPaymentComplete",
15
onAPButtonLoaded: "apRequest.apButtonLoaded"
16
};
17
}

onAPButtonLoaded callback example

1
apButtonLoaded: function(resp) {
2
if (!resp) return;
3
if (resp.status === iStatus.success) {
4
showHide(this.buttonOptions.buttonContainer, true);
5
showHide("lbAPPayload", true);
6
} else if (resp.reason) {
7
alert(resp.reason);
8
}
9
}

onGetTransactionInfo callback example

1
taxAmt: null,
2
shippingMethod: null,
3
creditType: null,
4
getTransactionInfo: function (taxAmt, shippingMethod, creditType) {
5
try {
6
this.shippingMethod = shippingMethod || this.shippingMethod || {
7
"label": "Free Shipping",
8
"amount": "0.00",
9
"type": "final"
10
};
11
this.taxAmt = roundToNumber(taxAmt, 4) || this.taxAmt || 0.07;
12
this.creditType = creditType || this.creditType;
13
const amt = getAmount();
14
const lineItems = [
15
{
16
"label": "Subtotal",
17
"type": "final",
18
"amount": amt
19
},
20
this.shippingMethod
21
];
22
if (this.creditType === "credit") {
23
lineItems.push({
24
"label": "Credit Card Fee",
25
"amount": roundTo(0.0275*amt, 2),
26
"type": "final"
27
});
28
}
29
lineItems.push({
30
"label": "Estimated Tax",
31
"amount": roundTo(this.taxAmt*amt, 2),
32
"type": "final"
33
});
34
let totalAmt = 0;
35
lineItems.forEach((item) => {
36
totalAmt += parseFloat(item.amount)||0;
37
});
38
totalAmt = roundTo(totalAmt, 2);
39
40
return {
41
'lineItems': lineItems,
42
total: {
43
type: 'final',
44
label: 'Total',
45
amount: totalAmt,
46
}
47
};
48
} catch (err) {
49
console.error("getTransactionInfo error ", exMsg(err));
50
if (isDebugEnv) {
51
alert("getTransactionInfo error: "+exMsg(err));
52
}
53
}
54
},
55
onGetTransactionInfo: function () {
56
try {
57
return this.getTransactionInfo();
58
} catch (err) {
59
console.error("onGetTransactionInfo error ", exMsg(err));
60
if (isDebugEnv) {
61
alert("onGetTransactionInfo error: "+exMsg(err));
62
}
63
}
64
}

onGetShippingMethods callback example

1
onGetShippingMethods: function() {
2
return [
3
{
4
label: 'Free Shipping',
5
amount: '0.00',
6
identifier: 'free',
7
detail: 'Delivers in five business days',
8
},
9
{
10
label: 'Express Shipping',
11
amount: '5.00',
12
identifier: 'express',
13
detail: 'Delivers in two business days',
14
},
15
];
16
}

onShippingContactSelected callback example

1
onShippingContactSelected: function(shippingContact) {
2
const self = this;
3
return new Promise(function (resolve, reject) {
4
try {
5
console.log("shippingContact", JSON.stringify(shippingContact));
6
let taxAmt = 0.1;
7
const newShippingMethods = [
8
{
9
label: 'Free Shipping',
10
amount: '0.00',
11
identifier: 'free',
12
detail: 'Delivers in five business days',
13
}
14
];
15
if (shippingContact && shippingContact.administrativeArea) {
16
if (shippingContact.administrativeArea === "NY") {
17
taxAmt = 0.0875;
18
newShippingMethods.push(
19
{
20
label: 'Overnight Shipping',
21
amount: '10.00',
22
identifier: 'overnight',
23
detail: 'Delivers in one business days',
24
}
25
);
26
} else if (shippingContact.administrativeArea === "NJ") {
27
taxAmt = 0.07;
28
newShippingMethods.push(
29
{
30
label: 'Express Shipping',
31
amount: '5.00',
32
identifier: 'express',
33
detail: 'Delivers in two business days',
34
}
35
);
36
}
37
}
38
const resp = self.getTransactionInfo(taxAmt, newShippingMethods[0]);
39
resp.shippingMethods = newShippingMethods;
40
resolve(resp);
41
} catch (err) {
42
const apErr = {
43
code: "-101",
44
contactField: "",
45
message: exMsg(err)
46
}
47
console.error("onShippingContactSelected error.", exMsg(err));
48
if (isDebugEnv) {
49
setTimeout(function(){ alert("onShippingContactSelected error: "+exMsg(err))}, 100);
50
}
51
reject({errors: [err]});
52
}
53
})
54
}

onShippingMethodSelected callback example

1
onShippingMethodSelected: function(shippingMethod) {
2
const self = this;
3
return new Promise(function (resolve, reject) {
4
try {
5
console.log("shippingMethod", JSON.stringify(shippingMethod));
6
const resp = self.getTransactionInfo(null, shippingMethod);
7
resolve(resp);
8
} catch (err) {
9
const apErr = {
10
code: "-102",
11
contactField: "",
12
message: exMsg(err)
13
}
14
console.error("onShippingMethodSelected error.", exMsg(err));
15
if (isDebugEnv) {
16
setTimeout(function(){ alert("onShippingMethodSelected error: "+exMsg(err))}, 100);
17
}
18
reject({errors: [err]});
19
}
20
})
21
}

onPaymentMethodSelected callback example

1
onPaymentMethodSelected: function(paymentMethod) {
2
const self = this;
3
return new Promise(function (resolve, reject) {
4
try {
5
console.log("paymentMethod", JSON.stringify(paymentMethod));
6
const resp = self.getTransactionInfo(null, null, paymentMethod.type);
7
resolve(resp);
8
} catch (err) {
9
const apErr = {
10
code: "-102",
11
contactField: "",
12
message: exMsg(err)
13
}
14
console.error("onPaymentMethodSelected error.", exMsg(err));
15
if (isDebugEnv) {
16
setTimeout(function(){ alert("onPaymentMethodSelected error: "+exMsg(err))}, 100);
17
}
18
reject({errors: [err]});
19
}
20
})
21
}

onBeforeProcessPayment callback example

1
onBeforeProcessPayment: function () {
2
return new Promise(function (resolve, reject) {
3
try {
4
//Do some validation here
5
resolve(iStatus.success);
6
} catch (err) {
7
reject(err);
8
}
9
});
10
}
11
Payment callback example

onValidateMerchant callback example

1
onValidateMerchant: function(validationUrl) {
2
return new Promise(function (resolve, reject) {
3
try {
4
if (isDebugEnv) {
5
alert("onValidateMerchant: "+JSON.stringify(event), validationUrl);
6
}
7
8
getApplePaySession(validationUrl)
9
.then(function (response) {
10
try {
11
console.log(response);
12
resolve(response);
13
} catch (err) {
14
console.error("getApplePaySession exception.", JSON.stringify(err));
15
setTimeout(function(){ alert("onValidateMerchant error: "+exMsg(err))}, 100);
16
reject(err);
17
}
18
})
19
.catch(function(err) {
20
console.error("getApplePaySession error.", JSON.stringify(err));
21
setTimeout(function(){ alert("getApplePaySession error: "+exMsg(err))}, 100);
22
reject(err);
23
});
24
} catch (err) {
25
console.error("onValidateMerchant error.", JSON.stringify(err));
26
if (isDebugEnv) {
27
setTimeout(function(){ alert("onValidateMerchant error: "+exMsg(err))}, 100);
28
}
29
reject(err);
30
}
31
})
32
}

onPaymentAuthorize callback example

1
onPaymentAuthorize: function(paymentResponse) {
2
return new Promise(function (resolve, reject) {
3
try {
4
authorizeAPay(paymentResponse.token)
5
.then(function (response) {
6
try {
7
console.log(response);
8
setAPPayload(JSON.stringify(paymentResponse, null, 2));
9
const resp = JSON.parse(response);
10
if (!resp)
11
throw "Invalid response: "+ response;
12
if (resp.xError) {
13
throw resp;
14
}
15
resolve(response);
16
} catch (err) {
17
throw err;
18
// console.error("authorizeAPay exception.", JSON.stringify(err));
19
// setTimeout(function(){ alert("onPaymentAuthorize error: "+exMsg(err))}, 100);
20
// reject(err);
21
}
22
})
23
.catch(function(err) {
24
console.error("authorizeAPay error.", JSON.stringify(err));
25
apRequest.handleAPError(err);
26
reject(err);
27
});
28
} catch (err) {
29
console.error("onPaymentAuthorize error.", JSON.stringify(err));
30
apRequest.handleAPError(err);
31
reject(err);
32
}
33
})
34
}

onPaymentComplete callback example

1
onPaymentComplete: function(paymentComplete) {
2
if (paymentComplete.response) { //Success
3
const resp = JSON.parse(paymentComplete.response);
4
if (resp.xRefNum) {
5
setTimeout(function(){ alert("Thank you for your order:("+resp.xRefNum+")")}, 100);
6
} else {
7
setTimeout(function(){ alert("Thank you for your order.")}, 100);
8
}
9
} else if (paymentComplete.error) {
10
console.error("onPaymentComplete", exMsg(paymentComplete.error));
11
handleAPError(paymentComplete.error);
12
}
13
}

onCancel callback example

1
onCancel: function() {
2
setTimeout(function () { alert("Payment was canceled") }, 500);
3
}

ButtonOptions Object

Name
Type
Required
Description
buttonContainer
String
Yes
Name of the <div> where Apple Pay Button will be loaded
buttonColor
No
From Google documentation:
  • default: A Google-selected default value. Currently black but it may change over time (default).
  • black: A black button suitable for use on white or light backgrounds.
  • white: A white button suitable for use on colorful backgrounds.
buttonType
No
From Google documentation:
  • buy: "Buy with Google Pay" button (default).
  • donate: "Donate with Google Pay" button.
  • plain: Google Pay button without additional text.

Button Options example

buttonOptions: {
buttonContainer: "ap-container",
buttonColor: APButtonColor.black,
buttonType: APButtonType.pay
}

APButtonLoadedResult Object

Name
Type
Description
status
iStatus
There are 3 possible cases:
  • Apple Pay Button loaded successfully: status = iStatus.success
  • Apple Pay not supported: status = iStatus.unsupported
  • An error occurred while loading Apple Pay Button: status = iStatus.error
reason
String
If Apple Pay Button failed to load this field will be populated with the reason.

ApplePayContactField

Field names used for requesting contact information in a payment request.
Available fields:
  • name
  • email
  • phone
  • postalAddress

ApplePay Contact Field example

...
requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
...

PaymentContact Object

Name
Type
Description
phoneNumber
String
A phone number for the contact
emailAddress
String
An email address for the contact
givenName
String
The contact’s given name
familyName
String
The contact’s family name
addressLines
String[]
The street portion of the address for the contact
subLocality
String
Additional information associated with the location, typically defined at the city or town level (such as district or neighborhood), in a postal address
locality
String
The city for the contact
postalCode
String
The zip code or postal code, where applicable, for the contact
subAdministrativeArea
String
The subadministrative area (such as a county or other region) in a postal address
administrativeArea
String
The state for the contact
country
String
The name of the country or region for the contact
countryCode
String
The contact’s two-letter ISO 3166 country code

ShippingContactResponse Object

Name
Type
Description
lineItems
A set of line items that explain recurring payments and additional charges and discounts.
total
LineItem
A line item that represents the total for the payment.
shippingMethods
A list of Shipping Methods
error
Error
Error code

LineItem Object

We’re now supporting Recurring and Deferred Payments as well as Subscriptions. These features are supported starting iOS 15.4.
These features are available if support_recurring and/or support_subscription is part of requiredFeatures list.
Name
Type
Description
type
ApplePayLineItemType
A value that indicates whether the line item is final or pending
label
String
A required value that’s a short, description of the line item
amount
String
A required value that’s the monetary amount of the line item.
Recurring and Subscription
paymentTiming
ApplePayPaymentTiming object
The time that the payment occurs as part of a successful transaction
recurringPaymentStartDate
Date
The date of the first payment
recurringPaymentEndDate
Date
The date of the final payment
recurringPaymentIntervalUnit
ApplePayRecurringPaymentDateUnit
The amount of time — in calendar units, such as day, month, or year — that represents a fraction of the total payment interval
recurringPaymentIntervalCount
Long
The number of interval units that make up the total payment interval
deferredPaymentDate
Date
The date, in the future, of the payment
automaticReloadPaymentThresholdAmount
String
The balance an account reaches before the merchant applies the automatic reload amount

ApplePayLineItemType

  • final - A line item representing the known, final cost.
  • pending - A line item representing an estimated or unknown cost.

ApplePayRecurringPaymentDateUnit