diff --git a/modules/ppcp-blocks/resources/js/Components/CardFields.js b/modules/ppcp-blocks/resources/js/Components/CardFields.js index 952896396..ad724eb42 100644 --- a/modules/ppcp-blocks/resources/js/Components/CardFields.js +++ b/modules/ppcp-blocks/resources/js/Components/CardFields.js @@ -1,3 +1,5 @@ +import {useEffect, useState} from '@wordpress/element'; + import { PayPalScriptProvider, PayPalCardFieldsProvider, @@ -7,9 +9,11 @@ import { import {CheckoutHandler} from "./checkout-handler"; export function CardFields({config, eventRegistration, emitResponse}) { - const {onPaymentSetup, onCheckoutFail, onCheckoutValidation} = eventRegistration; + const {onPaymentSetup} = eventRegistration; const {responseTypes} = emitResponse; + const [cardFieldsForm, setCardFieldsForm] = useState(); + async function createOrder() { return fetch(config.scriptData.ajax.create_order.endpoint, { method: "POST", @@ -20,7 +24,6 @@ export function CardFields({config, eventRegistration, emitResponse}) { nonce: config.scriptData.ajax.create_order.nonce, context: config.scriptData.context, payment_method: 'ppcp-credit-card-gateway', - createaccount: false }), }) .then((response) => response.json()) @@ -46,15 +49,53 @@ export function CardFields({config, eventRegistration, emitResponse}) { .then((response) => response.json()) .then((data) => { console.log(data) - return { - type: responseTypes.SUCCESS, - }; }) .catch((err) => { console.error(err); }); } + const getCardFieldsForm = (cardFieldsForm) => { + setCardFieldsForm(cardFieldsForm) + } + + const wait = (milliseconds) => { + return new Promise((resolve) => { + console.log('start...') + setTimeout(() => { + console.log('resolve') + resolve() + }, milliseconds) + }) + } + + useEffect( + () => + onPaymentSetup(() => { + async function handlePaymentProcessing() { + await cardFieldsForm.submit(); + + // TODO temporary workaround to wait for PayPal order in the session + await wait(3000) + + const response = await fetch(config.scriptData.ajax.get_paypal_order_from_session.endpoint) + const result = await response.json() + + return { + type: responseTypes.SUCCESS, + meta: { + paymentMethodData: { + 'paypal_order_id': result.data, + }, + }, + }; + } + + return handlePaymentProcessing(); + }), + [onPaymentSetup, cardFieldsForm] + ); + return ( <> - + diff --git a/modules/ppcp-blocks/resources/js/Components/checkout-handler.js b/modules/ppcp-blocks/resources/js/Components/checkout-handler.js index e4b2c9f8b..08f4bef5a 100644 --- a/modules/ppcp-blocks/resources/js/Components/checkout-handler.js +++ b/modules/ppcp-blocks/resources/js/Components/checkout-handler.js @@ -1,23 +1,12 @@ import {useEffect} from '@wordpress/element'; import {usePayPalCardFields} from "@paypal/react-paypal-js"; -export const CheckoutHandler = ({onPaymentSetup, responseTypes}) => { +export const CheckoutHandler = ({getCardFieldsForm}) => { const {cardFieldsForm} = usePayPalCardFields(); useEffect(() => { - const unsubscribe = onPaymentSetup(async () => { - - await cardFieldsForm.submit() - .catch((error) => { - console.error(error) - return { - type: responseTypes.ERROR, - } - }); - }) - - return unsubscribe - }, [onPaymentSetup, cardFieldsForm]); + getCardFieldsForm(cardFieldsForm) + }, []); return null } diff --git a/modules/ppcp-blocks/services.php b/modules/ppcp-blocks/services.php index 051f6323d..7c26baf9c 100644 --- a/modules/ppcp-blocks/services.php +++ b/modules/ppcp-blocks/services.php @@ -9,6 +9,7 @@ declare(strict_types=1); namespace WooCommerce\PayPalCommerce\Blocks; +use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession; use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint; use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface; use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface; @@ -72,6 +73,11 @@ return array( $container->get( 'woocommerce.logger.woocommerce' ) ); }, + 'blocks.endpoint.get-paypal-order-from-session' => static function ( ContainerInterface $container ): GetPayPalOrderFromSession { + return new GetPayPalOrderFromSession( + $container->get( 'session.handler' ) + ); + }, 'blocks.add-place-order-method' => function ( ContainerInterface $container ) : bool { /** diff --git a/modules/ppcp-blocks/src/BlocksModule.php b/modules/ppcp-blocks/src/BlocksModule.php index 1dd1560dd..765af5698 100644 --- a/modules/ppcp-blocks/src/BlocksModule.php +++ b/modules/ppcp-blocks/src/BlocksModule.php @@ -10,6 +10,7 @@ declare(strict_types=1); namespace WooCommerce\PayPalCommerce\Blocks; use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry; +use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession; use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint; use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface; use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider; @@ -90,6 +91,16 @@ class BlocksModule implements ModuleInterface { } ); + add_action( + 'wc_ajax_' . GetPayPalOrderFromSession::ENDPOINT, + static function () use ( $c ) { + $endpoint = $c->get( 'blocks.endpoint.get-paypal-order-from-session' ); + assert( $endpoint instanceof GetPayPalOrderFromSession ); + + $endpoint->handle_request(); + } + ); + // Enqueue frontend scripts. add_action( 'wp_enqueue_scripts', diff --git a/modules/ppcp-blocks/src/Endpoint/GetPayPalOrderFromSession.php b/modules/ppcp-blocks/src/Endpoint/GetPayPalOrderFromSession.php new file mode 100644 index 000000000..d343a846d --- /dev/null +++ b/modules/ppcp-blocks/src/Endpoint/GetPayPalOrderFromSession.php @@ -0,0 +1,43 @@ +session_handler = $session_handler; + } + + public static function nonce(): string + { + return self::ENDPOINT; + } + + public function handle_request(): bool + { + $order = $this->session_handler->order(); + + wp_send_json_success($order->id()); + return true; + } +} diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php index e3fa8c4ba..39b6f61cb 100644 --- a/modules/ppcp-button/src/Assets/SmartButton.php +++ b/modules/ppcp-button/src/Assets/SmartButton.php @@ -19,6 +19,7 @@ use WooCommerce\PayPalCommerce\ApiClient\Entity\Money; use WooCommerce\PayPalCommerce\ApiClient\Entity\PaymentToken; use WooCommerce\PayPalCommerce\ApiClient\Factory\PayerFactory; use WooCommerce\PayPalCommerce\ApiClient\Helper\DccApplies; +use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession; use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint; use WooCommerce\PayPalCommerce\Button\Endpoint\ApproveOrderEndpoint; use WooCommerce\PayPalCommerce\Button\Endpoint\ApproveSubscriptionEndpoint; @@ -1159,6 +1160,10 @@ document.querySelector("#payment").before(document.querySelector(".ppcp-messages 'wp_rest_nonce' => wp_create_nonce( 'wc_store_api' ), 'update_shipping_method' => \WC_AJAX::get_endpoint( 'update_shipping_method' ), ), + 'get_paypal_order_from_session' => array( + 'endpoint' => \WC_AJAX::get_endpoint( GetPayPalOrderFromSession::ENDPOINT ), + 'nonce' => wp_create_nonce( GetPayPalOrderFromSession::nonce() ), + ), ), 'cart_contains_subscription' => $this->subscription_helper->cart_contains_subscription(), 'subscription_plan_id' => $this->subscription_helper->paypal_subscription_id(),