Add card fields component (WIP)

modules/ppcp-blocks/resources/js/Components/CardFields.js

@@ -0,0 +1,32 @@
+import {useEffect} from '@wordpress/element';
+
+export function CardFields({config}) {
+    const cardField = paypal.CardFields({
+        createOrder: () => {},
+        onApprove: () => {},
+        onError: function (error) {
+            console.error(error)
+        }
+    });
+
+    useEffect(() => {
+        if (cardField.isEligible()) {
+            const numberField = cardField.NumberField();
+            numberField.render("#card-number-field-container");
+
+            const cvvField = cardField.CVVField();
+            cvvField.render("#card-cvv-field-container");
+
+            const expiryField = cardField.ExpiryField();
+            expiryField.render("#card-expiry-field-container");
+        }
+    }, []);
+
+    return (
+        <>
+            <div id="card-number-field-container"></div>
+            <div id="card-expiry-field-container"></div>
+            <div id="card-cvv-field-container"></div>
+        </>
+    )
+}

modules/ppcp-blocks/resources/js/advanced-card-checkout-block.js

@@ -1,11 +1,12 @@
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';
+import {CardFields} from "./Components/CardFields";
 
 const config = wc.wcSettings.getSetting('ppcp-credit-card-gateway_data');
 
 registerPaymentMethod({
     name: config.id,
     label: <div dangerouslySetInnerHTML={{__html: config.title}}/>,
-    content: <p>content</p>,
+    content: <CardFields config={config}/>,
     edit: <p>edit...</p>,
     ariaLabel: config.title,
     canMakePayment: () => {return true},

modules/ppcp-blocks/services.php

@@ -49,7 +49,10 @@ return array(
 		return new AdvancedCardPaymentMethod(
 			$container->get( 'blocks.url' ),
 			$container->get( 'ppcp.asset-version' ),
-			$container->get( 'wcgateway.credit-card-gateway' )
+			$container->get( 'wcgateway.credit-card-gateway' ),
+			function () use ( $container ): SmartButtonInterface {
+				return $container->get( 'button.smart-button' );
+			}
 		);
 	},
 	'blocks.settings.final_review_enabled' => static function ( ContainerInterface $container ): bool {

modules/ppcp-blocks/src/AdvancedCardPaymentMethod.php

@@ -10,6 +10,7 @@ declare(strict_types=1);
 namespace WooCommerce\PayPalCommerce\Blocks;
 
 use Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType;
+use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
 use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway;
 
 class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
@@ -34,15 +35,24 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
 	 */
 	private $gateway;
 
+	/**
+	 * The smart button script loading handler.
+	 *
+	 * @var SmartButtonInterface|callable
+	 */
+	private $smart_button;
+
 	public function __construct(
 		string $module_url,
 		string $version,
-		CreditCardGateway $gateway
+		CreditCardGateway $gateway,
+		$smart_button
 	) {
-		$this->name       = CreditCardGateway::ID;
-		$this->module_url = $module_url;
-		$this->version    = $version;
-		$this->gateway    = $gateway;
+		$this->name         = CreditCardGateway::ID;
+		$this->module_url   = $module_url;
+		$this->version      = $version;
+		$this->gateway      = $gateway;
+		$this->smart_button = $smart_button;
 	}
 
 	public function initialize() {}
@@ -73,10 +83,30 @@ class AdvancedCardPaymentMethod extends AbstractPaymentMethodType {
 	 * {@inheritDoc}
 	 */
 	public function get_payment_method_data() {
+		$script_data = $this->smart_button()->script_data();
+
 		return array(
 			'id'          => $this->name,
 			'title'       => $this->gateway->title,
 			'description' => $this->gateway->description,
+			'scriptData'  => $script_data,
 		);
 	}
+
+	/**
+	 * The smart button.
+	 *
+	 * @return SmartButtonInterface
+	 */
+	private function smart_button(): SmartButtonInterface {
+		if ( $this->smart_button instanceof SmartButtonInterface ) {
+			return $this->smart_button;
+		}
+
+		if ( is_callable( $this->smart_button ) ) {
+			$this->smart_button = ( $this->smart_button )();
+		}
+
+		return $this->smart_button;
+	}
 }