Apple Pay Usage Guide

Configure the payment provider

As a first step, activate Apple Pay Service under the Settings > Services tab.

By activating Apple Pay Service, a new Apple Pay tab will show up in the Settings. You can manage your Apple Pay Certificates and register new domain names under this tab.

After activating Apple Pay Service, you will be allowed to use Apple Pay as a payment method for all of our products such as Invoice, Shopping Cart and Simple Payments.

On the Settings > Apple Pay page, by default you will see one item where the domain name will match with your payment provider's domain name.

Simple Domain Registration

To register the domain name of your website you only have to go to the Settings > Apple Pay page. Click on the Add New Certificate and click on the Custom Configuration button.

When the domain registration page is displayed, you can add multiple domain names by clicking on the Add URL button. You can add up to 100 domains.

It's really important to download the Domain Verification file from the site before saving. Make this file available on all of your domain names. You can test the availability of the domain verification files by clicking on the link below each URL textbox.

Advanced Domain Registration

You need an Apple Developer License for this configuration method. If you don't have one or you don't want to register one: read more about the Simple Domain Registration process.

In order to process payments through Apple Pay, you will need to create a Processing Certificate and a Merchant Certificate. The processing certificate is used to decrypt payment information, while the merchant certificate is used to authenticate sessions with Apple Pay servers.

Doing so involves creating a CSR (Certificate Signing Request) for both certificates, uploading them to Apple via your Apple Developer Portal and downloading the certificates created by Apple. After that you need to convert them to .pem format and upload them to us.

Generating a Merchant Identity Certificate

1. Create a new private key and CSR. Make sure to replace 'Company Name' with your company name, and 'US' with your country:

openssl req -new -newkey rsa:2048 -nodes -keyout applepay.key -out applepay.csr -subj '/O=Company Name/C=US'

This will generate two files, applepay.key which is your Private Key, and applepay.csr which is your Certificate Signing Request.

2. In your Apple Developer Portal, locate the 'Apple Pay Merchant Identity Certificate' section and upload the applepay.csr file.

3. Download the Merchant Certificate from the Apple Developer portal which will result in a file named merchant_id.cer.

4. Convert merchant_id.cer to .pem format using this command:

openssl x509 -inform der -in merchant_id.cer -out merchant_id.pem

5. Login to your Control Panel and navigate to Settings > Apple Pay > Create Advanced.

6. Copy the contents of merchant_id.pem, starting at -----BEGIN CERTIFICATE----- and ending at -----END CERTIFICATE-----.

7. Paste this in the Merchant Certificate textbox.

8. Copy the contents of applepay.key, starting at -----BEGIN PRIVATE KEY----- and ending at -----END PRIVATE KEY-----.

9. Paste this in the Merchant Certificate Key textbox.

10. Save.

Generating a Payment Processing Certificate

There are two ways to create and convert the Processing Certificate.

Using your terminal

1. Create a new private key that will be used to create the CSR:

openssl ecparam -out private.key -name prime256v1 -genkey

2. Create a new CSR using the private key from the prior step:

openssl req -new -sha256 -key private.key -nodes -out request.csr

3. In your Apple Developer Portal, locate the 'Apple Pay Payment Processing Certificate' section and upload the request.csr file.

4. Download the processing certificate from the Apple Developer portal, which will result in a file named apple_pay.cer. This contains both the certificate and the private key.

5. Convert apple_pay.cer to .pem format using this command:

openssl x509 -inform DER -outform PEM -in apple_pay.cer -out ApplePay.crt.pem

6. Convert the private key to .pem format using these commands:

   a. openssl x509 -inform DER -outform PEM -in apple_pay.cer -out temp.pem
   b. openssl pkcs12 -export -out key.p12 -inkey private.key -in temp.pem
   c. openssl pkcs12 -in key.p12 -out ApplePay.key.pem -nocerts -nodes

7. Login to your Control Panel and navigate to Settings > Apple Pay > Create Advanced.

8. Copy the contents of ApplePay.crt.pem, starting at -----BEGIN CERTIFICATE----- and ending at -----END CERTIFICATE-----.

9. Paste this in the Processing Certificate textbox.

10. Copy the contents of ApplePay.key.pem, starting at -----BEGIN PRIVATE KEY----- and ending at -----END PRIVATE KEY-----.

11. Paste this in the Processing Certificate Key textbox.

12. Save.

Using the UI

1. Follow steps 1-4 shown above to get the apple_pay.cer certificate.

2. Double click the apple_pay.cer file to add it to your Mac Keychain.

3. Open the Keychain app and locate the Apple Pay key that was just added.

4. Export the certificate (make sure the type is certificate) in .p12 format.

5. Run the following commands to convert both the certificate and private key to .pem format, replacing [filename].p12 with the filename of the exported .p12 file:

   a. openssl pkcs12 -in [filename].p12 -out ApplePay.crt.pem -nokeys
   b. openssl pkcs12 -in [filename].p12 -out ApplePay.key.pem -nocerts

6. Login to your Control Panel and navigate to Settings > Apple Pay > Create Advanced.

7. Copy the contents of ApplePay.crt.pem, starting at -----BEGIN CERTIFICATE----- and ending at -----END CERTIFICATE-----.

8. Paste this in the Processing Certificate textbox.

9. Copy the contents of ApplePay.key.pem, starting at -----BEGIN PRIVATE KEY----- and ending at -----END PRIVATE KEY-----.

10. Paste this in the Processing Certificate Key textbox.

11. Save.

Example usage

TIP

Please replace {PAYMENT_PROVIDER_URL} with . And the {YOUR_URL} will be your webshop's domain name.

Use with Tokenizer

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example Checkout Site</title>
    <style>
        .main {
            display: flex;
            flex-flow: column;
            align-items: center;
        }
        .content {
            display: flex;
            flex-flow: column;
            max-width: 33vw;

            .cart-title {
                display: flex;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 40px;
            }

            .cart {
                display: flex;
                flex-flow: column;
                margin-bottom: 40px;

                .items {
                    display: flex;
                    flex-flow: column;
                    row-gap: 10px;

                    .item {
                        display: flex;
                        flex-flow: row;
                        justify-content: space-between;
                    }
                }
            }

            .details {
                .btn.primary {
                    width: 300px;
                    height: 40px;
                    border-radius: 4px;
                    background: transparent;
                    cursor: pointer;

                    &:active {
                        box-shadow: grey 3px 3px;
                    }
                }
            }
        }

        .notification {
            position: absolute;
            right: 45px;
            top: 45px;
            color: white;
            border-radius: 4px;
            padding: 10px;
            
            &.success {
                background: green;
            }
            &.fail {
                background: darkred;
            }
            &.hidden {
                display: none;
            }
        }
    </style>

    <script language="javascript" src="https://{PAYMENT_PROVIDER_URL}/tokenizer/tokenizer.js"></script>
</head>
<body>
<div class="main">
    <div class="header">
        <h1>Example Webshop</h1>
    </div>
    <div class="content">
        <div class="cart">
            <label class="cart-title">Cart</label>
            <div class="items">
                <div class="item">
                    <div class="title">Pizza</div>
                    <div class="price">$ <span class="amount">10.00</span></div>
                </div>
                <div class="item">
                    <div class="title">Hot-Dog</div>
                    <div class="price">$ <span class="amount">5.00</span></div>
                </div>
            </div>
        </div>
        <div class="details">
            <div class="total-amount">
                <h3>Total Amount: $ <span class="amount" id="total-amount">15.00</span></h3>
            </div>
            <div id="pay"></div>
            <button class="btn primary">Submit</button>
        </div>
    </div>
    <div class="notification hidden">
        <div class="title"></div>
    </div>
</div>
<script lang="js" src="tokenizer-example.js"></script>
</body>
</html>

Use with Apple Pay JS

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin
            src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"
    ></script>
    <title>Example Checkout Site</title>
    <style>
        apple-pay-button {
            --apple-pay-button-width: 300px;
            --apple-pay-button-height: 50px;
            --apple-pay-button-border-radius: 3px;
            --apple-pay-button-padding: 0px 0px;
            --apple-pay-button-box-sizing: border-box;
        }

        .main {
            display: flex;
            flex-flow: column;
            align-items: center;
        }
        .content {
            display: flex;
            flex-flow: column;
            max-width: 33vw;

            .cart-title {
                display: flex;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 40px;
            }

            .cart {
                display: flex;
                flex-flow: column;
                margin-bottom: 40px;
                .items {
                    display: flex;
                    flex-flow: column;
                    row-gap: 10px;

                    .item {
                        display: flex;
                        flex-flow: row;
                        justify-content: space-between;
                    }
                }
            }

            .details {
                .btn.primary {
                    width: 300px;
                    height: 40px;
                    border-radius: 4px;
                    background: transparent;
                    cursor: pointer;

                    &:active {
                        box-shadow: grey 3px 3px;
                    }
                }
            }
        }

        .notification {
            position: absolute;
            right: 45px;
            top: 45px;

            color: white;
            border-radius: 4px;
            padding: 10px;
            &.success {
                background: green;
            }
            &.fail {
                background: darkred;
            }
            &.hidden {
                display: none;
            }
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <h1>Example Webshop</h1>
    </div>
    <div class="content">
        <div class="cart">
            <label class="cart-title">Cart</label>
            <div class="items">
                <div class="item">
                    <div class="title">Pizza</div>
                    <div class="price">$ <span class="amount">10.00</span></div>
                </div>
                <div class="item">
                    <div class="title">Hot-Dog</div>
                    <div class="price">$ <span class="amount">5.00</span></div>
                </div>
            </div>
        </div>
        <div class="details">
            <div class="total-amount">
                <h3>Total Amount: $ <span class="amount" id="total-amount">15.00</span></h3>
            </div>
            <apple-pay-button buttonstyle="black" type="plain" locale="en-US" onclick="onApplePayButtonClicked()"></apple-pay-button>
        </div>
    </div>
    <div class="notification hidden">
        <div class="title"></div>
    </div>
</div>
<script lang="js" src="applepay-js-example.js"></script>
</body>
</html>

Use with Payment Request API

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin
            src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"
    ></script>
    <title>Example Checkout Site</title>
    <style>
        apple-pay-button {
            --apple-pay-button-width: 300px;
            --apple-pay-button-height: 50px;
            --apple-pay-button-border-radius: 3px;
            --apple-pay-button-padding: 0px 0px;
            --apple-pay-button-box-sizing: border-box;
        }

        .main {
            display: flex;
            flex-flow: column;
            align-items: center;
        }
        .content {
            display: flex;
            flex-flow: column;
            max-width: 33vw;

            .cart-title {
                display: flex;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 40px;
            }

            .cart {
                display: flex;
                flex-flow: column;
                margin-bottom: 40px;
                .items {
                    display: flex;
                    flex-flow: column;
                    row-gap: 10px;

                    .item {
                        display: flex;
                        flex-flow: row;
                        justify-content: space-between;
                    }
                }
            }

            .details {
                .btn.primary {
                    width: 300px;
                    height: 40px;
                    border-radius: 4px;
                    background: transparent;
                    cursor: pointer;

                    &:active {
                        box-shadow: grey 3px 3px;
                    }
                }
            }
        }

        .notification {
            position: absolute;
            right: 45px;
            top: 45px;

            color: white;
            border-radius: 4px;
            padding: 10px;
            &.success {
                background: green;
            }
            &.fail {
                background: darkred;
            }
            &.hidden {
                display: none;
            }
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <h1>Example Webshop</h1>
    </div>
    <div class="content">
        <div class="cart">
            <label class="cart-title">Cart</label>
            <div class="items">
                <div class="item">
                    <div class="title">Pizza</div>
                    <div class="price">$ <span class="amount">10.00</span></div>
                </div>
                <div class="item">
                    <div class="title">Hot-Dog</div>
                    <div class="price">$ <span class="amount">5.00</span></div>
                </div>
            </div>
        </div>
        <div class="details">
            <div class="total-amount">
                <h3>Total Amount: $ <span class="amount" id="total-amount">15.00</span></h3>
            </div>
            <apple-pay-button buttonstyle="black" type="plain" locale="en-US" onclick="onApplePayButtonClicked()"></apple-pay-button>
        </div>
    </div>
    <div class="notification hidden">
        <div class="title"></div>
    </div>
</div>
<script lang="js" src="payment-request-api-example.js"></script>
</body>
</html>