[HELP REQUEST] Centering/Styling Pay Later Messaging

Resolved

(@ellasbubbles)

What is the most stable method to center the pay later messaging on WordPress Product Pages? It would be great to have an align option within the plugin for mobile.

I did find this documentation here: https://developer.paypal.com/docs/checkout/pay-later/gb/integrate/customize-messages/

And have the following code which seems to only work “sometimes”. Is there a better method?

jQuery(document).ready(function($) {
    function waitForPaypal(callback) {
        if (typeof paypal !== 'undefined' && typeof paypal.Messages === 'function') {
            callback();
        } else {
            setTimeout(function() {
                waitForPaypal(callback);
            }, 500);
        }
    }

    if (window.matchMedia("(max-width: 1349px)").matches) {

        var $paypalContainer = $('div.wc-ppcp-paylater-msg__container');
        var $paypalMsg = $('#wc-ppcp-paylater-msg-product');

        // Move elements first
        var $target = $('.product-main');
		$target.prepend($paypalContainer);
  
        $breadcrumb.css('text-align', 'center');

        // Set text-align attribute before rendering
        $paypalMsg.attr('data-pp-style-text-align', 'center');

        waitForPaypal(function() {
            paypal.Messages().render('#wc-ppcp-paylater-msg-product');
        });
    }
});

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago
Hi @ellasbubbles

You can use CSS to center the Pay Later messaging.
```
#wc-ppcp-paylater-msg-product{
    display: flex;
    align-items: center;
    justify-content: center;
}
```
Kind Regards
Thread Starter ellasbubbles
(@ellasbubbles)

1 year, 2 months ago

Thank you, although this was the first method we tried and does NOT work due to an inacurate assumption of the “width”

View post on imgur.com
Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago
Just add a max-width to the container and that should resolve that
```
#wc-ppcp-paylater-msg-product{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 265px;
}
```
Thread Starter ellasbubbles
(@ellasbubbles)

1 year, 2 months ago

Yes, although then for variable products, or when Paypal uses an alternative messaging form with the range “$xxx.xx – $xxx.xx, the centering is off again

Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago

You could alter your script to get the width of the container and then make the max-width property a percentage of the total. Beyond that, we have implemented the options that PayPal makes available for the Pay Later messaging so our options within the plugin are limited.

Thanks
Thread Starter ellasbubbles
(@ellasbubbles)

1 year, 2 months ago
This is NOT possible because all content is within an iFrame; which is why I am reaching out here. Anyway, with this confirmation it sounds like your CSS method is the “best” although most finicky method to get this done.

The change request is that you would simply allow “Left Align”, “Center Align”, “Right Align” in a dropdown for mobile/iPad/Desktop since it has to do with the data being rendered and CSS manipulation is not actually a correct solution and literally bypassing the correct solution offered by the API that could easily be integrated into the plugin (see link in first comment)

View post on imgur.com

https://developer.paypal.com/docs/checkout/pay-later/gb/integrate/customize-messages/

With that being said below is the best solution for now (make sure to target the Span with the max-width class as this was forgotten by you in a previous reply)
```
#wc-ppcp-paylater-msg-product{    display: flex;    align-items: center;    justify-content: center; }
#wc-ppcp-paylater-msg-product span {max-width:210px}
```
Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago
Actually, the best method would be to use the wc_ppcp_paylater_message_get_context_options filter provided by the plugin, which allows for complete customization of all messaging attributes.

Example:
```
add_filter('wc_ppcp_paylater_message_get_context_options', function($data, $context){
	if($context === 'product'){
		$data['style']['text']['align'] = 'center';
	}
	return $data;
}, 10, 2);
```
Thread Starter ellasbubbles
(@ellasbubbles)

1 year, 2 months ago
PERFECT –> Thank you for coming back with this answer; this is exactly what I was looking for

FOR MOBILE & IPAD:
```
add_filter('wc_ppcp_paylater_message_get_context_options', function($data, $context) {
if ($context === 'product') {
// Check if the user is on a mobile or iPad
if (is_mobile_or_ipad()) {
$data['style']['text']['align'] = 'center';
}
}
return $data;
}, 10, 2);

// Function to check if the user is on mobile or iPad
function is_mobile_or_ipad() {
if (wp_is_mobile()) {
// Further check for iPad
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (stripos($user_agent, 'iPad') !== false) {
return true; // It's an iPad
}
return true; // It's a mobile device
}
return false; // Neither mobile nor iPad
}
```

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘[HELP REQUEST] Centering/Styling Pay Later Messaging’ is closed to new replies.