<!-- ADD TO HEADER -->

<script src="https://www.paypal.com/sdk/js?client-id=ENTER_MERCHANT_CLIENT_ID_HERE&currency=GBP&components=messages"data-namespace="PayPalSDK">

</script>

<!-- REPLACE "ENTER_MERCHANT_CLIENT_ID_HERE" WITH CLIENT ID FROM BUSINESS ACCOUNT -->


<-- ADD TO FOOTER -->

<script>

document.body.onload = addPayWidget;

function addPayWidget() {

    const productDetails = document.getElementById('detailRight');

    const payInThree = document.createElement('div');

    payInThree.className = "payInThreeWidget";

    payInThree.setAttribute('data-pp-message', '');

    payInThree.setAttribute('data-pp-style-layout', 'inline');

    payInThree.setAttribute('data-pp-style-logo-type', 'inline');

    payInThree.setAttribute('data-pp-style-text-color', 'black');

    payInThree.setAttribute('data-pp-amount', 'ENTER_VALUE_HERE');

    productDetails.appendChild(payInThree);

};


const priceOptions = document.querySelectorAll('.designPrices input');


for (var i = 0 ; i < priceOptions.length; i++) {

    priceOptions[i].addEventListener('click', getSelectedPrice); 

};


function getSelectedPrice() {

    const priceSelected = this.value;

    const payInThreeWidget = document.querySelector('.payInThreeWidget');

    payInThreeWidget.setAttribute('data-pp-amount', priceSelected);

    console.log(priceSelected);

};

</script><script>

const customPriceField = document.querySelector('.openPrice');

customPriceField.addEventListener('keypress', function() {

    $this = this;

    setTimeout(function () {

        const priceSelected = $this.parentElement.childNodes[0].nextSibling.value;

        const payInThreeWidget = document.querySelector('.payInThreeWidget');

        payInThreeWidget.setAttribute('data-pp-amount', priceSelected);

        console.log(priceSelected);

    }, 1000);

});

</script>