https://argylebandboosters.com/usio/usio-wallet.js

1let usioURL;
2
3window.addEventListener("load", function () {
4    try {
5        usioURL = 'https://payments.usiopay.com';
6    } catch {
7        console.log('Please check that you have added the ID parameter to your script tag with the value of "usioWalletScript".');
8        return;
9    }
10
11    const applePayCDN = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
12    const googlePayCDN = "https://pay.google.com/gp/p/js/pay.js";
13
14    if (document.getElementById('btnApplePay') && !document.querySelector(`script[src="${applePayCDN}"]`)) {
15        const script = document.createElement("script");
16        script.src = applePayCDN;
17        script.crossOrigin = "anonymous";
18        document.head.appendChild(script);
19    }
20
21    if (document.getElementById('btnGooglePay') && !document.querySelector(`script[src="${googlePayCDN}"]`)) {
22        const script = document.createElement("script");
23        script.src = googlePayCDN;
24        script.onload = function () {
25            onGooglePayLoaded(paymentInformation);
26        };
27        document.head.appendChild(script);
28    }
29});
30
31async function onApplePayButtonClicked(paymentDetails, validateData, debitsOnly = false) {
32    if (!usioURL) { console.log('Please check that you have added the ID parameter to your script tag with the value of "usioWalletScript".'); return; }
33    if (!PaymentRequest) { return; }
34    if (!paymentDetails || !validateData) { return; }
35
36    const paymentMethodData = {
37        "supportedMethods": "https://apple.com/apple-pay",
38        "data": {
39            "version": 12,
40            "merchantIdentifier": validateData.merchantIdentifier,
41            "merchantCapabilities": debitsOnly ? ["supports3DS", "supportsDebit"] : ["supports3DS"],
42            "supportedNetworks": ["amex", "discover", "masterCard", "visa"],
43            "countryCode": "US"
44        }
45    };
46
47    const paymentOptions = {
48        "requestPayerName": true,
49        "requestBillingAddress": true,
50        "requestPayerEmail": true,
51        "requestPayerPhone": true,
52        "requestShipping": true,
53        "shippingType": "shipping"
54    };
55
56    try {
57        const request = new PaymentRequest([paymentMethodData], paymentDetails, paymentOptions);
58
59        request.onmerchantvalidation = async (event) => {
60            const requestBody = {
61                applePayData: validateData,
62                validationURL: event.validationURL
63            };
64            try {
65                const response = await fetch(usioURL + "/2.0/paymentutilities.svc/JSON/USIOWalletValidation", {
66                    method: 'POST',
67                    headers: {
68                        'Content-Type': 'application/json'
69                    },
70                    body: JSON.stringify(requestBody)
71                })
72                    .catch(err => {
73                        console.error("Error fetching merchant session", err);
74                        event.complete("fail");
75                        return;
76                    })
77
78                if (response.ok) {
79                    const merchantSessionPromise = await response.json();
80                    event.complete(merchantSessionPromise);
81                }
82                else {
83                    event.complete("fail");
84                }
85            } catch (err) {
86                console.error("Merchant validation failed:", err);
87                event.complete("fail");
88            }
89        };
90
91        request.onpaymentmethodchange = event => {
92            event.updateWith({});
93        };
94
95        request.onshippingaddresschange = event => {
96            event.updateWith({});
97        };
98
99        request.onshippingoptionchange = event => {
100            event.updateWith({});
101        };
102
103        const response = await request.show();
104        await response.complete("success");
105        CompleteTransaction({
106            token:      response.details.token,
107            walletType: 2,
108            authorizedAmount: paymentDetails.total.amount.value, // amount shown in Apple sheet
109            contact: {
110                name:    response.payerName    ?? null,
111                email:   response.payerEmail   ?? null,
112                phone:   response.payerPhone   ?? null,
113                billing:  response.details.billingContact  ?? null,
114                shipping: response.details.shippingContact ?? null
115            }
116        });
117    } catch (ex) {
118        console.log(ex);
119    }
120}
121
122const baseRequest = {
123    apiVersion: 2,
124    apiVersionMinor: 0
125};
126
127const baseCardPaymentMethod = {
128    type: "CARD",
129    parameters: {
130        allowedAuthMethods:       ["PAN_ONLY", "CRYPTOGRAM_3DS"],
131        allowedCardNetworks:      ["AMEX", "DISCOVER", "MASTERCARD", "VISA"],
132        billingAddressRequired:   true,
133        billingAddressParameters: {
134            format:              "FULL",
135            phoneNumberRequired: true
136        }
137    }
138};
139
140let paymentsClient = null;
141
142function onGooglePayLoaded(paymentInformation) {
143    if (!usioURL) { console.log('Please check that you have added the ID parameter to your script tag with the value of "usioWalletScript".'); return; }
144    if (!paymentInformation) { return; }
145    const paymentsClient = getGooglePaymentsClient();
146    return paymentsClient.isReadyToPay(Object.assign({}, baseRequest, {
147        allowedPaymentMethods: [baseCardPaymentMethod],
148        merchantInfo: {
149            merchantId:              paymentInformation.merchantID,
150            merchantOrigin:          paymentInformation.merchantOrigin,
151            merchantName:            paymentInformation.merchantName,
152            authJwt:                 paymentInformation.authJwt,
153            softwareInfo: {

154                id:      paymentInformation.softwareId,
155                version: paymentInformation.softwareVersion,
156            }
157        },
158        existingPaymentMethodRequired: true
159    }))
160        .then(function (response) {
161            if (response.result) {
162                const btnGooglePay = document.getElementById('btnGooglePay');
163                let paymentsClient = getGooglePaymentsClient();
164                const button = paymentsClient.createButton({ buttonColor: 'default', buttonType: 'buy', onClick: () => onGooglePaymentButtonClicked(paymentInformation), allowedPaymentMethods: [baseCardPaymentMethod] });
165                btnGooglePay.appendChild(button);
166                prefetchGooglePaymentData(paymentInformation);
167            }
168        })
169        .catch(function (err) {
170            console.error(err);
171        });
172}
173
174function onGooglePaymentButtonClicked(paymentInformation) {
175    if (!usioURL) { console.log('Please check that you have added the ID parameter to your script tag with the value of "usioWalletScript".'); return; }
176    if (!paymentInformation) { return; }
177    const paymentDataRequest = getGooglePaymentDataRequest(paymentInformation);
178    paymentDataRequest.transactionInfo = getGoogleTransactionInfo(paymentInformation);
179
180    const paymentsClient = getGooglePaymentsClient();
181    paymentsClient.loadPaymentData(paymentDataRequest)
182        .then(function (paymentData) {
183            const billingAddress = paymentData.paymentMethodData?.info?.billingAddress ?? null;
184            CompleteTransaction({
185                token:      paymentData.paymentMethodData.tokenizationData.token,
186                walletType: 1,
187                authorizedAmount: paymentDataRequest.transactionInfo.totalPrice, // amount shown in sheet
188                contact: {
189                    name:    billingAddress?.name        ?? null,
190                    email:   paymentData.email           ?? null,
191                    phone:   billingAddress?.phoneNumber ?? null,
192                    billing: billingAddress              ?? null
193                }
194            });
195        })
196        .catch(function (err) {
197            console.error(err);
198        });
199}
200
201function getGoogleTransactionInfo(paymentInformation) {
202    const liveAmount = document.querySelector('[data-wallet-amount]')?.dataset?.walletAmount
203        ?? paymentInformation.totalAmount;
204    return {
205        countryCode: 'US',
206        currencyCode: 'USD',
207        totalPriceStatus: 'FINAL',
208        totalPrice: liveAmount
209    };
210}
211
212function getGooglePaymentDataRequest(paymentInformation) {
213    const paymentDataRequest = Object.assign({}, baseRequest);
214
215    const tokenizationSpecification = {
216        type: "PAYMENT_GATEWAY",
217        parameters: {
218            'gateway': 'usio',
219            'gatewayMerchantId': paymentInformation.merchantID
220        }
221    };
222
223    const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, { tokenizationSpecification: tokenizationSpecification });
224
225    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
226    paymentDataRequest.transactionInfo = getGoogleTransactionInfo(paymentInformation);
227    paymentDataRequest.merchantInfo = {
228        merchantId:     paymentInformation.merchantID,
229        merchantOrigin: paymentInformation.merchantOrigin,
230        merchantName:   paymentInformation.merchantName,
231        authJwt:        paymentInformation.authJwt,
232        softwareInfo: {
233            id:      paymentInformation.softwareId,
234            version: paymentInformation.softwareVersion,
235        }
236    };
237    paymentDataRequest.emailRequired = true;
238
239    return paymentDataRequest;
240}
241
242function getGooglePaymentsClient() {
243    if (paymentsClient === null) { paymentsClient = new google.payments.api.PaymentsClient({ environment: "PRODUCTION" }); }
244    return paymentsClient;
245}
246
247function prefetchGooglePaymentData(paymentInformation) {
248    const paymentDataRequest = getGooglePaymentDataRequest(paymentInformation);
249    paymentDataRequest.transactionInfo = {
250        totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
251        currencyCode: 'USD'
252    };
253    paymentsClient = getGooglePaymentsClient();
254    paymentsClient.prefetchPaymentData(paymentDataRequest);
255}