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.