Apple Pay™ for Web

Apple Pay™ for Web
It is assumed you already have a Judopay account. If you do not, sign up for a sandbox account here.
Prerequisites
From the Web SDK integration guide:
﻿Create a paymentSession﻿﻿
﻿Add the Payment Form to your Website﻿﻿
To hide the payment form iFrame, use:
<div id="payment-iframe" style="position:absolute;width:0;height:0;border:0;"></div>
The payment form iFrame must be loaded onto the page in order for payments to work. 
However displaying the form to the consumer is not required for this transaction type.
Direct from Judopay:
Judopay JudoID
A valid apple-developer-merchantid-domain-association
Get it here﻿.
From the Merchant: 
Domain(s) being used for Apple Pay™
These are the domain(s) where the Apple Pay™ button will be displayed, for example the checkout page. 
These must be SSL enabled domains, Apple will not allow non-encrypted domains to be used.
Account(s) being used for Apple Pay™
﻿
Integrating Apple Pay™
Step One: Place the Apple Pay™ Button
Using Judopay's Web SDK:
Within your checkout page code, add the following for placement of the Apple Pay™ button:
<div id="apple-pay-button-container" width="100%" align="left"></div> 
This <div> tag will be exchanged to display the Apple Pay™ button.
(On a browser or device that can use Apple Pay™, for example an iPhone, or Safari Browser on a Mac).
﻿
Step Two: Update the Apple Pay™ Button
Include the following script to create the Apple Pay™ button:
This sample will call the handleApplePayButtonClick function, when the button is clicked.
Create Apple Pay Button
<script>
var button = judo.digitalWallets.getApplePayButton({
height: 38, 
width: 240, 
language: 'EN', 
style: 'black', 
type: 'buy'});

button.onclick = handleApplePayButtonClick

document.getElementById('apple-pay-button-container').appendChild(button)

</script>   
<script>
var button = judo.digitalWallets.getApplePayButton({
height: 38, 
width: 240, 
language: 'EN', 
style: 'black', 
type: 'buy'});

button.onclick = handleApplePayButtonClick

document.getElementById('apple-pay-button-container').appendChild(button)

</script>   
﻿
Style:
black
white
Type (﻿Optional﻿):
If set to buy:
Buy now with Apple, will be displayed.
If omitted:
The Apple Logo will be displayed.
﻿
Step Three: Handle the Apple Pay™ Button Click
Include the following script to handle the Apple Pay™ Payment:
Replace the items in {{brackets}} with your values.
Handle Apple Pay Payment
<script>
function handleApplePayButtonClick() {

 let applePayConfiguration = {  
      amount: '{{amount}}',  
      currency: '{{currency}}',  
      yourConsumerReference: '{{yourConsumerReference}}',  
      yourPaymentReference: '{{yourPaymentReference}}',  
      judoId: '{{judoId}}', 
      initiativeContext: '{{yourDomainName}}'
 }

 judo.digitalWallets.invokePaymentWithApplePay({{paymentSession}}, configuration)
      .then(handleSuccess)
      .catch(handleError)
} 
</script>
<script>
function handleApplePayButtonClick() {

 let applePayConfiguration = {  
      amount: '{{amount}}',  
      currency: '{{currency}}',  
      yourConsumerReference: '{{yourConsumerReference}}',  
      yourPaymentReference: '{{yourPaymentReference}}',  
      judoId: '{{judoId}}', 
      initiativeContext: '{{yourDomainName}}'
 }

 judo.digitalWallets.invokePaymentWithApplePay({{paymentSession}}, configuration)
      .then(handleSuccess)
      .catch(handleError)
} 
</script>
﻿
Configuration Object Parameter Descriptions
See below for more details on the parameters that create the applePayConfiguration object:
Apple Pay™ Configuration Object Parameter Descriptions:
﻿
2. Ensure the configuration options for:
amount
currency
yourConsumerReference
yourPaymentReference

match those used when obtaining the valid paymentSession.

This is used to cross reference the validity of the transaction.
﻿
Step Four: Handle the Response
﻿
﻿
Apple Pay™ Recurring Payments
Apple Pay™ recurring payments enables you to process a standard Apple Pay™ transaction, however by setting the initialRecurringPayment flag in the initial transaction, will result in an Apple Pay™ recurring payment token (also known as a Merchant Primary Account Number, or MPAN) being generated and sent to Judopay.
The Apple Pay™ MPAN is stored by Judopay, and an associated Judopay card token is returned in the Apple Pay™ transaction response. 
This associated Judopay card token can then be used by you for future Merchant Initiated Transactions.
You will be responsible for initiating the recurring / MIT transactions, including those generated from an Apple Pay™ recurring transaction type.
Call Judopay's Transaction API /transactions/payments endpoint directly, including the recurring payment card token, obtained from the initial transaction.

Card tokens generated from Apple Pay™ recurring transactions can be utilised for both scheduled (recurring MIT) and unscheduled (ad hoc MIT) transactions.
For more information, see the Transaction API Reference documentation.
﻿
To trigger an initial transaction that allows you to set up an Apple Pay™ recurring payment token for future MITs:
Define the recurring payment information
Supply the initialRecurringPayment flag in your configuration object (see, Step Three: Handle the Apple Pay™ Button Click﻿). Supplying the recurring payment information will:
Inform Apple Pay™ of future recurring payments.
Update the Apple Pay™ UI with the recurring payment information displayed to the consumer.
Add the details field to your configuration object
For more information on this object’s interface, see: Step Three: Handle the Apple Pay™ Button Click﻿), if this is not already supplied.
For more information on this object’s interface, see PaymentDetailsBase in the W3C Payment Request API Specification.﻿
As part of the detailsobject, include the modifiers field.
This is an array of objects of the type: PaymentRequestModifier 
(See, W3C Payment Request API Specification).
Define a PaymentRequestModifier in the array.
Here, the data field is used to define the  Apple Pay™ Recurring Payment Request.﻿ 
An example details object, used to supply recurring payment information:
Ensure you change the values to your own.
Example Details Object
const details = {
  total: {
    label: "Total",
    amount: {
      value: "4.99",
      currency: "GBP"
    }
  },
  modifiers: [
    {
      supportedMethods: "https://apple.com/apple-pay", //must be set to this
      data: {
        recurringPaymentRequest: {
            paymentDescription: "A description of the recurring payment to display to the user in the payment sheet.",
            managementURL: "https://judopay.example.com" //A URL to a web page where the user can update or delete the payment method for the recurring payment.
            regularBilling: {
                label: "Recurring",
                amount: "4.99",
                paymentTiming: "recurring" //must be set to this
            }
        }
    }
  ]
}
const details = {
  total: {
    label: "Total",
    amount: {
      value: "4.99",
      currency: "GBP"
    }
  },
  modifiers: [
    {
      supportedMethods: "https://apple.com/apple-pay", //must be set to this
      data: {
        recurringPaymentRequest: {
            paymentDescription: "A description of the recurring payment to display to the user in the payment sheet.",
            managementURL: "https://judopay.example.com" //A URL to a web page where the user can update or delete the payment method for the recurring payment.
            regularBilling: {
                label: "Recurring",
                amount: "4.99",
                paymentTiming: "recurring" //must be set to this
            }
        }
    }
  ]
}
﻿
The above example details object includes all the mandatory fields.
For more information on optional fields, see the Apple Pay Documentation.
﻿
Domain Registration
To get your valid Apple™ domain registration:
Create the following folder on your web server's root domain directory:
./well-known
In the folder, create a web server identity file:
apple-developer-merchantid-domain-association
Download the following contents to the web server identity file:
apple-developer-merchantid-domain-association.txt
﻿
Make sure you remove the .txt file extension.
   4. Complete a web server test:
Make sure the web server identity file is accessible externally from your website.
In a browser go to:
https://www.yourdomain.com/.well-known/apple-developer-merchantid-domain-association
Change the location to your website domain.
Ensure that the apple-developer-merchantid-domain-association file is downloadable.
Apple will use this location to check the validity of your domain. It is important this is externally accessible.
    5. Notify Judopay of the following details:
JudoID(s) 
List your JudoIDs you wish enabled for Apple Pay™
Domain(s)
List your domain URLs you wish enabled for Apple Pay™ 
Judopay developer support will enable your account(s) with the Apple Pay™ configuration that will allow you to perform Apple Pay™ transactions from those domains.
Once complete, we will reply to your original request notifying you that this has been actioned.
﻿
Testing your Wallet Payment Integration
Wallet Payment Scenarios (via Web SDK Integration):
﻿Apple Pay™﻿﻿
For more information see, Testing your Wallet Payment Integration﻿.
Updated 24 Sep 2024
Token Payment Request
Google Pay™ for Web