-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40 from pronamic/mollie-components
Mollie components
- Loading branch information
Showing
17 changed files
with
499 additions
and
15 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
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 @@ | ||
<?php return array('dependencies' => array(), 'version' => 'da91ceff221d2b17ebc7'); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Empty file.
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 @@ | ||
<?php return array('dependencies' => array(), 'version' => 'f465b8f2332f2d0a9b79'); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 @@ | ||
import './card-field.scss'; |
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,38 @@ | ||
/** | ||
* Card field style. | ||
* | ||
* @link https://github.com/mollie/components-examples | ||
*/ | ||
.pronamic-pay-mollie-card-field { | ||
display: flex; | ||
|
||
flex-flow: row wrap; | ||
|
||
gap: 1em; | ||
|
||
.mollie-card-component { | ||
flex: 2 1 100%; | ||
|
||
&--expiryDate, | ||
&--verificationCode { | ||
flex: 1 2 auto; | ||
} | ||
|
||
&__error { | ||
color: #a00; | ||
} | ||
} | ||
|
||
.mollie-component { | ||
background: #fff; | ||
|
||
border: 1px solid #767676; | ||
border-radius: 3px; | ||
|
||
padding: .5em; | ||
|
||
&.is-invalid { | ||
border-color: #a00; | ||
} | ||
} | ||
} |
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,161 @@ | ||
/* global Mollie */ | ||
/* eslint-env jquery */ | ||
|
||
/** | ||
* Pronamic Pay Mollie WooCommerce legacy checkout form controller class | ||
* | ||
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes | ||
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes | ||
*/ | ||
class PronamicPayMollieWooCommerceLegacyCheckoutFormController { | ||
/** | ||
* Construct Pronamic Pay Mollie WooCommerce legacy checkout form controller. | ||
* | ||
* @param {jQuery} jQuery The jQuery library. | ||
* @param {HTMLElement} body Body element. | ||
* @param {HTMLElement} form WooCommerce legacy checkout form element. | ||
*/ | ||
constructor( jQuery, body, form ) { | ||
this.jQuery = jQuery; | ||
this.body = body; | ||
this.form = form; | ||
} | ||
|
||
/** | ||
* Setup. | ||
*/ | ||
setup() { | ||
this.jQuery( this.body ).on( 'init_checkout', () => | ||
this.initCheckout() | ||
); | ||
} | ||
|
||
/** | ||
* Init checkout. | ||
* | ||
* @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L56-L59 | ||
*/ | ||
initCheckout() { | ||
const cardElement = this.form.querySelector( | ||
'.pronamic-pay-mollie-card-field' | ||
); | ||
|
||
if ( null === cardElement ) { | ||
return; | ||
} | ||
|
||
const mollieProfileId = cardElement.dataset.mollieProfileId; | ||
const mollieOptions = JSON.parse( cardElement.dataset.mollieOptions ); | ||
|
||
this.mollie = Mollie( mollieProfileId, mollieOptions ); | ||
|
||
this.checkoutPlaceOrderListener = ( event, wcCheckoutForm ) => | ||
this.checkoutPlaceOrder( event, wcCheckoutForm ); | ||
|
||
this.jQuery( this.form ).on( | ||
'checkout_place_order', | ||
this.checkoutPlaceOrderListener | ||
); | ||
|
||
this.jQuery( this.body ).on( 'updated_checkout', () => | ||
this.updatedCheckout() | ||
); | ||
|
||
this.mollieCardComponent = this.mollie.createComponent( 'card' ); | ||
} | ||
|
||
/** | ||
* Updated checkout. | ||
* | ||
* @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L428-L429 | ||
*/ | ||
updatedCheckout() { | ||
if ( this.cardElement ) { | ||
this.mollieCardComponent.unmount(); | ||
} | ||
|
||
this.cardElement = this.form.querySelector( | ||
'.pronamic-pay-mollie-card-field' | ||
); | ||
|
||
if ( null === this.cardElement ) { | ||
return; | ||
} | ||
|
||
this.mollieCardComponent.mount( this.cardElement ); | ||
} | ||
|
||
/** | ||
* Checkout place order. | ||
* | ||
* @see https://github.com/woocommerce/woocommerce/blob/8.3.0/plugins/woocommerce/client/legacy/js/frontend/checkout.js#L478-L480 | ||
* @param {jQuery.Event} event A `jQuery.Event` object. | ||
* @param {Object} wcCheckoutForm WooCommerce checkout form object. | ||
*/ | ||
checkoutPlaceOrder( event, wcCheckoutForm ) { | ||
if ( | ||
'pronamic_pay_credit_card' !== wcCheckoutForm.get_payment_method() | ||
) { | ||
return true; | ||
} | ||
|
||
this.mollie | ||
.createToken() | ||
.then( ( result ) => this.processTokenResponse( result ) ); | ||
|
||
return false; | ||
} | ||
|
||
/** | ||
* Process token response. | ||
* | ||
* @param {Object} result Mollie create token repsonse object. | ||
*/ | ||
processTokenResponse( result ) { | ||
if ( result.error ) { | ||
return; | ||
} | ||
|
||
const tokenElement = document.getElementById( | ||
'pronamic_pay_mollie_card_token' | ||
); | ||
|
||
if ( tokenElement ) { | ||
tokenElement.value = result.token; | ||
} | ||
|
||
this.jQuery( this.form ).off( | ||
'checkout_place_order', | ||
this.checkoutPlaceOrderListener | ||
); | ||
|
||
this.jQuery( this.form ).submit(); | ||
|
||
this.jQuery( this.form ).on( | ||
'checkout_place_order', | ||
this.checkoutPlaceOrderListener | ||
); | ||
} | ||
} | ||
|
||
/** | ||
* Initialization. | ||
*/ | ||
( function () { | ||
if ( ! jQuery ) { | ||
return; | ||
} | ||
|
||
if ( ! document.forms.checkout ) { | ||
return; | ||
} | ||
|
||
const controller = | ||
new PronamicPayMollieWooCommerceLegacyCheckoutFormController( | ||
jQuery, | ||
document.body, | ||
document.forms.checkout | ||
); | ||
|
||
controller.setup(); | ||
} )(); |
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
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
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
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,97 @@ | ||
<?php | ||
/** | ||
* Mollie card field | ||
* | ||
* @author Pronamic <info@pronamic.eu> | ||
* @copyright 2005-2022 Pronamic | ||
* @license GPL-3.0-or-later | ||
* @package Pronamic\WordPress\Pay\Mollie | ||
*/ | ||
|
||
namespace Pronamic\WordPress\Pay\Gateways\Mollie; | ||
|
||
use Pronamic\WordPress\Html\Element; | ||
use Pronamic\WordPress\Pay\Fields\Field; | ||
|
||
/** | ||
* Mollie card field class | ||
*/ | ||
class CardField extends Field { | ||
/** | ||
* Gateway. | ||
* | ||
* @var Gateway | ||
*/ | ||
private $gateway; | ||
|
||
/** | ||
* Construct card field. | ||
* | ||
* @param string $id ID. | ||
* @param Gateway $gateway Gateway. | ||
*/ | ||
public function __construct( $id, Gateway $gateway ) { | ||
parent::__construct( $id ); | ||
|
||
$this->gateway = $gateway; | ||
} | ||
|
||
/** | ||
* Get element. | ||
* | ||
* @return Element|null | ||
*/ | ||
protected function get_element() { | ||
try { | ||
$profile_id = $this->gateway->get_profile_id(); | ||
} catch ( \Exception $e ) { | ||
return null; | ||
} | ||
|
||
$locale_transformer = new LocaleTransformer(); | ||
|
||
\wp_enqueue_script( 'pronamic-pay-mollie' ); | ||
|
||
\wp_enqueue_style( 'pronamic-pay-mollie' ); | ||
|
||
$element = new Element( 'div' ); | ||
|
||
$element->children[] = new Element( | ||
'div', | ||
[ | ||
'class' => 'pronamic-pay-mollie-card-field', | ||
'data-mollie-profile-id' => $profile_id, | ||
'data-mollie-options' => \wp_json_encode( | ||
[ | ||
'locale' => $locale_transformer->transform_wp_to_mollie( \get_locale() ), | ||
'testmode' => ( 'test' === $this->gateway->get_mode() ), | ||
] | ||
), | ||
] | ||
); | ||
|
||
$element->children[] = new Element( | ||
'input', | ||
[ | ||
'id' => $this->get_id(), | ||
'name' => $this->get_id(), | ||
'type' => 'hidden', | ||
] | ||
); | ||
|
||
return $element; | ||
} | ||
|
||
/** | ||
* Serialize to JSON. | ||
* | ||
* @return array | ||
*/ | ||
public function jsonSerialize(): array { | ||
$data = parent::jsonSerialize(); | ||
|
||
$data['type'] = 'html'; | ||
|
||
return $data; | ||
} | ||
} |
Oops, something went wrong.