如何在客户端编辑键值配对中的字符串。 （贝宝结账演示）

Posted 2023-02-22

【中文标题】如何在客户端编辑键值配对中的字符串。 （贝宝结账演示）

【英文标题】：How to edit string in key value paring on client side. (Paypal checkout demo)

【发布时间】：2020-02-17 23:45:09

【问题描述】：

我有一家小型在线企业，我想在其中实施在线支付系统。我选择的是 paypal，他们在这里找到了一个易于使用的解决方案：https://developer.paypal.com/demo/checkout/#/pattern/client

我目前不清楚如何允许最终用户编辑他们愿意支付的金额。目前，在付款时，最终用户只能支付 1 美分（或者无论我将字符串值更改多少。无论哪种方式，该值都是静态的）。我想找到一种解决方案，最终用户可以根据需要支付多少费用。

paypal提供的代码如下：

<div class='uk-section'>
            <!-- Set up a container element for the button -->
            <div id="paypal-button-container"></div>

            <!-- Include the PayPal javascript SDK -->
            <script src="https://www.paypal.com/sdk/js?client-id=sd=USD"></script>

            <script>
                // Render the PayPal button into #paypal-button-container
                paypal.Buttons(

                    // Set up the transaction
                    createOrder: function(data, actions) 
                        return actions.order.create(
                            purchase_units: [
                                amount: 
                                    value: '0.01'
                                
                            ]
                        );
                    ,

                    // Finalize the transaction
                    onApprove: function(data, actions) 
                        return actions.order.capture().then(function(details) 
                            // Show a success message to the buyer
                            alert('Transaction completed by ' + details.payer.name.given_name + '!');
                        );
                    


                ).render('#paypal-button-container');
            </script>
        </div>

正如您所见，值数量是一个对象内、另一个对象内、数组内、对象内的字符串键对，它是函数内返回语句的输入参数。任何寻找工作解决方案的指导将不胜感激。

【参考方案1】：

只需将您的金额输入一个输入字段，让用户输入他/她的值并使用该值转移到 PayPal API.. 使用 html 只需使用输入字段作为用户的金额。 将 REST API V2 客户端代码与 JavaScript 和 Jquery 混合使用

        // Render the PayPal button into #paypal-button-container
       // by - Using PayPal REST V2 API
       paypal
        .Buttons(


    style: 
        layout: 'horizontal',
        color: 'gold',
        shape: 'pill',
        label: 'checkout',
        size: 'responsive',
        tagline: 'true',
    ,
    // Set up the transaction
    createOrder: function(data, actions) 
        $('#paypalmsg').hide();
        $('#transmsg').html('<b>'+'WAITING ON AUTHORIZATION...'+'</b>');
        $('#chkoutmsg').hide()
        return actions.order.create(
            purchase_units: [
                description: 'GnG Order',
                amount: 
                    value: cartTotal (HERE IS WHERE YOUR USER INPUT AMOUNT WOULD GO AS 
                    A VARIABLE, you will have to make it a VAR using JavaScript or 
                    Jquery, I.E. UserVal = $(USERSelect).val();)

                
            ],
            application_context: 
              shipping_preference: 'NO_SHIPPING'
            

           );
       ,
       // Finalize the transaction
       onApprove: function(data, actions) 
        return actions.order.get().then(function(orderDetails) 
                // Show a success message to the buyer
                $('#transmsg').html('<b>' + 'AUTHORIZED...' + '</b>');
                $('#transmsg').append('<br>'+'Transaction completed by: ' + 
                orderDetails.payer.name.given_name +' '+ 
                orderDetails.payer.name.surname + '<br>' + "Order Id: " + 
                 orderDetails.id + '<br>' + 'Status: ' + orderDetails.status+'!' + 
                '<br>'+ 'Thank You For Your Order'+ '<br>');
                if (orderDetails.status === "APPROVED") 
                    window.setTimeout(function() , 500)
                     $('#transmsg').append('<b>' + 'Sending Order...Please Wait' + 
                    '</b>'+'<br>');
                     // do some form clean up before the email post 
                     var getId = '#'+ $('span:contains("Market")').attr('id');
                     var getmrktDiv = '#'+ $(getId).offsetParent().attr('id');
                     var mrktchkId = '#'+ 
                     $(getmrktDiv).closest(getmrktDiv).find(".chkbox").attr('id');
                     var mrktpriceId = '#'+ 
                     $(getmrktDiv).closest(getmrktDiv).find(".price").attr('id');
                     var chkboxId = "#chk6";
                     var hidpriceId = "#pricef";
                     var marketLocation =  $(mrktchkId);
                     /* Lets do a little Validation */
                     /* This is WHERE you do any form validation (without using PayPal 
                     built-in Validation function */
                     if (marketLocation.length > 0 ) 
                       var checked = $(mrktchkId).prop('checked');
                       if (!checked) 
                         var storedVal = $(mrktpriceId).val();
                         if ($(mrktpriceId+':not([data-val])')) 
                           $(mrktpriceId).attr("data-val", storedVal);
                         
                       $(mrktpriceId).val("");
                       
                     

                    $('#transid').val(orderDetails.id); (PAYPAL RETURN TRANSACTION ID, 
                                                         ADD TO FORM BEFORE POST)
                    $('#orderstat').val(orderDetails.status); (PAYPAL ORDER STATUS,
                                                         ADD TO FORM BEFORE POST)                                                                
                    $('#orderform').submit(); (SEND EMAIL TO BUSINESS EMAIL AFTER 
                                               TRANSACTION IS AUTHORIZED)
                 
             );

             if (details.error === 'INSTRUMENT_DECLINED') 
                $('#transmsg').html('<b>' + 'TRANSACTION WAS DECLINED'+'</b>');
                $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() 
                $('#paypalmsg').show();
                $('#chkoutmsg').show();
                $('#transmsg').empty();
             );

            return actions.restart();
           ;
         ,

         onCancel: function(data) 
            $('#transmsg').html('<b>' + 'YOUR TRANSACTION WAS CANCELLED' + '</b>');
            $('#transmsg').fadeIn('slow').delay(3000).fadeOut('slow', function() 
            $('#paypalmsg').show();
            $('#chkoutmsg').show();
            $('#transmsg').empty();
         );
       

       ).render('#paypal-button-container');

       </script>

希望这可以帮助您朝着正确的方向前进。