I use braintree.dropin , to create front-end for credit card form.
payment_method.html (I masked out authorization value with ???)
<head>
<meta charset="utf-8">
<script src="https://js.braintreegateway.com/web/dropin/1.12.0/js/dropin.min.js"></script>
</head>
<body>
<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
<script>
// https://stackoverflow.com/a/133997/72437
function post(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
var button = document.querySelector('#submit-button');
braintree.dropin.create({
authorization: '???',
container: '#dropin-container'
}, function (createErr, instance) {
button.addEventListener('click', function () {
instance.requestPaymentMethod(function (err, payload) {
post('/billing/subscribe/',
{
'csrfmiddlewaretoken': 'lDqtKKosE9yBGtKmFv4BSBvDCGEX1WPsY0JOy0XlZC5Vnc6zR5BQmuCzkhzeS1PJ',
'subscription_plan': 2,
'payload_nonce': payload.nonce
}
);
});
});
});
</script>
</body>
However, I'm getting this warning message, after submitting credit card information.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://origin-analytics-sand.sandbox.braintree-api.com/cn2rcqfn435vtj63. (Reason: CORS request did not succeed).
Although the whole process works fine (I manage to make payment without problem), I afraid perhaps I should fix warning, to avoid any security loop hole. It is caused by post function called.
However, I have no idea what is the reason for such warning, and how I should fix it.
As, my page's domain is localhost, and I'm performing POST back to localhost domain. I thought this is not cross domain issue? Where does the https://origin-analytics-sand.sandbox.braintree-api.com/cn2rcqfn435vtj63 warning comes from then?
Any idea?
What I had tested
If I perform post function called, outside instance.requestPaymentMethod's callback function scope, cross-origin warning will not occur. Of course, I can't do that because I need payload.nonce from instance.requestPaymentMethod's callback function.
