PayPal Button Integration not working on Production environment

[BG-BMoncur]

General information

• SDK version: 6.18.0
• Environment: Production
• Browser and OS Chrome (123.0.6312.107) & Safari (Version 17.4.1 (19618.1.15.11.14)) on Mac OS (14.4.1)

Issue description

• The paypal button renders on production but when you click it you get the following error. This does not happen when I run against the sandbox.

  POST https://api.braintreegateway.com/merchants/kc6t8gfytjztrjqr/client_api/v1/paypal_hermes/setup_billing_agreement 422 (Unprocessable Content) buttons?fundingSourc…rue&vault=true:1563 create_order_error -

buttonCorrelationID:"f9543469170d7" buttonSessionID:"uid_3c3505d2a1_mja6mjg6mzq" clientID:"AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt" env:"production" err:"PayPal payment options are invalid." referer: "www.paypal.com" sdkCorrelationID: "072a649355619" sessionID: "uid_c464295c94_mja6mtg6nde" timestamp: "1712780928479" token: null

To reproduce

• go to https://billiongraves.com/bgplus-buy-now
• click on "Activate BillionGraves Plus Annual"
• the first time through you'll have to create an account (don't worry there's no charge)
• click on the PayPal button ... you'll see the error
• If I do the exact same thing (same code) on https://dev.billiongraves.com it works just fine and brings up the Paypal payment box.

Code for Paypal button

<script
    src="https://www.paypal.com/sdk/js?client-id=<?= $bt->get_paypal_clientId(); ?>&vault=true&intent=tokenize"></script>
<script src="https://js.braintreegateway.com/web/3.101.0/js/paypal-checkout.min.js"></script>
<script>
    var client_token = "<?= $bt->getClientToken(); ?>";
    var checkout_url = "<?= $checkoutUrl ?>";

    braintree.client.create({
        authorization: client_token
    }).then(function (clientInstance) {
        return braintree.paypalCheckout.create({
            client: clientInstance
        });
    }).then(function (paypalCheckoutInstance) {
        // https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/
        return paypal.Buttons({
            fundingSource: paypal.FUNDING.PAYPAL,
            style: {
                height: 45,
                label: "paypal"
            },
            createBillingAgreement: function () {
                console.log("paypal_clicked");
                gtag_event('bgplus', {event_category: 'PayPal', event_label: 'clicked'})
                return paypalCheckoutInstance.createPayment({
                    flow: 'vault',
                    amount: '<?= $amount_notcc ?>',
                    intent: 'tokenize',                 // see https://developer.paypal.com/sdk/js/configuration/
                    currency: 'USD'
                });
            },

            onApprove: function (data, actions) {
                console.log("paypal_approved");
                gtag_event('bgplus', {event_category: 'PayPal', event_label: 'approved'})
                // some logic here before tokenization happens below
                return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
                    console.log("paypal_completed");
                    gtag_event('bgplus', {event_category: 'PayPal', event_label: 'completed'})
                    // Submit payload.nonce to your server
                    var url = checkout_url + "?pmn=" + payload.nonce;
                    document.getElementById("busy").style.display = "block";
                    window.location = url;
                });
            },

            onCancel: function () {
                // handle case where user cancels
                console.log("paypal_canceled");
                gtag_event('bgplus', {event_category: 'PayPal', event_label: 'canceled'})
            },

            onError: function (err) {
                // handle case where error occurs
                console.log(' paypal_error', err);
                alert("Error creating Paypal billing agreement: " + err.message);
            }
        }).render('#paypal-button').then(function () {
            // The PayPal button will be rendered in an html element with the ID
            // 'paypal-button'. This function will be called when the PayPal button
            // is set up and ready to be used
            console.log("paypal button rendered")
        });
    }).catch(function (err) {
        console.error('Error creating Paypal button: ', err.message);
    });
</script>

Production Error Screenshot

Dev/Sandbox No-error Screenshot

Console log

create_order_error
    buttonCorrelationID:"f9543469170d7"
    buttonSessionID:"uid_3c3505d2a1_mja6mjg6mzq"
    clientID:"AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt"
    env:"production"
    err:"PayPal payment options are invalid."
    referer: "www.paypal.com"
    sdkCorrelationID: "072a649355619"
    sessionID: "uid_c464295c94_mja6mtg6nde"
    timestamp: "1712780928479"
    token: null

URL & parameters where error occured
https://www.paypal.com/smart/buttons?
    fundingSource=paypal
    style.label=paypal
    style.layout=horizontal
    style.color=gold
    style.shape=rect
    style.tagline=false
    style.height=45
    style.menuPlacement=below
    allowBillingPayments=true
    applePaySupport=false
    buttonSessionID=uid_3c3505d2a1_mja6mjg6mzq
    buttonSize=medium
    clientID=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt
    clientMetadataID=uid_c464295c94_mja6mtg6nde
    commit=true
    components.0=buttons
    currency=USD
    debug=false
    disableSetCookie=true
    env=production
    experiment.enableVenmo=false
    flow=billing_setup
    fundingEligibility=...
    intent=tokenize
    locale.country=US
    locale.lang=en
    platform=desktop
    renderedButtons.0=paypal
    sessionID=uid_c464295c94_mja6mtg6nde
    sdkCorrelationID=072a649355619
    sdkMeta=...
    sdkVersion=5.0.432
    storageID=uid_5b3fe79b4f_mty6mdm6nta
    supportedNativeBrowser=false
    supportsPopups=true
    vault=true

Error: PayPal payment options are invalid.
    at Jr.error (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:77149)
    at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:85534)
    at JSON.parse (<anonymous>)
    at o (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:85393)
    at co (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:85546)
    at u.on (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:90133)
    at bo (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:90253)
    at https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:96575
    at n.try (https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:19460)
    at https://www.paypal.com/sdk/js?client-id=AcH2TB_4YfhxW4KU6Aix5ZWbE-fa8Yw6hQ2ZBy06gBqI9hRsR5WO2t3a28jp3mF8upLH0u2kZkq1mNdt&vault=true&intent=tokenize:3:96372

[BG-BMoncur]

Problem was resolved. The merchant_account_id was wrong for our production environment. A better error message sure would have been helpful.