Add bancontact component

modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-block.js

@@ -0,0 +1,9 @@
+export function Bancontact( { config, components } ) {
+	const { PaymentMethodIcons } = components;
+
+	return (
+		<div>
+			<PaymentMethodIcons icons={ [ config.icon ] } align="right" />
+		</div>
+	);
+}

modules/ppcp-local-alternative-payment-methods/resources/js/bancontact-payment-method.js

@@ -1,12 +1,12 @@
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';
+import { Bancontact } from './bancontact-block';
 
 const config = wc.wcSettings.getSetting( 'ppcp-bancontact_data' );
-console.log( config );
 
 registerPaymentMethod( {
 	name: config.id,
 	label: <div dangerouslySetInnerHTML={ { __html: config.title } } />,
-	content: <div>Hi there!</div>,
+	content: <Bancontact config={ config } />,
 	edit: <div></div>,
 	ariaLabel: config.title,
 	canMakePayment: () => {

modules/ppcp-local-alternative-payment-methods/src/BancontactPaymentMethod.php

@@ -63,14 +63,14 @@ class BancontactPaymentMethod extends AbstractPaymentMethodType {
 	 */
 	public function get_payment_method_script_handles() {
 		wp_register_script(
-			'ppcp-bancontact-checkout-block',
+			'ppcp-bancontact-payment-method',
-			trailingslashit( $this->module_url ) . 'assets/js/bancontact-checkout-block.js',
+			trailingslashit( $this->module_url ) . 'assets/js/bancontact-payment-method.js',
 			array(),
 			$this->version,
 			true
 		);
 
-		return array( 'ppcp-bancontact-checkout-block' );
+		return array( 'ppcp-bancontact-payment-method' );
 	}
 
 	/**
@@ -81,6 +81,7 @@ class BancontactPaymentMethod extends AbstractPaymentMethodType {
 			'id'                  => $this->name,
 			'title'               => $this->gateway->title,
 			'description'         => $this->gateway->description,
+			'icon' => esc_url( 'https://www.paypalobjects.com/images/checkout/alternative_payments/paypal_bancontact_color.svg' ),
 		);
 	}
 }

modules/ppcp-local-alternative-payment-methods/webpack.config.js

@@ -9,8 +9,8 @@ module.exports = {
 	target: 'web',
 	plugins: [ new DependencyExtractionWebpackPlugin() ],
 	entry: {
-		'bancontact-checkout-block': path.resolve(
+		'bancontact-payment-method': path.resolve(
-			'./resources/js/bancontact-checkout-block.js'
+			'./resources/js/bancontact-payment-method.js'
 		),
 	},
 	output: {