Skip to content

Latest commit

 

History

History

apple-pay-example-netlify

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.well-known
.well-known
 
 
function
function
 
 
img
img
 
 
README.md
README.md
 
 
index.html
index.html
 
 
netlify.toml
netlify.toml
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

README.md

⚠️ This repository contains a standalone example to be used as a reference to help our partners integrate with Tilled. It is not intended to be implemented in a production environment nor is it intended to be installed as a dependency in any way.

Dependencies

Getting Started

Installation

Before you start

  1. Register a Tilled Sandbox Account

  2. Create secret and publishable API keys

    • Add your secret API key to the tilledSecretApiKey variable in app.js
    • Add your publishable API Key to the pk_PUBLISHABLE_KEY variable in index.html

  3. View your list of connected accounts and either use the auto-created Shovel Shop (demo) account or create your own connected account. Note: Prefix the name of the account with an asterisk (ex. '*The Surf Shop') to bypass needing to submit an onboarding form.

    • Add an active connected Account ID to the account_id variable in index.html

  4. Create an Apple Developer Account (this will be used when testing Apple Pay on your Website)

Running the server

  • When you created your site by importing your cloned repository to your new Netlify site, it had already deployed. Every time a change is made to the repository, the site is re-deployed. (i.e a change is made to the code or a file is added, moved, or deleted)

Domain Verification

⚠️ Important to note:⚠️

Apple's Documentation for Apple Pay on the Web instructs you to create a >Merchant Identifier, Payment Processing Certificate, and to Register your Domain through them. Tilled takes care of all of this on your behalf when you verify your Domain through our API using our Apple Domain Verification File.

You must register and verify all top-level domains and subdomains where you will display the Apple Pay button. For example, if you were to host a Payment Form that displays the Apple Pay button on https://pay.example.com/ and https://example.com/, you will need to complete Domain Verification for both.

⚠️ Important to note:⚠️

In the Production environment, to receive your Domain Verification files for Apple Pay, you will need to reach out to the Onboarding Team at integrations@tilled.com and provide the following information:

  1. On how many domains do you plan to host the Apple Pay button?
-   If each Merchant will be using a different domain or subdomain, you will need to include that in your answer if the Merchant will be hosting the Apple Pay button.
-   You will need to register and verify all top-level domains and subdomains where you will display the Apple Pay button. For example, if you were to host a payment form that displayed the Apple Pay button on  `https://pay.example.com/`  and  `https://example.com/`, you would need to complete domain verification for both.

  1. How many merchants are you planning to enable Apple Pay for?

  2. Will you be using your own payment/checkout page (using Tilled.js) or Tilled’s Checkout Sessions?

Verifying your Domain for Apple Pay

  1. In this example, we have already added Tilled's Apple Domain Verification File and it should be reachable at /.well-known/apple-developer-merchantid-domain-association in the domain path. You can find the file in the repo here.
    • Make sure the file is accessible in your domain at https://YOURDOMAIN.com/.well-known/apple-developer-merchantid-domain-association. The page should either show the contents of what is shown here or the file should be automatically downloaded when visiting the page.
  2. After confirming that your file is being hosted and is accessible, you will need to utilize Tilled's API to Create an Apple Domain, which will verify the Domain through Apple.

Example: POST /v1/apple-pay-domains Request 

$ curl -X POST 'https://sandbox-api.tilled.com/v1/apple-pay-domains' \
-H 'tilled-account: {{MERCHANT_ACCOUNT_ID}}' \
-H 'tilled-api-key: {{SECRET_KEY}}' \
-H 'Content-Type: application/json' \
--data-raw '{"hostname": "https://example.com"}'

Example: POST /v1/apple-pay-domains Response 

{
  "updated_at": "2019-08-24T14:15:22Z",
  "created_at": "2019-08-24T14:15:22Z",
  "id": "string",
  "hostname": "string",
  "account_id": "string"
}
  1. After successful Domain Verification, you are now able to start accepting Payments on your site.

Paying with Apple Pay

After completing the steps above, you will follow the instructions below to access your publicly facing domain where the server is being hosted:

  1. # to your Apple Sandbox Tester Account on the device you are using
  2. In Safari, open the link to your publicly-facing domain where the example is being hosted.
    • ** you are not able to make payments with Apple Pay in localhost **
  3. Click the Buy with Pay Button under Pay with Card.
    • Authorize the payment through the Apple Pay pop-up.
  • Optional: Look in the browser's developer console to see payment intent creation logs
  1. Go here to see your payment

Pay with Card or ACH (NOT Apple Pay)

To complete a card or ACH payment without using Apple Pay, complete the following steps:

  1. Navigate to your example's domain in your browser.
  2. Enter 4037111111000000 as the test card number with a valid expiration date and 123 as the CVV Code and click Pay
  • Optional: Look in the browser's developer console to see payment intent creation logs
  1. Go here to see your payment
  • To pay with ACH, you can click on the ACH tab and enter the following details:
    • Routing Number: 011000138
    • Account Number: Any 12-digit number can be passed as an account number.

This example was made with Apple Pay in mind and will show errors if you are not using a compatible device or browser, if you would like to see a payment example without Apple Pay, you can use our simple-payment-example.

What's Next?

Apple Pay | Tilled Docs
Tilled Docs
API Docs
Tilled.js