PayPal Smart Buttons

How To
1

Hi, i see that paypal gives me the option to display the smart buttons in the single page of a product.

I’ve made a template for the single product page with the add to cart module but there is no way to display the smart buttons of paypal.

How can i do it?

Thank you very much

2

I would also like to know how to show the PayPal buttons on custom Bricks Woo templates (Single Product, Checkout, Cart)

They show fine on standard woo templates, but not when you create a Bricks template.

Thanks,

1 Like
3

I used claude.ai and through hours of not getting it, i finally got some PHP from claude that worked on the single product page! I havnt tried with the checkout/cart yet but I would assume using this as an example and some more troubleshooting I will get those to work. If I do I will update this post.

Add this code element directly below the add to cart element

Claude info below:

You’re welcome! Just to summarize what made it work, for future reference:

The key elements that made everything work correctly were:

  1. Using WC()->payment_gateways(); to ensure proper gateway initialization
  2. Including the ppcp-messages div with the correct data attribute for Pay in 3 messaging
  3. Using the specific woocommerce_paypal_payments_smart_button_wrapper action for digital wallets (this was crucial for the full-width Google Pay)
  4. Having separate containers for each component with proper width styling

Here’s a clean version of the working code for your reference:

<?php
if (!is_object($product)) {
    $product = wc_get_product(get_the_ID());
}

WC()->payment_gateways();

echo '<div class="payment-buttons-container">';

// Pay in 3 messaging
echo '<div class="paypal-container">';
echo '<div class="ppcp-messages" data-partner-attribution-id="Woo_PPCP"></div>';
do_action('ppcp-credit-messaging-wrapper');
do_action('woocommerce_paypal_payments_single_product_message_render');
echo '</div>';

// PayPal button
echo '<div class="smart-buttons-container">';
echo '<div id="ppc-button-ppcp-gateway"></div>';
do_action('woocommerce_paypal_payments_single_product_button_render');
echo '</div>';

// Digital Wallet (Google Pay/Apple Pay)
echo '<div class="digital-wallet-container">';
do_action('woocommerce_paypal_payments_smart_button_wrapper');
echo '</div>';

echo '</div>';
?>

// css code
<style>
    .payment-buttons-container {
        margin-top: 20px;
        width: 100%;
    }
    .paypal-container,
    .smart-buttons-container,
    .digital-wallet-container {
        margin-bottom: 10px;
        width: 100%;
    }
    .gpay-button-container {
        width: 100% !important;
        display: inline-block !important;
    }
    .gpay-button {
        width: 100% !important;
    }
    .paypal-buttons {
        width: 100% !important;
        min-width: 100% !important;
    }
    #ppc-button-ppcp-gateway {
        width: 100% !important;
    }
    .ppcp-messages {
        width: 100% !important;
        margin-bottom: 10px;
    }
</style>

This will give you consistent full-width payment buttons and messaging across all your products!