0

I have created a Gutenberg block which returns shortcode in RawHtml component but while returning dynamic shortcode in edit() function it gives extra commas appending in the shortcode, can anyone guide me where I am wrong:

My code:

block.js

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Fragment, RawHTML } = wp.element;
const { InspectorControls, MediaUpload, AlignmentToolbar, InnerBlocks, 
PanelColorSettings, RichText, PlainText} = wp.editor;
const { ToggleControl, RangeControl, SelectControl, Button, 
        TextControl, PanelBody } = wp.components;

registerBlockType('rnk-stripe-payment-button/rnk-stripe-donate- 
button',{
    title: 'Stripe Donate Button',
    category: 'rnk-stripe-donate-button',
    keywords: [('stripe'),('donate button'), ('donate')],
    icon: 'money',
    attributes: {
    secret_key: {
        source: 'attribute',
        selector: '.rnk_stripe_secret_key',
        type: 'string',
        attribute: 'value'
    },
    publishable_key: {
        source: 'attribute',
        attribute: 'value',
        type: 'string',
        selector: '.rnk_stripe_publishable_key'
    },
    amount: {
        source: 'attribute',
        attribute: 'value',
        type: 'number',
        selector: '.rnk_stripe_payment_amount',
        default: 10
    }

},
edit: (props) => {
        const { attributes: {secret_key, publishable_key, amount}, 
                setAttributes, className} = props;
        const onChangeSecretKey = ( newSecretKey ) => {
            setAttributes ( {secret_key: newSecretKey});
        };
        const onChangePublishableKey = ( newPublishableKey ) => {
            setAttributes ( {publishable_key: newPublishableKey});
        };
        const onChangeAmount = ( newAmount ) => {
            setAttributes ( { amount:newAmount });
        };
    return [
        (
            <InspectorControls>
                <PanelBody title={ __('Stripe Settings') }>
                    <TextControl
                        label="Stripe secret key"
                        type="text"
                        placeholder="Stripe Secret key"
                        value={ secret_key }
                        className = "rnk_stripe_secret_key"
                        onChange={ (value) => 
                        setAttributes({secret_key: value})}
                    />
                    <TextControl
                        label="Stripe publishable key"
                        type="text"
                        placeholder="Stripe Publishable key"
                        value={ publishable_key }
                        className = "rnk_stripe_publishable_key"
                        onChange={ (value) => 
                        setAttributes({publishable_key: value})}
                        />
                        <TextControl
                            label="Amount"
                            type="number"
                            placeholder="Payment Amount"
                            value={ amount }
                            className = "rnk_stripe_payment_amount"
                            onChange={ (value) => 
                            setAttributes({amount: value})}
                            />
                </PanelBody>
            </InspectorControls>

    ),
    (
        <RawHTML>
    [rnk_stripe_payment_block amount="{amount}"]
    </RawHTML>
    )];
},
save: (props) => {
    return(
    <RawHTML>
    [rnk_stripe_payment_block]
    </RawHTML>
);
},
} );

Shortcode code in function.php

add_shortcode('rnk_stripe_payment_block','rnk_stripe_payment_block_function');

function rnk_stripe_payment_block_function($atts){
$atts = shortcode_atts([
        "amount" => 1000,
        "publishable_key" => '',
        "secret_key" => ''
], $atts, 'rnk_stripe_payment_block');
$amount = isset($atts['amount']) ? $atts['amount'] : '1000';
$publishable_key = isset($atts['publishable_key']) ? 
$atts['publishable_key'] : '';
$secret_key = isset($atts['secret_key']) ? $atts['secret_key'] : '';
$amount = $amount*100;
$url = plugins_url('rnk-stripe-payment-button');
$stripe = array(
    'secret_key' => $secret_key,
    'publishable_key' => $publishable_key,
);
Stripe::setApiKey($stripe['secret_key']);
ob_start();
?>
<style>
    .donate-loading {
        width: 24px;
        height: 24px;
        background: url('<?php echo $url; ?>/images/loading.gif') no- 
       repeat;
    }
</style>
<script>
    (function($) {
        $(function() {
            $('.stripe-button').bind('token', function(e, token) {
                var data = {
                    'action': 'rnk_submit_payment',
                    'token': token.id,
                    'amount': $(this).attr('data-amount')
                };
                $('.stripe-button-inner').hide();
                $('.donate-response').html('<div class="donate- 
       loading"></div>');
                $.post('<?php echo admin_url('admin-ajax.php'); ?>', 
       data, function(response) {
                    $('.donate-response').html(response);
                });
            });
        });
    })(jQuery);
</script>
<script src="https://button.stripe.com/v1/button.js" class="stripe- 
button"
    data-key="<?php echo $publishable_key; ?>"
    data-amount="<?php echo $amount; ?>"
    data-label="Donate"></script>
    <div class="donate-response"></div>
<?php
return ob_get_clean();
}

Output in editor side what I am recieving is: enter image description here

which is displaying like below in editor my block:

[rnk_stripe_payment_block amount=",10,"]

But it should be display like(without comma in amount parameter):

 [rnk_stripe_payment_block amount="10"]

Let me know if i am doing anything wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.