vue.js gpay必须同步处理clickEvent

cuxqih21  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(91)

我正在实施谷歌支付，它是工作正常，如果popup window是允许在浏览器中，否则它重定向到新的标签与错误消息
请稍后再试。
当我检查控制台时，我得到以下错误。
Uncatch（promise）错误：{“statusCode”：“DEVELOPER_ERROR”，“errorCode”：2，“statusMessage”：“检测到弹出窗口拦截器，必须同步处理clickEvent！“} v //mss/boq-payments-consumer//js/k=boq-payments-consumer.InstantbuyFrontendBuyflowPayUi。en_US。BwS96tLC-ZI。es5。0/am=MAwACA/d= l/excm= IZT63、Juhsoe、LEikze、PrPYRd、_b、_r、_tp、hc6Ubd、payview、-Ws9Tlc/艾德= l/dg=0/wt=2/rs= AMitfrhsY7WjQReJ17QIlOlnB0W-J-ooTA/m=_b，_tp，_r，Juhsoe，LEikZe，PrPYRd，hc6Ubd，IZT63，ws9Tlc：693支付：六九三：四七二
我在laravel blade文件上调用函数onGooglePayLoaded()，如下所示

eventBus.$on('after-payment-method-selected', function(payment) {
            $('.paypal-buttons').remove();
            document.getElementById("googlepay-button-container").innerHTML = "";
            document.getElementById("payment-request-button").innerHTML = "";
            $('#card-element').removeClass('StripeElement StripeElement--empty');
            document.getElementById("card-element").innerHTML = "";
            document.getElementById("stripe-payment-gateway").style.display = 'none';
            if (payment.method == 'googlepay') {
                setTimeout(function () { 
                    const DivEle= document.querySelector(".checkout-payment");
                    DivEleHight = DivEle.offsetHeight; 
                    DivEleHightAdd= DivEleHight+50;
                    document.querySelector(".checkout-stepper").style.height = DivEleHightAdd + "px";
                }, 300);
              onGooglePayLoaded()
            }

字符串
下面是我在developer.google上找到的JS

<script>
var cartResponseData;            
const baseRequest = {
    apiVersion: 2,
    apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "MIR", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
    type: 'PAYMENT_GATEWAY',
    parameters: {
            "gateway": "stripe",
            "stripe:version": "2018-10-31",
            "stripe:publishableKey": "{{ $clientId }}"
    }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
    type: 'CARD',
    parameters: {
        allowedAuthMethods: allowedCardAuthMethods,
        allowedCardNetworks: allowedCardNetworks
    }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
    {},
    baseCardPaymentMethod,
    {
        tokenizationSpecification: tokenizationSpecification
    }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
    return Object.assign(
        {},
        baseRequest,
        {
            allowedPaymentMethods: [baseCardPaymentMethod]
        }
    );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest(cartData) {
    const paymentDataRequest = Object.assign({}, baseRequest);
    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo(cartData);
    paymentDataRequest.merchantInfo = {
          merchantName: 'Example Merchant'
    };

    paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
    //paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];
    //paymentDataRequest.shippingAddressRequired = true;
    //paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
    //paymentDataRequest.shippingOptionRequired = true;

    return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
    if ( paymentsClient === null ) {
        paymentsClient = new google.payments.api.PaymentsClient({
            environment: "{{ $cartDetail['sandbox'] ? 'TEST' : 'PRODUCTION' }}",
            merchantInfo: {
                merchantName: "{{ $cartDetail['title'] }}",
                merchantId: "{{ $cartDetail['merchantid'] }}"
            },
            paymentDataCallbacks: {
                onPaymentAuthorized: onPaymentAuthorized
                //onPaymentDataChanged: onPaymentDataChanged
            }
        });
    }
    return paymentsClient;
}

function onPaymentAuthorized(paymentData) {
    return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
        .then(function() {
            const collection2 = document.getElementsByClassName("paymentLoaderBody");
            collection2[0].style.display = "inline-block";
            resolve({transactionState: 'SUCCESS'});
        })
        .catch(function() {
            resolve({
                transactionState: 'ERROR',
                error: {
                    intent: 'PAYMENT_AUTHORIZATION',
                    message: 'Insufficient funds',
                    reason: 'PAYMENT_DATA_INVALID'
                }
            });
        });
    });
}

/**
 * Handles dynamic buy flow shipping address and shipping options callback intents.
 *
 * @param {object} itermediatePaymentData response from Google Pay API a shipping address or shipping option is selected in the payment sheet.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet.
 */
function onPaymentDataChanged(intermediatePaymentData) {
    return new Promise(function(resolve, reject) {

        let shippingAddress = intermediatePaymentData.shippingAddress;
        let shippingOptionData = intermediatePaymentData.shippingOptionData;
        let paymentDataRequestUpdate = {};

        if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
            if(shippingAddress.administrativeArea == "NJ")  {
                paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
            }
            else {
                paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
                let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
                paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
            }
        }
        else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
            paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
        }

        resolve(paymentDataRequestUpdate);
    });
}

/**
 * Helper function to create a new TransactionInfo object.

 * @param string shippingOptionId respresenting the selected shipping option in the payment sheet.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function calculateNewTransactionInfo(shippingOptionId) {
    let newTransactionInfo = getGoogleTransactionInfo();

    let shippingCost = "{{isset($cartDetail['shipping']['price']) ? number_format($cartDetail['shipping']['price'], 2) : ''}}";
    newTransactionInfo.displayItems.push({
        type: "LINE_ITEM",
        label: "Shipping Cost",
        price: shippingCost,
        status: "FINAL"
    });

    let totalPrice = 0.00;
    newTransactionInfo.displayItems.forEach(displayItem => totalPrice += parseFloat(displayItem.price));
    newTransactionInfo.totalPrice = totalPrice.toString();

    return newTransactionInfo;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
        .then(function(response) {
            if (response.result) {
                addGooglePayButton();
            }
        })
        .catch(function(err) {
            console.error(err);
        });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
            paymentsClient.createButton({
                onClick: onGooglePaymentButtonClicked,
                allowedPaymentMethods: [baseCardPaymentMethod]
            });
    document.getElementById('googlepay-button-container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo(data) {
    return {
        displayItems: [
            {
              label: data.order_info.display_items.item_total.label,
              type: data.order_info.display_items.item_total.type,
              price: data.order_info.display_items.item_total.value,
            },
            {
              label: data.order_info.display_items.tax_total.label,
              type: data.order_info.display_items.tax_total.type,
              price: data.order_info.display_items.tax_total.value,
            },
            {
              label: data.order_info.display_items.shipping.label,
              type: data.order_info.display_items.shipping.type,
              price: data.order_info.display_items.shipping.value,
              status: "FINAL",
            },
        ],

        countryCode: "{{$cartDetail['country']}}",
        currencyCode: data.order_info.currency_code,
        totalPriceStatus: "FINAL",
        totalPrice: data.order_info.total,
        totalPriceLabel: "Total"
    };
}


/**
 * Provide Google Pay API with shipping address parameters when using dynamic buy flow.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters}
 * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest
 */
function getGoogleShippingAddressParameters() {
    return  {
        allowedCountryCodes: ['US'],
        phoneNumberRequired: true
  };
}

/**
 * Provide Google Pay API with shipping options and a default selected shipping option.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters|ShippingOptionParameters}
 * @returns {object} shipping option parameters, suitable for use as shippingOptionParameters property of PaymentDataRequest
 */
function getGoogleDefaultShippingOptions() {
    return {
        defaultSelectedOptionId: "shipping-001",
        shippingOptions: [
            {
              "id": "shipping-001",
              "label": "Free: Standard shipping",
              "description": "Free Shipping delivered in 5 business days."
            },
            {
              "id": "shipping-002",
              "label": "$1.99: Standard shipping",
              "description": "Standard shipping delivered in 3 business days."
            },
            {
              "id": "shipping-003",
              "label": "$10: Express shipping",
              "description": "Express shipping delivered in 1 business day."
            },
        ]
    };
}

/**
 * Provide Google Pay API with a payment data error.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError}
 * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate
 */
function getGoogleUnserviceableAddressError() {
    return {
        reason: "SHIPPING_ADDRESS_UNSERVICEABLE",
        message: "Cannot ship to the selected address",
        intent: "SHIPPING_ADDRESS"
    };
}

function getShippingCosts() {
    return {
        "shipping-001": "0.00",
        "shipping-002": "1.99",
        "shipping-003": "10.00"
    }
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
    const paymentDataRequest = getGooglePaymentDataRequest();
    // transactionInfo must be set but does not affect cache
    paymentDataRequest.transactionInfo = {
          totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
          currencyCode: 'USD'
    };
    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
async function onGooglePaymentButtonClicked() {
    var cartData = await getCartDetails();
    
    const paymentDataRequest = getGooglePaymentDataRequest(cartData);
    //paymentDataRequest.transactionInfo = getGoogleTransactionInfo(cartData);

    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.loadPaymentData(paymentDataRequest);
}

function getCartDetails(){
    return new Promise(function(resolve, reject) {
        jQuery.ajax({
            url: "{{ route('googlepay.smart-button.create-order') }}",
            method: 'GET',
            success: function(response){
               resolve(response);
            }
        });
    });
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            //show returned data in developer console for debugging
            paymentToken = paymentData.paymentMethodData.tokenizationData.token;
            if(paymentToken != ''){
                  jQuery.ajax({
                     url: "{{ route('googlepay.standard.success') }}",
                     method: 'POST',
                     data: { data : paymentData,
                      _token: "{{ csrf_token() }}"},
                     success: function(result){
                         if(result.success){
                             window.location.href = result.url;
                         }
                     }});  
             }
            resolve({});
        }, 3000);
    });
}

</script>
<script async src="https://pay.google.com/gp/p/js/pay.js"></script>

型
我正在使用vue js和laravel
我该怎么弥补。我找了很多，但没有找到任何相关的东西。

vue.js

1条答案

按热度按时间
hgb9j2n6

hgb9j2n61#

我的实现也遇到了同样的问题。问题是您的await getCartDetails();在onGooglePaymentButtonClicked中;必须同步地处理该功能。我试图提交我的Blazor表单，并使用Promise，继续在同一函数中加载Google Pay。相反，我现在在向最终用户显示Google Pay按钮之前调用验证。

赞(0）分享  回复(0）举报  2023-08-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com