-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Release 3.4.0
- Loading branch information
Showing
123 changed files
with
7,182 additions
and
403 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
187 changes: 187 additions & 0 deletions
187
assets/javascripts/front/checkout/model/payment/googlepay.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| /* globals wc_pagarme_checkout */ | ||
| /* jshint esversion: 11 */ | ||
| let pagarmeGooglePay = { | ||
| woocommercePaymentMethods: 'input[name="payment_method"]', | ||
| googlePayAllowedBrands: ["AMEX", "ELO", "MASTERCARD", "VISA"], | ||
| pagarmeAllowedBrands: wc_pagarme_googlepay.allowedCcFlags, | ||
| woocommercePaymentId: "#payment_method_woo-pagarme-payments-credit_card", | ||
|
|
||
| getGooglePaymentsClient: function () { | ||
| let environment = "TEST"; | ||
| if (parseInt(wc_pagarme_googlepay.isSandboxMode, 10) !== 1) { | ||
| environment = "PRODUCTION"; | ||
| } | ||
|
|
||
| return new google.payments.api.PaymentsClient({ | ||
| environment: environment, | ||
| }); | ||
| }, | ||
|
|
||
| addGooglePayButton: function () { | ||
| if (jQuery('#pagarme-googlepay button').length > 0) { | ||
| return; | ||
| } | ||
|
|
||
| let paymentsClient = this.getGooglePaymentsClient(); | ||
| const button = paymentsClient.createButton({ | ||
| buttonColor: "default", | ||
| buttonType: "pay", | ||
| buttonRadius: 5, | ||
| buttonLocale: "pt", | ||
| buttonSizeMode: "fill", | ||
| onClick: this.onGooglePaymentButtonClicked | ||
| }); | ||
| jQuery('#pagarme-googlepay').append(button); | ||
| }, | ||
|
|
||
| onPaymentAuthorized: function (paymentData) { | ||
| return new Promise(function (resolve, reject) { | ||
| processPayment(paymentData) | ||
| .then(function () { | ||
| resolve({ transactionState: "SUCCESS" }); | ||
| }) | ||
| .catch(function () { | ||
| resolve({ | ||
| transactionState: "ERROR", | ||
| error: { | ||
| intent: "PAYMENT_AUTHORIZATION", | ||
| message: "Insufficient funds", | ||
| reason: "PAYMENT_DATA_INVALID", | ||
| }, | ||
| }); | ||
| }); | ||
| }); | ||
| }, | ||
|
|
||
| getGooglePaymentDataRequest: function () { | ||
| const baseRequest = { | ||
| apiVersion: 2, | ||
| apiVersionMinor: 0, | ||
| }; | ||
|
|
||
| const tokenizationSpecification = { | ||
| type: "PAYMENT_GATEWAY", | ||
| parameters: { | ||
| gateway: "pagarme", | ||
| gatewayMerchantId: wc_pagarme_googlepay.accountId, | ||
| }, | ||
| }; | ||
|
|
||
| const baseCardPaymentMethod = { | ||
| type: "CARD", | ||
| parameters: { | ||
| allowedAuthMethods: ["PAN_ONLY"], | ||
| allowedCardNetworks: this.getAllowedCardNetworks(), | ||
| }, | ||
| }; | ||
|
|
||
| const cardPaymentMethod = Object.assign({}, baseCardPaymentMethod, { | ||
| tokenizationSpecification: tokenizationSpecification, | ||
| }); | ||
|
|
||
| const paymentDataRequest = Object.assign({}, baseRequest); | ||
| paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; | ||
| paymentDataRequest.transactionInfo = | ||
| this.getGoogleTransactionInfo(); | ||
| paymentDataRequest.merchantInfo = { | ||
| merchantId: wc_pagarme_googlepay.merchantId, | ||
| merchantName: wc_pagarme_googlepay.merchantName, | ||
| }; | ||
|
|
||
| return paymentDataRequest; | ||
| }, | ||
|
|
||
| getAllowedCardNetworks: function() { | ||
| const self = this; | ||
| let allowedCardNetworks = []; | ||
|
|
||
| jQuery.each(this.googlePayAllowedBrands, function(key, value) { | ||
| const index = jQuery.inArray(value.toLowerCase(), self.pagarmeAllowedBrands); | ||
| if(index !== -1) { | ||
| allowedCardNetworks.push(value.toUpperCase()); | ||
| } | ||
| }); | ||
|
|
||
| return allowedCardNetworks; | ||
| }, | ||
|
|
||
| onGooglePaymentButtonClicked: function () { | ||
| const self = this; | ||
| const paymentDataRequest = pagarmeGooglePay.getGooglePaymentDataRequest(); | ||
| paymentDataRequest.transactionInfo = pagarmeGooglePay.getGoogleTransactionInfo(); | ||
|
|
||
| const paymentsClient = pagarmeGooglePay.getGooglePaymentsClient(); | ||
| paymentsClient | ||
| .loadPaymentData(paymentDataRequest) | ||
| .then(function (paymentData) { | ||
| pagarmeGooglePay.processPayment(paymentData, self); | ||
| }) | ||
| .catch(function (err) { | ||
| jQuery(pagarmeGooglePay.woocommercePaymentId ).val("woo-pagarme-payments-credit_card"); | ||
| if (err.statusCode === "CANCELED") { | ||
| return; | ||
| } | ||
| console.error(err); | ||
| }); | ||
| }, | ||
|
|
||
| getGoogleTransactionInfo: function () { | ||
| return { | ||
| countryCode: "BR", | ||
| currencyCode: "BRL", | ||
| totalPriceStatus: "FINAL", | ||
| totalPrice: cartTotal.toString(), | ||
| }; | ||
| }, | ||
|
|
||
| prefetchGooglePaymentData: function () { | ||
| const paymentDataRequest = this.getGooglePaymentDataRequest(); | ||
| paymentDataRequest.transactionInfo = { | ||
| totalPriceStatus: "NOT_CURRENTLY_KNOWN", | ||
| currencyCode: "BRL", | ||
| }; | ||
| const paymentsClient = this.getGooglePaymentsClient(); | ||
| paymentsClient.prefetchPaymentData(paymentDataRequest); | ||
| }, | ||
|
|
||
|
|
||
| processPayment: function(paymentData) { | ||
| let checkoutPaymentElement = pagarmeGooglePay.getCheckoutPaymentElement(); | ||
| let inputName = 'pagarme[googlepay][googlepay][payload]'; | ||
| let input = jQuery(document.createElement('input')); | ||
| if (!(checkoutPaymentElement instanceof jQuery)) { | ||
| checkoutPaymentElement = jQuery(checkoutPaymentElement); | ||
| } | ||
| input.attr('type', 'hidden') | ||
| .attr('name', inputName) | ||
| .attr('id', "googlepaytoken") | ||
| .attr('value', paymentData.paymentMethodData.tokenizationData.token); | ||
| checkoutPaymentElement.append(input); | ||
| jQuery(pagarmeGooglePay.woocommercePaymentId ).val("woo-pagarme-payments-googlepay"); | ||
| checkoutPaymentElement.submit(); | ||
| jQuery('form#order_review').submit(); | ||
| jQuery(pagarmeGooglePay.woocommercePaymentId ).val("woo-pagarme-payments-credit_card"); | ||
| }, | ||
|
|
||
| getCheckoutPaymentElement: function () { | ||
| const value = jQuery('form .payment_methods input[name="payment_method"]:checked').val(); | ||
| return jQuery('.wc_payment_method.payment_method_' + value); | ||
| }, | ||
|
|
||
| addEventListener: function () { | ||
| jQuery(document.body).on('updated_checkout payment_method_selected', function () { | ||
| pagarmeGooglePay.addGooglePayButton(); | ||
| }); | ||
|
|
||
| jQuery(`${this.fieldsetCardElements} input`).on('change', function () { | ||
| pagarmeGooglePay.clearErrorMessages(); | ||
| }); | ||
|
|
||
| }, | ||
|
|
||
| start: function () { | ||
| this.addEventListener(); | ||
| } | ||
| }; | ||
|
|
||
| pagarmeGooglePay.start(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
assets/javascripts/front/reactCheckout/payments/GooglePay/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import PropTypes from "prop-types"; | ||
| import GooglePayButton from "@google-pay/button-react"; | ||
| import useGooglepay from "./useGooglepay"; | ||
| import { useDispatch, useSelect } from "@wordpress/data"; | ||
| import pagarmeTokenStore from "../store/googlepay" | ||
|
|
||
| const { registerPaymentMethod } = window.wc.wcBlocksRegistry; | ||
|
|
||
| const backendConfig = wc.wcSettings.getSetting( | ||
| "woo-pagarme-payments-googlepay_data", | ||
| ); | ||
|
|
||
| const environment = backendConfig.isSandboxMode ? "TEST" : "PRODUCTION"; | ||
|
|
||
| const PagarmeGooglePayComponent = (props) => { | ||
| const { emitResponse, eventRegistration } = props; | ||
|
|
||
| useGooglepay(emitResponse, eventRegistration, backendConfig); | ||
|
|
||
| const { | ||
| setToken | ||
| } = useDispatch(pagarmeTokenStore); | ||
|
|
||
| return ( | ||
|
|
||
| <GooglePayButton | ||
| environment={environment} | ||
| buttonLocale="pt" | ||
| buttonType="pay" | ||
| paymentRequest={{ | ||
| apiVersion: 2, | ||
| apiVersionMinor: 0, | ||
| allowedPaymentMethods: [ | ||
| { | ||
| type: "CARD", | ||
| parameters: { | ||
| allowedAuthMethods: ["PAN_ONLY"], | ||
| allowedCardNetworks: ["MASTERCARD", "VISA", "ELO"], | ||
| }, | ||
| tokenizationSpecification: { | ||
| type: "PAYMENT_GATEWAY", | ||
| parameters: { | ||
| gateway: 'pagarme', | ||
| gatewayMerchantId: backendConfig.accountId, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| merchantInfo: { | ||
| merchantId: backendConfig.merchantId, | ||
| merchantName: backendConfig.merchantName, | ||
| }, | ||
| transactionInfo: { | ||
| totalPriceStatus: "FINAL", | ||
| totalPriceLabel: "Total", | ||
| totalPrice: (props.billing.cartTotal.value / 100).toString(), | ||
| currencyCode: "BRL", | ||
| countryCode: "BR", | ||
| }, | ||
| }} | ||
| onLoadPaymentData={(paymentRequest) => { | ||
| let googleToken = paymentRequest.paymentMethodData.tokenizationData.token; | ||
| setToken(googleToken); | ||
| jQuery(".wc-block-components-checkout-place-order-button").click(); | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| }; | ||
|
|
||
| const PagarmeGooglePayLabel = ({ components }) => { | ||
| const { PaymentMethodLabel } = components; | ||
| return <PaymentMethodLabel text={backendConfig.label} />; | ||
| }; | ||
|
|
||
| PagarmeGooglePayComponent.propTypes = { | ||
| emitResponse: PropTypes.object, | ||
| eventRegistration: PropTypes.object, | ||
| }; | ||
|
|
||
| PagarmeGooglePayLabel.propTypes = { | ||
| components: PropTypes.object, | ||
| }; | ||
|
|
||
|
|
||
| const pagarmeGooglePayPaymentMethod = { | ||
| name: backendConfig.name, | ||
| label: <PagarmeGooglePayLabel />, | ||
| content: <PagarmeGooglePayComponent />, | ||
| edit: <PagarmeGooglePayComponent />, | ||
| canMakePayment: () => true, | ||
| ariaLabel: backendConfig.ariaLabel, | ||
| }; | ||
|
|
||
| registerPaymentMethod(pagarmeGooglePayPaymentMethod); |
39 changes: 39 additions & 0 deletions
39
assets/javascripts/front/reactCheckout/payments/GooglePay/useGooglepay.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* jshint esversion: 9 */ | ||
| import pagarmeTokenStore from "../store/googlepay"; | ||
| import { useEffect } from "@wordpress/element"; | ||
| import { useDispatch, useSelect } from "@wordpress/data"; | ||
|
|
||
| const useGooglepay = ( | ||
| emitResponse, | ||
| eventRegistration, | ||
| backendConfig | ||
| ) => { | ||
| const { reset } = useDispatch(pagarmeTokenStore); | ||
|
|
||
| const { onPaymentSetup } = eventRegistration; | ||
|
|
||
| const cards = useSelect((select) => { | ||
| return select(pagarmeTokenStore).getToken(); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| return onPaymentSetup(() => { | ||
| const paymentMethodData = { | ||
| payment_method: backendConfig.key, | ||
| }; | ||
|
|
||
| return { | ||
| type: emitResponse.responseTypes.SUCCESS, | ||
| meta: { | ||
| paymentMethodData: { | ||
| pagarme: JSON.stringify({ | ||
| [backendConfig.key]: {[backendConfig.key]: {['payload']: cards}} | ||
| }), | ||
| payment_method: backendConfig.key, | ||
| }, | ||
| }, | ||
| }; | ||
| }); | ||
| }, [onPaymentSetup, cards, backendConfig]); | ||
| }; | ||
| export default useGooglepay; |
Oops, something went wrong.