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 web sdk docid 40dwe6lbub7vdkza1qydc web sdk docid 40dwe6lbub7vdkza1qydc 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 apple pay™ for web docid\ oelqjygambce2048qcjp1 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> style black white type ( ( optional 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> configuration object parameter descriptions see below for more details on the parameters that create the applepayconfiguration object apple pay™ configuration object parameter descriptions parameter description judoid string required required unique id supplied by judopay specific to a merchant and/or location format 100100100 maximum length 9 characters do not include spaces or dashes amount decimal required required the amount to process format two decimal places for currencies using a different structure please contact judopay for support currency string required required the currency of the transaction any iso 4217 alphabetic currency code gbp usd eur yourconsumerreference string required required unique reference to anonymously identify your customer advisable to use guids must be below 40 characters yourpaymentreference string required required your unique reference for this payment format maximum length 50 characters this value should be unique in order to protect your customers against duplicate transactions with a server side integration, if a payment reference is not supplied, the transaction will not be processed initiativecontext string optional optional your fully qualified domain name associated with your apple pay merchant identity certificate the default is window\ location hostname for example initiativecontext ="web judopay com" methodconfiguration object optional optional this parameter contains the following fields version number supportednetworks array containing any of the following strings “amex” “chinaunionpay” “discover” “mastercard” “visa” “maestro” “jcb” merchantcapabilities array containing any of the following strings "supports3ds" "supportscredit" "supportsdebit" "supportsemv" countrycode string details object optional optional provides information about the specific transaction use this object to supply the information for recurring payments for more information, see apple pay™ for web docid\ oelqjygambce2048qcjp1 see here for more details on the parameter fields options object optional optional enables you to set options to control the behaviour of the user agent see here for more details on the parameter fields onshippingaddresschange method optional optional dispatched when the user changes their shipping address see here for more details on this parameter onshippingoptionchange method optional optional dispatched when the user changes a shipping option see here for more details on this parameter delayedauthorisation boolean optional optional for preauths only set to true to authenticate a card holder with 3d secure, without performing payment authorisation when set to true, the 3d secure authentication status is returned in the response the payment authorisation is carried out at the stage when you are ready to collect the amount from the customer the default value = false initialrecurringpayment boolean optional optional indicates if this initial payment is part of a recurring payment for more information, see apple pay™ for web docid\ oelqjygambce2048qcjp1 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 all the judopay web sdk transaction methods return a promise once the authorisation is complete, the promise will be either fulfilled or rejected fulfilled you will receive a json object response (a judopay receipt object) for more information and schema on the json object, see transaction api reference docid\ bcxnm5keok nlnrztafut depending on the result the consumer should be redirected to the appropriate outcome page for example, if the result = success redirect the consumer to the success page this page should display the necessary transaction information (found in the judopay receipt object) rejected you will receive an error object for more information on error responses returned, see payment form error messages docid\ qfxawpaql 2evfp8y94d the consumer should be redirected to an error page response example const onfulfillment = (receiptobject) => { const { result } = receiptobject //redirect to appropriate page depending on the result (success/failure/declined page) } const onrejection = (error) => { //redirect to error page and handle error } for more information on the response codes, see codes and descriptions docid zrsihomuew xnrq4pbtj 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, apple pay™ for web docid\ oelqjygambce2048qcjp1 ) 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 apple pay™ for web docid\ oelqjygambce2048qcjp1 ), 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 details object, 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™ for web docid\ oelqjygambce2048qcjp1 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 } } } ] } 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 https //archbee doc uploads s3 amazonaws com/o juvbuqry8kfjt7vtm8v hsiklye7p586xc6um2u55 20240924 084453 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 mailto\ developersupport\@judopay com 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) testing digital wallet payments via web sdk docid\ t13itu 7qx7ylrxgvj5jt for more information see, testing your wallet payment integration docid\ iyacwlidscqikmcfrrkhp