Using the PayPal SDK:
I'm managing to sort the ordering of my buttons to make card payments first, paypal second and pay later third using funding sources.
I'm then attempting to open the cardfields in a modal popup for card payment, which I am achieving when I click the paypal card button, however, the default card fields are also opening (and this is what I am wanting to stop).
The onclick even doesn't appear to allow actions to be disabled on the button (card) to stop the default action or preventdefault to stop this.
So, how do we get the cardfields to load in a popup without continuing to open the standard buttons?
function outputPPButtons() { createButton(paypal.FUNDING.CARD); createButton(paypal.FUNDING.PAYPAL); createButton(paypal.FUNDING.PAYLATER); const styleObject = { input: {"font-size": "16px","font-family": "courier, monospace","font-weight": "lighter", color: "#ccc", },".invalid": { color: "purple", },":hover": { color: "orange", },".purple": { color: "purple", }, }; // Render each field after checking for eligibility const cardField = paypal.CardFields({ style: styleObject, createOrder: createOrderCallback, onApprove: onApproveCallback, inputEvents: { onChange: function (data) { // Handle a change event in any of the fields }, onFocus: function (data) { // Handle a focus event in any of the fields }, onBlur: function (data) { // Handle a blur event in any of the fields }, onInputSubmitRequest: function (data) { // Handle an attempt to submit the entire card form // while focusing any of the fields } }, }); // Define the container for each field and the submit button const cardNameContainer = document.getElementById("card-name-field-container"); // Optional field const cardNumberContainer = document.getElementById("card-number-field-container"); const cardCvvContainer = document.getElementById("card-cvv-field-container"); const cardExpiryContainer = document.getElementById("card-expiry-field-container"); const multiCardFieldButton = document.getElementById("multi-card-field-button"); // Render each field after checking for eligibility if (cardField.isEligible()) { const nameField = cardField.NameField(); nameField.render(cardNameContainer); const numberField = cardField.NumberField(); numberField.render(cardNumberContainer); const cvvField = cardField.CVVField(); cvvField.render(cardCvvContainer); const expiryField = cardField.ExpiryField(); expiryField.render(cardExpiryContainer); // Add click listener to the submit button and call the submit function on the CardField component multiCardFieldButton.addEventListener("click", () => { cardField .submit( { billingAddress: { addressLine1: document.getElementById("card-billing-address-line-1" ).value, addressLine2: document.getElementById("card-billing-address-line-2" ).value, adminArea1: document.getElementById("card-billing-address-admin-area-line-1" ).value, adminArea2: document.getElementById("card-billing-address-admin-area-line-2" ).value, countryCode: document.getElementById("card-billing-address-country-code" ).value, postalCode: document.getElementById("card-billing-address-postal-code" ).value, }, }) .then(() => { // Handle a successful payment }) .catch((err) => { // Handle an unsuccessful payment }); }); } async function createOrderCallback() { //This routine works } async function onApproveCallback(data, actions) { //This routine works } // Example function to show a result to the user. Your site's UI library can be used instead. function resultMessage(message) { const container = document.querySelector("#result-message"); container.innerHTML = message; } } function createButton(fundingSource) { var config = { fundingSource: fundingSource, onInit: function (data, actions) { // Disable the buttons actions.disable(); $('[id$=chkTerms]').on('change', function (event) { // Enable or disable the button when it is checked or unchecked if (event.target.checked) { actions.enable(); } else { actions.disable(); } }); }, onClick: function () { var theFundingSource = fundingSource; // Show a validation error if the checkbox is not checked if (!$('[id$=chkTerms]').is(':checked')) { $("#termsPopup").modal('show'); } else { if (theFundingSource == "card") { //actions.disable(); // NO ACTIONS TO STOP THIS BUTTON DOING IT'S DEFAULT TASK (STOP OPENING THE DEFAULT CARD FIELDS, RATHER THAN JUST THE MODAL CONTAINING TEH CARDFIELDS) // event.preventDefault(); // NO EVENT TO STOP THIS BUTTON DOING IT'S DEFAULT ACTION $("#cardPopup").modal('show'); } else { //actions.enable(); // NO ACTIONS TO ENABLE THIS BUTTON DOING IT'S TASK } } }, style: { shape: "rect", layout: "vertical", label: "paypal", }, message: { amount: 100, } }; var button = paypal.Buttons(config); if (button.isEligible()) { button.render('#paypal-button-container'); } }