");
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
const data = {
amount: totalAmount,
payload: applePayload
};
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
});
}
```
{% hint style="info" %}
For full sample code, please refer to [Apple Pay iFields Integration](https://docs.solapayments.com/mobile-wallets/apple-pay-hosted-checkout/apple-pay-ifields-integration)
{% endhint %}
**Step 4:** Create JavaScript function that will initialize iFields.
```javascript
initAP: function() {
return {
buttonOptions: this.buttonOptions,
merchantIdentifier: "merchant.cardknoxdev.com",
requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
requiredShippingContactFields: ['postalAddress', 'name', 'phone', 'email'],
onGetTransactionInfo: "apRequest.onGetTransactionInfo",
onGetShippingMethods: "apRequest.onGetShippingMethods",
onShippingContactSelected: "apRequest.onShippingContactSelected",
onShippingMethodSelected: "apRequest.onShippingMethodSelected",
onPaymentMethodSelected: "apRequest.onPaymentMethodSelected",
onValidateMerchant: "apRequest.onValidateMerchant",
onPaymentAuthorize: "apRequest.onPaymentAuthorize",
onPaymentComplete: "apRequest.onPaymentComplete",
onAPButtonLoaded: "apRequest.apButtonLoaded",
isDebug: true
};
}
```
initAP function above returns [Request Object](https://docs.solapayments.com/mobile-wallets/apple-pay-hosted-checkout/apple-pay-hosted-checkout-objects-reference-request).
#### Enable Apple Pay
**window\.ckApplePay object** - controls initialization of Apple Pay button
| **Method** | **Call Required** | **Description** |
| -------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| enableApplePay | Yes | Initializes and enables Apple Pay Button.
Takes EnableApplePayParams object.
|
| updateAmount | Conditional | Updates amount on Apple Sheet. |
{% hint style="info" %}
You can provide either All, One, or None of the parameters for enableApplePay call.
* initFunction **Required** - either function name or function itself to initialize Apple Pay.
* amountField **Optional** - if specified, the Apple Pay total amount will be automatically updated whenever the amount has changed.
* amountField *is not* specified - in this case, it’s up to you to provide the correct amount for Apple Pay. One of the ways to do it is to call window\.ckApplePay.updateAmount manually.
{% endhint %}
#### EnableApplePayParams Object
| **Name** | **Type** | **Required** | **Description** |
| ------------ | -------------- | ------------ | ----------------------------------------------------------------------------------------------------------------- |
| initFunction | String\|Object | Yes | Either function name or function itself to initialize Apple Pay |
| amountField | String\|Object | No | Field containing amount.
Could be either the name of the field (String) or
the field itself (Object)
|
{% code title="Enable Apple Pay example" %}
```javascript
ckApplePay.enableApplePay({
initFunction: 'apRequest.initAP',
amountField: 'amount'
});
```
{% endcode %}
***
### Server-Side Integration
#### Server Endpoint Creation
A server endpoint is needed in order to accept the Apple Payload from Hosted Checkout.
**Step 1:** Create an endpoint and method for API Integration on your server side that takes an object containing total transaction amount and [Apple Payload](https://docs.solapayments.com/mobile-wallets/apple-pay-hosted-checkout-objects-reference-response#applepayload-object) and makes a call to Sola.\
Sample Object:
```
const req = {
amount: 1.45,
payload:
}
```
#### API Integration
{% hint style="info" %}
This section assumes that you already know how to integrate other payments with [Cardknox API](https://docs.cardknox.com/api/transaction)
{% endhint %}
**Below are the steps to integrate Apple Pay with the Sola API:**
Once the consumer confirms the payment, Apple Pay API generates an [Apple Payload](https://docs.solapayments.com/mobile-wallets/apple-pay-hosted-checkout-objects-reference-response#applepayload-object) in the form of a JSON string.
Integration Steps:
1. Extract the paymentData from the payload.
2. Encode it with Base64 encoding.
3. Set `xCardNum` field to the encoded value above.
4. Set `xDigitalWalletType` to ApplePay.
5. Set the remaining required fields:
1. `xAmount` the Transaction Amount.
2. `xCommand` - Set to one of the values that starts with cc: like cc:sale, cc:auth, etc.
3. `xBillFirstName`
4. `xBillLastName`
5. `xBillStreet`
6. `xBillCity`
7. `xBillState`
8. `xBillZip`
Sample Request:
```javascript
public async Task Authorize(AuthorizeRequest req)
{
var reqGateway = new
{
xKey = "Your xKey",
xAmount = (decimal)req.amount,
xCommand = "cc:sale",
xVersion = "4.5.4",
xSoftwareName= "Your Software Name",
xSoftwareVersion = "Your Software Version",
xBillFirstName = req.paymentResponse.billingContact.givenName,
xBillLastName = req.paymentResponse.billingContact.familyName,
xBillStreet = req.paymentResponse.billingContact.addressLines[0],
xBillCity = req.paymentResponse.billingContact.locality,
xBillState = req.paymentResponse.billingContact.administrativeArea,
xBillZip = req.paymentResponse.billingContact.postalCode,
xShipFirstName = req.paymentResponse.shippingContact.givenName,
xShipLastName = req.paymentResponse.shippingContact.familyName,
xShipStreet = req.paymentResponse.shippingContact.addressLines[0],
xShipCity = req.paymentResponse.shippingContact.locality,
xShipState = req.paymentResponse.shippingContact.administrativeArea,
xShipZip = req.paymentResponse.shippingContact.postalCode,
xdigitalwallettype = "applepay",
xcardnum = Convert.ToBase64String(Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(req.payload.token.paymentData)))
};
var respMsg = "";
using (var http = new HttpClient())
{
var resp = await http.PostAsJsonAsync("https://x1.cardknox.com/gatewayJSON", reqGateway);
respMsg = await resp.Content.ReadAsStringAsync();
.....
}
.....
}
```
For more details, please contact your Sola Representative.
## Questions?
Contact