Need to default payment form to "card on file" using Stripe(more) gravity forms plugin

Question

I'm using the (more)Stripe for gravity forms plugin to store credit card details on my users initial purchase so I can offer them a 1 click upsell on the confirmation page without having to re=enter credit card details.

The credit card details are being stored correctly but the stored card is not selected by default on the upsell page.

The plugin author told me to control the default card in the javascript but hasn't provided any further details.

I'm hiding the credit card form on the upsell page so users only have to click my call to action button as shown here

You can see the form un-hidden without default card selected here

Here is the credit card field js:

    /**
 *
 */
jQuery( document ).ready( function ( jQuery ) {
    jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
} );

function gfpStripeToggleCreditCard() {

    var card = jQuery( this );

    if ( jQuery( "#gform_payment_method_creditcard" ).is( ":checked" ) ) {
        gfpStripeShowCreditCardFields();
    }
    else {
        gfpStripeHideCreditCardFields();
        gfpStripeSetCardNumber( card );
    }
}

function gfpStripeShowCreditCardFields() {
    var card_number = jQuery( '.gform_card_icon_container' ).next();
    var card_number_label = card_number.next();
    var card_exp_and_code = jQuery( '.ginput_cardextras' );
    var card_name = card_exp_and_code.next();

    card_number.fadeIn();
    card_number_label.fadeIn();
    card_exp_and_code.fadeIn();
    card_name.fadeIn();
}

function gfpStripeHideCreditCardFields() {
    var card_number = jQuery( '.gform_card_icon_container' ).next();
    var card_number_label = card_number.next();
    var card_exp_and_code = jQuery( '.ginput_cardextras' );
    var card_name = card_exp_and_code.next();

    card_number.fadeOut();
    card_number_label.fadeOut();
    card_exp_and_code.fadeOut();
    card_name.fadeOut();
}

function gfpStripeSetCardNumber( card ) {
    var form = card.closest( 'form' );
    var field_id = card.closest( 'li' ).attr( 'id' );
    field_id = field_id.split( '_' );
    field_id = field_id[2];
    var card_number = card.val();
    form.append( "<input type='hidden' name='input_" + field_id + ".1' value='" + card_number + "' />" );
    var card_type = jQuery( 'div.gform_payment_' + card_number ).text();
    card_type = card_type.trim();
    card_type = card_type.split( '(' );
    card_type = card_type[0].trim();
    form.append( "<input type='hidden' name='input_" + field_id + ".4' value='" + card_type + "' />" );
}

Answer 1

You can trigger the default option with a click(), by adding it after the bind:

jQuery( document ).ready( function ( jQuery ) {
     //binds to the plugin's function
    jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
     //triggers the change to default option
    jQuery( "input#ID_OF_DEFAULT_OPTION" ).click();
} );

You just need to inspect the radio button input you want to be selected by default (in your browser: right-click+inspect), look into the id attribute of that input, copy it and replace ID_OF_DEFAULT_OPTION by what you find in there.

This new line can be invoked instead in another .ready block after the plugin's js file is referenced (in the page itself), this way you're not altering anything in the plugin...

You can also use another selector if the id is a random one:

    jQuery( "input[id^=gform_payment_method_card_]" ).click();

This means you're selecting the input button that has an id attribute starting with gform_payment_method_card_.