Javascript Braintree-谷歌支付按钮不显示
我只是将此代码剪切并粘贴到一个名为payg.html的html文件上: 我将“jsfiddel html部分”粘贴到页面的开头Javascript Braintree-谷歌支付按钮不显示,javascript,braintree,google-pay,Javascript,Braintree,Google Pay,我只是将此代码剪切并粘贴到一个名为payg.html的html文件上: 我将“jsfiddel html部分”粘贴到页面的开头 <div id="container"></div> <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> 按钮根本不显示,本例似乎不需要API或自定义私钥/公钥来显示按钮
<div id="container"></div>
<script async
src="https://pay.google.com/gp/p/js/pay.js"
onload="onGooglePayLoaded()"></script>
按钮根本不显示,本例似乎不需要API或自定义私钥/公钥来显示按钮
你能帮我吗
致以最诚挚的问候。其中一个可能的原因可能是与您的谷歌帐户相关的国家 我已经更新了您的JSFIDLE,使其包含一个
console.log
语句:
函数onGooglePayLoaded(){
const paymentsClient=getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.然后(功能(响应){
if(response.result){
addGooglePayButton();
//@todo在确认站点功能后预取付款数据以提高性能
//预取GooglePaymentData();
}其他{
console.log(“未准备好付款”);
}
})
.catch(函数(err){
//在开发人员控制台中显示调试错误
控制台错误(err);
});
}
您可以使用上面的链接重试并检查控制台输出吗
验证它是否与国家有关的一种方法是,在其中一个中创建一个新的Google帐户,然后重试。原因之一可能是与您的Google帐户关联的国家 我已经更新了您的JSFIDLE,使其包含一个
console.log
语句:
函数onGooglePayLoaded(){
const paymentsClient=getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.然后(功能(响应){
if(response.result){
addGooglePayButton();
//@todo在确认站点功能后预取付款数据以提高性能
//预取GooglePaymentData();
}其他{
console.log(“未准备好付款”);
}
})
.catch(函数(err){
//在开发人员控制台中显示调试错误
控制台错误(err);
});
}
您可以使用上面的链接重试并检查控制台输出吗
验证它是否与国家有关的一种方法是,在其中一个中创建一个新的Google帐户,然后重试。您好,谢谢您的回答:符合我的Google帐户原产国(法国支持)的JSFIDLE display“Acheter avec GPAY”控制台返回:{apiVersion:2,apiVersionMinor:0,paymentMethodData:{description:“万事达卡” •••• **09”,信息:{…},标记化数据:{…},键入:“卡”}在我的网站上没有更改,按钮没有显示,我将我所有的payg.html粘贴到这里,按钮出现在弹出窗口中。请注意,您是说它与JSFIDLE一起工作,但不在您的网站上?您如何测试您的html?它是使用
http://
/https://
本地还是文件://
?很难说问题出在哪里lem无法复制它。您是否可以尝试使用类似的工具复制并共享它?您好,我正在公共html测试页面上使用https://。服务器是“托管”的对于Plesk:glitch正在工作:。致以最良好的问候。如果相同的代码正在glitch上工作,但不是您自己的服务器,则一定是服务器配置问题。您是否能够共享它不工作的测试页面的URL?如果不能够直接观察,很难说问题出在哪里。否则,请检查浏览器控制台以了解erROR和警告。一个开始是响应头,如内容安全策略
。我将代码放在另一个域上,这里有一个测试页面链接不起作用。我将它放在另一台服务器上(标准Debian Apache和PHP,无丛)不再工作。我用4个不同的浏览器测试所有链接,并用另一个IP从我的手机测试所有链接。真的不明白(编辑:因为我不懂任何javascript,所以即使使用控制台也无法调试)。非常感谢您的回答:JSFIDLE显示“Acheter avec GPAY”,适合我的谷歌帐户原产国(法国支持)控制台返回:{apiVersion:2,apiVersionMinor:0,paymentMethodData:{description:“Mastercard •••• **09”,信息:{…},标记化数据:{…},键入:“卡”}在我的网站上没有更改,按钮没有显示,我将我所有的payg.html粘贴到这里,按钮出现在弹出窗口中。请注意,您是说它与JSFIDLE一起工作,但不在您的网站上?您如何测试您的html?它是使用http://
/https://
本地还是文件://
?很难说问题出在哪里lem无法复制它。您是否可以尝试使用类似的工具复制并共享它?您好,我正在公共html测试页面上使用https://。服务器是“托管”的对于Plesk:glitch正在工作:。致以最良好的问候。如果相同的代码正在glitch上工作,但不是您自己的服务器,则一定是服务器配置问题。您是否能够共享它不工作的测试页面的URL?如果不能够直接观察,很难说问题出在哪里。否则,请检查浏览器控制台以了解erROR和警告。一个开始是响应头,如内容安全策略
。我将代码放在另一个域上,这里有一个测试页面链接不起作用。我将它放在另一台服务器上(标准Debian Apache和PHP,无丛)不再工作。我用4个不同的浏览器测试所有链接,并用另一个IP从我的手机测试所有链接。真的不明白(编辑:因为我不懂任何javascript,我甚至不能用控制台调试)。祝你好运
<script> & </script>
/**
* Define the version of the Google Pay API referenced when creating your
* configuration
*
* @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
*/
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", "INTERAC", "JCB", "MASTERCARD", "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': 'example',
'gatewayMerchantId': 'exampleGatewayMerchantId'
}
};
/**
* 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() {
const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
// @todo a merchant ID is available for a production environment after approval by Google
// See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
// merchantId: '01234567890123456789',
merchantName: 'Example Merchant'
};
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: 'TEST'});
}
return paymentsClient;
}
/**
* 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();
// @todo prefetch payment data to improve performance after confirming site functionality
// prefetchGooglePaymentData();
}
})
.catch(function(err) {
// show error in developer console for debugging
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});
document.getElementById('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() {
return {
countryCode: 'US',
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
// set to cart total
totalPrice: '1.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
*/
function onGooglePaymentButtonClicked() {
const paymentDataRequest = getGooglePaymentDataRequest();
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
const paymentsClient = getGooglePaymentsClient();
paymentsClient.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
// handle the response
processPayment(paymentData);
})
.catch(function(err) {
// show error in developer console for debugging
console.error(err);
});
}
/**
* 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) {
// show returned data in developer console for debugging
console.log(paymentData);
// @todo pass payment token to your gateway to process payment
paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}