Comment on page
Apple Pay Hosted Checkout Objects Reference (Request)
const iStatus = {
success: 100,
unsupported: -100,
error: -200
}
Use: iStatus.success
const APButtonColor = {
black: "black",
white: "white",
whiteOutline: "white-outline"
}
Use:
APButtonColor.blackconst APButtonType = {
buy: "buy",
pay: "pay",
plain: "plain",
order: "order",
donate: "donate",
continue: "continue",
checkout: "check-out"
}
Use:
APButtonType.buyconst APRequiredFeatures = {
address_validation: "address_validation",
support_recurring: "support_recurring",
support_subscription : "support_subscription"
}
Use:
APRequiredFeatures.address_validationconst APErrorCode = {
shippingContactInvalid: "shippingContactInvalid",
billingContactInvalid: "billingContactInvalid",
addressUnserviceable: "addressUnserviceable",
couponCodeInvalid: "couponCodeInvalid",
couponCodeExpired: "couponCodeExpired",
unknown: "unknown"
}
Use:
APErrorCode.addressUnserviceableconst 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.administrativeAreaThe 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 |
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
}
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
}
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
}
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
}
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
}
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
}
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
}
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
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
}
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
}
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
}
1
onCancel: function() {
2
setTimeout(function () { alert("Payment was canceled") }, 500);
3
}
Name | Type | Required | Description |
buttonContainer | String | Yes | Name of the <div> where Apple Pay Button will be loaded |
buttonColor | No | From Google documentation:
| |
buttonType | No | From Google documentation:
|
buttonOptions: {
buttonContainer: "ap-container",
buttonColor: APButtonColor.black,
buttonType: APButtonType.pay
}
Name | Type | Description |
status | iStatus | There are 3 possible cases:
|
reason | String | If Apple Pay Button failed to load this field will be populated with the reason. |
Field names used for requesting contact information in a payment request.
Available fields:
- name
- email
- phone
- postalAddress
...
requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
...
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 |
Name | Type | Description |
lineItems | A set of line items that explain recurring payments and additional charges and discounts. | |
total | A line item that represents the total for the payment. | |
shippingMethods | A list of Shipping Methods | |
error | Error code |
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 |
final- A line item representing the known, final cost.pending- A line item representing an estimated or unknown cost.
yearmonthdayhourminute