paypal_mark.js

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<div class="container">
    <p>Choose your method of payment: </p>
    <form>
        <div class="radio resize">
            <label>
                <input type="radio" name="paymentOption" value="paypal" checked>
                <img src="../img/payWithPaypal.jpg" alt="Pay with Paypal" class="paymentOptions" width="55" height="40">
            </label>
        </div>
        <div class="radio resize">
            <label>
                <input type="radio" name="paymentOption" value="card">
                <img src="../img/accepted_cards.png" alt="Accepting Visa, Mastercard, Discover and American Express" class="paymentOptions" width="220" height="40">
            </label>
        </div>
    </form>

    <div id="buttonContainer" class="center">
        <div id="paypalButton"></div>
        <div id="cardButton">
            <button class="btn-primary">Checkout</button>
        </div>
    </div>
</div>

<script>
    var radioFields           = document.body.querySelectorAll('input[name=paymentOption]');
    var paypalButtonContainer = document.body.querySelector('#paypalButton');
    var cardButtonContainer   = document.body.querySelector('#cardButton');
    
    function showPayPalButton() {
        cardButtonContainer.style.display   = 'none';
        paypalButtonContainer.style.display = 'block';
    }
    
    function showCardButton() {
        paypalButtonContainer.style.display = 'none';
        cardButtonContainer.style.display   = 'block';
    }
    
    paypal.Button.render({
    
        env: 'sandbox',
    
        client: {
            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
            production: 'Aco85QiB9jk8Q3GdsidqKVCXuPAAVbnqm0agscHCL2-K2Lu2L6MxDU2AwTZa-ALMn_N0z-s2MXKJBxqJ'
        },
    
        payment: function() {
            return paypal.rest.payment.create(this.props.env, this.props.client, {
                transactions: [
                    {
                        amount: { total:    '1.00', currency: 'USD' }
                    }
                ]
            });
        },
    
        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                console.log('The payment was completed!');
            });
        }
    
    }, '#paypalButton');
    
    showPayPalButton();
    
    radioFields.forEach(function(el) {
        el.addEventListener('change', function(event) {
    
            if (event.target.value === 'paypal') {
                showPayPalButton();
            }
    
            if (event.target.value === 'card') {
                showCardButton();
            }
        });
    });
</script>