Question

我使用JavaScript的经验有限，并且正在尝试将在服务器上生成的客户端令牌传递到Braintree的javascript代码的braintree客户端创建中。我不知道如何将ClientToken从jQuery帖子传递出去，并传递到braintree.client.create的授权部分。我的部分代码如下：

<script src="https://js.braintreegateway.com/web/3.34.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.34.0/js/hosted-fields.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
<script src="https://js.braintreegateway.com/web/3.34.0/js/paypal-checkout.min.js"></script>
<script>
var form = document.querySelector('#register-form');
    var submit = document.querySelector('input[type="submit"]');
    var ClientToken;
    var authPosting = jQuery.post('/path/to/php_scripts/getClientToken.php');
    authPosting.done(function( data ) {
        ClientToken = data;
        console.log(ClientToken);
    });

    braintree.client.create({
        authorization: 'ClientToken'
    }, function (clientErr, clientInstance) {
        if (clientErr) {
            console.error(clientErr);
            return;
        }

        braintree.hostedFields.create({
            client: clientInstance,
            styles: {
                'input': {
                    'font-size': '15px',
                    'font-family': 'roboto, verdana, sans-serif',
                    'font-weight': 'lighter',
                    'color': 'black'
                },
                ':focus': {
                    'color': 'black'
                },
                '.valid': {
                    'color': 'black'
                },
                '.invalid': {
                    'color': 'black'
                }
            },
            fields: {
                number: {
                    selector: '#card-number',
                    placeholder: ''
                },
                cvv: {
                    selector: '#cvv',
                    placeholder: ''
                },
                expirationDate: {
                    selector: '#expiration-date',
                    placeholder: 'MM/YY'
                },
                postalCode: {
                    selector: '#postal-code',
                    placeholder: ''
                }
            }
        }, function(err, hostedFieldsInstance) {
            if (err) {
                console.error(err);
                return;
            }

            function findLabel(field) {
                return jQuery('.hosted-field--label[for="' + field.container.id + '"]');
            }

            hostedFieldsInstance.on('focus', function (event) {
                var field = event.fields[event.emittedBy];
                findLabel(field).addClass('label-float').removeClass('filled');
                jQuery(".error-msg").hide();
            });

            // Emulates floating label pattern
            hostedFieldsInstance.on('blur', function (event) {
                var field = event.fields[event.emittedBy];
                var label = findLabel(field);

                if (field.isEmpty) {
                    label.removeClass('label-float');
                } else if (field.isValid) {
                    label.addClass('filled');
                } else {
                    label.addClass('invalid');
                }
            });

            hostedFieldsInstance.on('empty', function (event) {
                var field = event.fields[event.emittedBy];

                findLabel(field).removeClass('filled').removeClass('invalid');
            });

            hostedFieldsInstance.on('validityChange', function (event) {
                var field = event.fields[event.emittedBy];
                var label = findLabel(field);

                if (field.isPotentiallyValid) {
                    label.removeClass('invalid');
                } else {
                    label.addClass('invalid');
                }
            });

            //Submit function

            jQuery("#register-form").validate({

                submitHandler: function(form) {

                    event.preventDefault();

                    hostedFieldsInstance.tokenize(function (err, payload) {
                        if (err) {
                            if (err.code === 'HOSTED_FIELDS_FIELDS_EMPTY') {
                                var msg = "All credit card fields are required.";
                                jQuery(".error-msg").text(msg);
                                jQuery(".error-msg").show();
                            } else if (err.code === 'HOSTED_FIELDS_FIELDS_INVALID') {
                                var invalidFields = err.details.invalidFieldKeys;
                                invalidFields.forEach(function (field) {
                                    if (field == "number") {
                                        var myid = "card-number";
                                        var myobj = "credit card number";
                                    } else if (field == "expirationDate") {
                                        var myid = "expiration-date";
                                        var myobj = "expiration date";
                                    }
                                    jQuery("#" + myid).append("<div class='error-msg'>Please enter a valid " + myobj + ".</div>");
                                });
                            } else {
                                var msg = "There was an error on the form."
                                alert (msg);
                            }
                            return;
                        }

                        vfirst = jQuery(  "input#firstname" ).val(),
                            vlast = jQuery( "input#lastname" ).val(),
                            vemail = jQuery( "input#email" ).val(),
                            vproof = jQuery( "input[name='proof']" ).val(),
                            vprice = jQuery( "tr#total td.price" ).data('price'),
                            vcourse = 1950,
                            vnonce = 'fake-valid-nonce',
                            url = '/path/to/php_scripts/placeOrder.php';

                        // This is where you would submit payload.nonce to your server
                        // alert('Submit your cc nonce to your server here!');
                    });

                    //form.submit();

                }
            });

        });


        ....more code below....
    </script>

任何建议将不胜感激。

Answer 1

回答我自己的问题：

CLIENT_AUTHORIZATION = jQuery.parseJSON(jQuery.ajax({
        url: "/path/to/php_scripts/TokenScript.php",
        dataType: "json",
        async: false
    }).responseText);

 braintree.client.create({
        authorization: CLIENT_AUTHORIZATION.token
    }, function (clientErr, clientInstance) {
        if (clientErr) {
            console.error(clientErr);
            return;
        } code continues.....

CLIENT_AUTHORIZATION.token是在客户端授权脚本上命名的任何令牌。

将Braintree Client令牌集成到braintree.client.create中

1 个答案: