Skip to content

Instantly share code, notes, and snippets.

@adardesign
Forked from bmyangar/GooglePay.js
Created August 6, 2020 18:06
Show Gist options
  • Save adardesign/6688112fa794f9415ffad0551d5db2c9 to your computer and use it in GitHub Desktop.
Save adardesign/6688112fa794f9415ffad0551d5db2c9 to your computer and use it in GitHub Desktop.
$.when(adrma.fetchData({
url: "https://pay.google.com/gp/p/js/pay.js",
dataType: "script",
}),
adrma.fetchData({
url: "https://js.braintreegateway.com/web/3.64.1/js/client.min.js",
dataType: "script",
}),
adrma.fetchData({
url: "https://js.braintreegateway.com/web/3.64.1/js/google-payment.min.js",
dataType: "script",
})).then(function() {
// You will need a button element on your page styled according to Google's brand guidelines
// https://developers.google.com/pay/api/web/guides/brand-guidelines
var paymentsClient = new google.payments.api.PaymentsClient({
environment: 'TEST' // Or 'PRODUCTION'
});
var gPaybutton = paymentsClient.createButton({
onClick: () => console.log('TODO: click handler')
});
$("body").prepend(gPaybutton);
var button = document.querySelector('.gpay-button');
braintree.client.create({
authorization: "sandbox_ykvt3vxx_hcrc97h9tfbz8b6c"
}, function(clientErr, clientInstance) {
braintree.googlePayment.create({
client: clientInstance,
googlePayVersion: 2,
googleMerchantId: 'BCR2DN6T3PSN74SE' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
}, function(googlePaymentErr, googlePaymentInstance) {
paymentsClient.isReadyToPay({
// see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods,
existingPaymentMethodRequired: true // Optional
}).then(function(response) {
if (response.result) {
button.addEventListener('click', function(event) {
event.preventDefault();
var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
transactionInfo: {
currencyCode: 'USD',
totalPriceStatus: 'FINAL',
totalPrice: '100.00' // Your amount
}
});
// We recommend collecting billing address information, at minimum
// billing postal code, and passing that billing postal code with all
// Google Pay card transactions as a best practice.
// See all available options at https://developers.google.com/pay/api/web/reference/object
var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
cardPaymentMethod.parameters.billingAddressRequired = true;
cardPaymentMethod.parameters.billingAddressParameters = {
format: 'FULL',
phoneNumberRequired: true
};
paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
googlePaymentInstance.parseResponse(paymentData, function(err, result) {
if (err) {
// Handle parsing error
}
// Send result.nonce to your server
// result.type may be either "AndroidPayCard" or "PayPalAccount", and
// paymentData will contain the billingAddress for card payments
});
}).catch(function(err) {
// Handle errors
});
});
}
}).catch(function(err) {
// Handle errors
});
});
// Set up other Braintree components
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment