Google Pay™ for Web

google pay™ for web the judopay web sdk implements our own easy to use google wallet handling service which wraps google's api requirements, making it very easy for our merchants to implement google pay™ for web for more information on the google pay™ payment flow, see their https //developers google com/pay/api/android/overview it is assumed you already have a judopay account if you do not, sign up for a sandbox account https //www judopay com/apply sandbox account prerequisites make sure you are using web sdk version 0 0 18 (or higher) from the web sdk integration guide docid 40dwe6lbub7vdkza1qydc 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 account (sandbox and eventually live) judopay judoid merchant requirement (google requirement) prior to going live with google pay™ web payments, you must have a valid google verified live merchant id to receive your live merchant id follow google pay™'s https //developers google com/pay/api/web/guides/test and deploy/integration checklist to ensure you have completed all the required steps in your integration begin the process to obtain production access from google, https //developers google com/pay/api/web/guides/test and deploy/request prod access integrating google pay™ google pay™ button style to help you implement google pay™ within your apps, see their https //developers google com/pay/api/web/guides/brand guidelines the google pay™ button guidelines have been updated as follows buttons have rounded edges the color of the button can no longer be set (if you do set this, it will not break anything, but will no longer have any effect) the long and short button types have been deprecated and replaced with types buy and plain you can set the following parameters in the buttonstyle object (defined in the google pay configuration parameter descriptions) parameter description type string buy donate plain book checkout order pay subscribe see below for button type details sizemode string static fill height string sets the button height in pixels width string sets the button width in pixels locale string sets the localised language versions of the buy with text button type details buy if set to buy if the consumer is not logged into their google pay™ account buy with g pay will be displayed buy if set to buy if the consumer is logged into their google pay™ account, the details of their selected card will be displayed donate if set to donate, donate with g pay will be displayed plain if set to plain, the g pay logo will be displayed book if set to book, book with g pay will be displayed checkout if set to checkout, checkout with g pay will be displayed order if set to order, order with g pay will be displayed pay if set to pay, pay with g pay will be displayed subscribe if set to subscribe, subscribe with g pay will be displayed step one displaying the google pay™ button displaying the google pay button const googlepayconfiguration = { judoid "yourjudoid", amount "12 99", currency "gbp", yourpaymentreference "yourpaymentreferenc", yourconsumerreference "yourconsumerreference", paymentsession "yourpaymentsession", environment "test", transactionmode "payment", buttonstyle { type "buy", sizemode "static", locale "en", width "200", height "36" } paymentrequest = { merchantinfo { merchantid 'yourmerchantid' //issued after registration }, allowedpaymentmethods \[{ parameters { allowedcardnetworks \['visa', 'mastercard', 'amex'] } }], transactioninfo { totalpricestatus 'final', totalprice '1 0', currencycode 'gbp', countrycode 'gb' } } onsuccess handlesuccess, onerror handleerror } //initialize google pay button with google pay configuration object const button = judo digitalwallets getgooglepaybutton(googlepayconfiguration) //add the google pay button to your page const container = document getelementbyid('button container') container append(button) configuration object parameter descriptions see below for more details on the parameters that create the googlepayconfiguration object google 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 paymentsession string required required a unique string that references the payment session of this transaction the paymentsession will expire in 30 minutes , unless an expirydate is set in the /paymentsession request body to get the reference use any google merchant id when creating a google pay™ transaction request in sandbox use your verified live merchant id when creating a live google pay™ transaction request choose from the following transaction modes payment pre auth use the paymentsession response reference to populate this field transactionmode string required required represents type of transaction values payment pre auth onsuccess function required required set as the function you want called when the transaction is successful the response object will be passed as a parameter for more information on how to handle the response, docid\ t13itu 7qx7ylrxgvj5jt onerror function required required set as the function you want called when there is an error the error object will be passed as a parameter for more information on how to handle the response, see docid\ t13itu 7qx7ylrxgvj5jt paymentrequest object required required use this to configure your site's support for the google pay™ api for more information on this parameter and the fields it can contain, see https //developers google com/pay/api/web/reference/request objects#paymentdatarequest (for example, if you include the optional flags, such as emailrequired (default=true), this will affect whether the related information (e g the google pay email) is available in the result object, which is returned when the transaction is complete) you are required to provide the following mandatory fields https //developers google com/pay/api/web/reference/request objects#merchantinfo to process payments, set the merchantid attribute in this object use the merchantid provided after registering with google pay™ this is a requirement for processing a google pay™ payment in production https //developers google com/pay/api/web/reference/request objects#paymentmethod the only mandatory attribute to be provided parameters allowedcardnetworks https //developers google com/pay/api/web/reference/request objects#transactioninfo the example paymentrequest object snippet in step one, shows the fields that must be provided (judopay will provide the other required fields) environment string optional optional represents the environment type google pay™ will run in values production test buttonstyle object optional optional change the style of the google pay™ button for more details on the fields you can set, see /#google pay button style onpaymentdatachanged function optional optional used when payment data changes in the payment form, for example shipping address shipping options for more information on this parameter, see https //developers google com/pay/api/web/reference/request objects#paymentdatacallbacks onpaymentauthorized function optional optional used when a payment is authorized in the payment form for more information on this parameter, see https //developers google com/pay/api/web/reference/request objects#paymentdatacallbacks onreadytopaychange function optional optional used when the consumer's isreadytopay state changes change the application's behaviour, based on whether or not the consumer is ready to pay when existingpaymentmethodrequired = true, inspect both result isreadytopay and result paymentmethodpresent to determine if the consumer isreadytopay and has a paymentmethodpresent alternatively result isbuttonvisibl e can be used to determine whether or google pay™ button will be displayed existingpaymentmethodrequired is taken into account with result isbuttonvisible also raised as event " readytopaychange " for more information on this parameter, see https //www npmjs com/package/@google pay/button element challengerequestindicator string optional optional indicates the type of challenge request you wish to apply values nopreference nochallenge no challenge required challengepreferred a challenge is preferred for this transaction challengeasmandate must challenge this transaction this should not be included in the same configuration object as scaexemption scaexemption string optional optional to apply for an exemption from sca, for a customer initiated transaction values lowvalue transactions up to €45 do not require sca, up to a maximum of five consecutive transactions, or a cumulative limit of €100 trustedbeneficiary provides the cardholder the option to add the merchant to their trusted list transactionriskanalysis allows for certain remote transactions to be exempt from sca, provided a robust risk analysis is performed this should not be included in the same configuration object as challengerequestindicator 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 step two 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 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 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 docid zrsihomuew xnrq4pbtj testing your wallet payment integration wallet payment scenarios (via web sdk integration) docid\ t13itu 7qx7ylrxgvj5jt for more information see, docid\ iyacwlidscqikmcfrrkhp