Introducing PromptPay payment method (Thailand) #170

guzzilar · 2020-06-17T06:08:22Z

1. Objective

This pull request is introducing PromptPay payment method to Omise-WooCommerce plugin.

Related information:
Related issue(s): T22500 (internal ticket)

2. Description of change

Displaying PromptPay payment method at the checkout page.

Displaying PromptPay QR code at the Thank-you page.
Alongs with the QR code expiry date.

Displaying successful payment message if the payment has been successfully paid.

Displaying failed payment message if the payment has failed.

After 10 minutes, if a particular order status still stay as on-hold then the plugin will stop Ajax-polling request to save the computer resource and display a 'refresh' button to allow buyer to fetch a payment status manually instead.

Displaying a link to PromptPay QR code at the order-confirmation email.

3. Quality assurance

🔧 Environments:

WooCommerce: v4.3
WordPress: v5.4.2
PHP version: 7.3.3.

✏️ Details:

There are 2 aspects that we want to test for this pull request, "merchant's perspective" and "buyer's perspective".
All the tests in this section will be separated into 2 situations as mentioned.

Setting up:

Once installed this PR, at the admin page, from sidebar menu Omise > Settings. You will see the PromptPay payment method is listed at the Available Payment Methods table. Click config

You may rename or add a payment description at the payment configuration page. Then, check the Enable Omise PromptPay Payment and click Save changes

To be able to use the full feature of plugin, you may set the Webhook endpoint to your Omise Account as well.

Note: As Webhook endpoint requires for HTTPS server. For localhost test, you can use https://ngrok.com tool to simulate for https protocol.

Once done, the PromptPay payment method will be listed at the checkout page.

Placing Order:

As a buyer:

Once the payment method has been set and enabled. Buyers will be able to placing order using PromptPay payment method at the checkout page.

After selecting PromptPay as a payment method, PromptPay QR code will be displayed at the WooCommerce Order-Confirmation page (thank-you page), along with the QR code expiry date.

Important: at this step, there will be AJAX polling request running behind to keep fetch order status every 10 seconds for 10 minutes to check if the payment has been paid (to update the screen accordingly). After 10 minutes, the AJAX will be terminated and displaying "refresh status" on the screen instead.

As well, there will be an email sent to buyer's billing email.

At this point, user may scan the QR code to pay.

As a merchant:

Once buyers make placed an order using PromptPay payment method, a new order with on-hold status will be created on WooCommerce.

Complete the payment

As a buyer:

Once the buyer paid for the payment, if payment is successful, there will be a successful payment message appear on the screen.

Once the buyer paid for the payment, if payment is failed, there will be a failure payment message appear on the screen.

In case if buyer didn't complete the transaction within 10 minutes, there will be a button refresh status appeared on the screen (this means that the AJAX polling has been terminated. Buyer can click this button to reactivate the AJAX script).

As a merchant:

In case of payment successful, the order status will be updated to processing.

In case of payment successful, the order status will be updated to failed.

4. Impact of the change

None

5. Priority of change

Normal

6. Additional Notes

Nothing.

danfowler · 2020-06-18T03:18:13Z

includes/gateway/class-omise-payment-promptpay.php

+				<?php echo __( 'Scan the QR code to pay', 'omise' ); ?>
+			</p>
+			<div class="omise omise-promptpay-qrcode">
+				<img src="<?php echo $qrcode; ?>" alt="Omise QR code ID: <?php echo $charge['source']['scannable_code']['image']['id']; ?>">


Do we need to make accommodations for SVG QRs in, say, Gmail?

@mayurkathale will work on a SVG->PNG converter. I'm not sure if the PHP library requirements (e.g. ImageMagick/GD) for WooCommerce are similar enough?

I'm actually trying to go with file-attachment instead. (or in a worse case, just put a link there and let buyer click the link to open the QR code)

Cool. Can you coordinate with @mayurkathale on the ideal approach?

danfowler · 2020-07-29T09:43:34Z

includes/gateway/class-omise-payment-promptpay.php

+				<?php echo __( 'Scan the QR code to pay', 'omise' ); ?>
+			</p>
+			<div class="omise omise-promptpay-qrcode">
+				<img src="<?php echo $qrcode; ?>" alt="Omise QR code ID: <?php echo $charge['source']['scannable_code']['image']['id']; ?>">


@mayurkathale will work on a SVG->PNG converter. I'm not sure if the PHP library requirements (e.g. ImageMagick/GD) for WooCommerce are similar enough?

includes/gateway/class-omise-payment-promptpay.php

guzzilar · 2020-08-17T06:33:40Z

includes/gateway/class-omise-payment-promptpay.php

+		$qrcode = $charge['source']['scannable_code']['image']['download_uri'];
+
+		$expires_datetime = new WC_DateTime( $charge['expires_at'], new DateTimeZone( 'UTC' ) );
+		$expires_datetime->set_utc_offset( wc_timezone_offset() );


Note: there is a timezone-offset configuration in WordPress itself. This part is to make sure that the plugin will set the time according to the WordPress configuration instead of server time/timezone.

guzzilar · 2020-08-17T06:34:56Z

includes/gateway/class-omise-payment-promptpay.php

+			<div id="omise-offline-additional-details" class="omise omise-additional-payment-details-box omise-promptpay-details" <?php echo 'email' === $context ? 'style="margin-bottom: 4em; text-align:center;"' : ''; ?>>
+				<p><?php echo __( 'Scan the QR code to pay', 'omise' ); ?></p>
+				<div class="omise omise-promptpay-qrcode">
+					<img style="margin: 0 auto;" src="<?php echo $qrcode; ?>" alt="Omise QR code ID: <?php echo $charge['source']['scannable_code']['image']['id']; ?>">


Note: Test-mode and Live-mode will give a different format of QR code picture (png and svg). However, there should be no problem to display in img element.

guzzilar · 2020-08-17T06:36:44Z

includes/gateway/class-omise-payment-promptpay.php

+
+			<div id="omise-offline-payment-result" class="omise-additional-payment-details-box" style="display: none;"></div>
+
+			<script>


Note: this Javascript might need to be relocated to another file in the future once the same solution gets applied to PayNow payment method (or it may not possible, still testing the idea – however, it will be out of scope from PromptPay so I skip it)

guzzilar · 2020-08-17T06:41:07Z

omise-woocommerce.php

+	public function register_ajax_actions() {
+		add_action('wp_ajax_nopriv_fetch_order_status', 'Omise_Ajax_Actions::fetch_order_status' );
+		add_action('wp_ajax_fetch_order_status', 'Omise_Ajax_Actions::fetch_order_status' );
+	}


https://developer.wordpress.org/reference/hooks/wp_ajax_nopriv__requestaction/
According to WordPress documents, wp_ajax_nopriv_* is needed for those non-authenticated Ajax actions for logged-out users. We need to hook 2 actions here to be able to implement the Ajax polling to keep tracking order-status at the Thank-you page.

guzzilar · 2020-08-17T06:42:14Z

includes/gateway/class-omise-payment-promptpay.php

+			<p><a href="<?php echo $qrcode; ?>"><?php echo __( 'Click this link to display the QR code', 'omise' ); ?></a></p>
+		<?php endif;
+	}
+}


I'm not strong at Javascript. If there is any suggestion to improve or to make the code more effective, please feel free to let me know 🙇

mayurkathale · 2020-08-19T06:06:26Z

includes/gateway/class-omise-payment-promptpay.php

+		$expires_datetime = new WC_DateTime( $charge['expires_at'], new DateTimeZone( 'UTC' ) );
+		$expires_datetime->set_utc_offset( wc_timezone_offset() );
+
+		if ( 'view' === $context ) : ?>


All of the inline CSS in the If block can be moved to omise-css.css file.

Can I move this one to another PR?
I have a plan to revise the CSS classes to make all the shared-styles to be more in generic name but it will require to touch multiple files that out of scope from PromptPay implementation (planning to group those styles that are currently using with Offline additional information).

mayurkathale · 2020-08-19T06:09:04Z

includes/gateway/class-omise-payment-promptpay.php

+					});
+				})(jQuery);
+			</script>
+		<?php elseif ( 'email' === $context ) : ?>


This part should be excluded in "Order failed" emails which usually gets send after failed charge creation.

This part of the code will be triggered only when the charge is successfully created and user redirects to the thank-you page (or did you get another different result?)

Fixed

Thank a lot! I totally missed this point 👍

mayurkathale

Few changes above

guzzilar · 2020-08-20T04:07:44Z

Thanks! @mayurkathale

guzzilar added Status: In progress Type: Feature request Type: Feature labels Jun 17, 2020

guzzilar force-pushed the promptpay branch from 3972993 to c05a527 Compare June 17, 2020 06:33

danfowler reviewed Jun 18, 2020

View reviewed changes

guzzilar force-pushed the promptpay branch 2 times, most recently from 3a0e5f9 to dbabbb9 Compare July 23, 2020 16:00

danfowler reviewed Jul 29, 2020

View reviewed changes

guzzilar force-pushed the promptpay branch 7 times, most recently from 2d8c305 to ecca2d1 Compare August 10, 2020 06:51

guzzilar force-pushed the promptpay branch from ecca2d1 to fe09591 Compare August 17, 2020 05:55

guzzilar changed the title ~~[wip] Introducing PromptPay payment method (Thailand)~~ Introducing PromptPay payment method (Thailand) Aug 17, 2020

guzzilar added Status: Review needed and removed Status: In progress labels Aug 17, 2020

guzzilar requested review from danfowler and mayurkathale August 17, 2020 06:18

guzzilar force-pushed the promptpay branch from fe09591 to 80792b0 Compare August 17, 2020 06:31

guzzilar commented Aug 17, 2020

View reviewed changes

guzzilar force-pushed the promptpay branch 2 times, most recently from dac1b67 to a9aa879 Compare August 17, 2020 08:20

PromptPay: Integrating PromptPay payment method to Omise WooCoommerce.

87146ac

guzzilar force-pushed the promptpay branch from a9aa879 to 87146ac Compare August 17, 2020 08:21

mayurkathale reviewed Aug 19, 2020

View reviewed changes

mayurkathale suggested changes Aug 19, 2020

View reviewed changes

PromptPay, only display QR code if Omise charge.status = pending.

7cc2f60

mayurkathale approved these changes Aug 20, 2020

View reviewed changes

guzzilar added Status: Ready and removed Status: Review needed labels Aug 20, 2020

guzzilar merged commit 03c6375 into master Aug 20, 2020

guzzilar deleted the promptpay branch August 20, 2020 04:08

guzzilar mentioned this pull request Aug 20, 2020

✨ Releasing Omise-WooCommerce v4.1 #186

Merged

guzzilar added Progress: Released Status: Released and removed Status: Ready Progress: Released labels Aug 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introducing PromptPay payment method (Thailand) #170

Introducing PromptPay payment method (Thailand) #170

guzzilar commented Jun 17, 2020 •

edited

Loading

danfowler Jun 18, 2020

danfowler Jul 29, 2020

guzzilar Jul 29, 2020

danfowler Jul 30, 2020

danfowler Jul 29, 2020

guzzilar Aug 17, 2020

guzzilar Aug 17, 2020

guzzilar Aug 17, 2020

guzzilar Aug 17, 2020

guzzilar Aug 17, 2020

mayurkathale Aug 19, 2020

guzzilar Aug 19, 2020 •

edited

Loading

mayurkathale Aug 19, 2020

guzzilar Aug 19, 2020

guzzilar Aug 19, 2020

mayurkathale left a comment

guzzilar commented Aug 20, 2020


		<div id="omise-offline-payment-result" class="omise-additional-payment-details-box" style="display: none;"></div>

		<script>

Introducing PromptPay payment method (Thailand) #170

Introducing PromptPay payment method (Thailand) #170

Conversation

guzzilar commented Jun 17, 2020 • edited Loading

1. Objective

2. Description of change

3. Quality assurance

Setting up:

Placing Order:

As a buyer:

As a merchant:

Complete the payment

As a buyer:

As a merchant:

4. Impact of the change

5. Priority of change

6. Additional Notes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guzzilar Aug 19, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mayurkathale left a comment

Choose a reason for hiding this comment

guzzilar commented Aug 20, 2020

guzzilar commented Jun 17, 2020 •

edited

Loading

guzzilar Aug 19, 2020 •

edited

Loading