I am using laravel with stripe payment element. I am trying to show the saved cards for the customers that we already have. I have followed the stripe docs and found how I can show it on checkout. But the problem is that I am not getting the saved cards for the customer. And instead I am facing an error on my console as:
When authenticating with an ephemeral key, you must set the Stripe-Version header to an explicit API version, such as 2020-08-27
I have checked and changed lot of versions from here:
$ephemeralKey = \Stripe\EphemeralKey::create(
['customer' => "$user->stripe_customer_id"],
['stripe_version' => '2019-11-05']
);
I changed the version to different version that I can see on my stripe dashboard:
This is my Js Initialize function:
// Fetches a payment intent and captures the client secret
async function initialize() {
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const { clientSecret, customerOptions } = await fetch("{{ route("user-create-stripe-element-payment") }}", {
method: "POST",
headers: {
"Content-Type" : "application/json",
"accept" : "application/json",
'X-CSRF-TOKEN': "{{ csrf_token() }}",
'stripe_version':"2019-11-05"
},
body: JSON.stringify({ totalCharge:total }),
}).then((r) => r.json());
elements = stripe.elements({
clientSecret,
appearance,
loader,
customerOptions
});
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
}
And I am also using the betas which is given in the documentation:
const stripe = Stripe("{{env('STRIPE_KEY')}}", {
betas: ['elements_customers_beta_1'],
});
But this error is not going away. And its not even populating the Payment element.
Please help me debug this or if someone has any suggestion to check what is going on here.
Thanks in advance.
You are not providing an API version in your JS here
const stripe = Stripe("{{env('STRIPE_KEY')}}", {
betas: ['elements_customers_beta_1'],
});
change the above code to
const stripe = Stripe("{{env('STRIPE_KEY')}}", {
betas: ['elements_customers_beta_1'],
apiVersion: 'Your Version Here'
});
In your case, it should be something like this
const stripe = Stripe("{{env('STRIPE_KEY')}}", {
betas: ['elements_customers_beta_1'],
apiVersion: '2019-11-05'
});
You can read more here. https://stripe.com/docs/api/versioning?lang=node
It is for nodejs but the API version override will work in the same way.
Related
I'm using the Vimeo API to upload videos and am trying to track the progress of the upload.
The documentation here is pretty straightforward:
https://developer.vimeo.com/api/upload/videos
However, I can't seem to figure out how to retrieve Upload-Length and Upload-Offset from the HEAD response.
I call the "uploadVideo" function below to upload the video to Vimeo (this function does as it should). I then call the "getProgress" function and this is where things go awry. I've tried many variations of this code, but none have worked.
async function uploadVideo(upload_link : string) {
const uploadResponse = await fetch(upload_link, {
method: 'PATCH',
headers: {
'Tus-Resumable': '1.0.0',
'Upload-Offset': '0',
'Content-Type': 'application/offset+octet-stream'
},
body: accepted
});
}
async function getProgress(upload_link : string) {
const progress = await fetch(upload_link, {
method: 'HEAD',
headers: {
'Tus-Resumable': '1.0.0',
'Accept': 'application/vnd.vimeo.*+json;version=3.4'
},
});
const currentProgress = await progress;
console.log(currentProgress);
// if (currentProgress.upload_length != currentProgress.upload_offset) {
// getProgress(upload_link)
// }
}
If I await progress.json(), I get a SyntaxError: Unexpected end of JSON input
I'm somewhat surprised that there are no up-to-date JavaScript examples of this process out there on the interwebs. Any assistance would be greatly appreciated.
Thank you for your time.
As #Clive pointed out above, to access the necessary headers, one would use:
uploadLength = progress.headers.get('upload-length');
uploadOffset = progress.headers.get('upload-offset');
This answers my specific question.
However, if you're only using the Vimeo API, you'll find that there's another challenge once this is complete. In the original code posted above, you'll never be able to track the progress of the upload with a HEAD request because the "upload-offset" value is always 0 until the initial PATCH request is completed, i.e. it's 0 until the PATCH request is complete and once it's complete it jumps directly to 100%.
To get around this issue, I decided to use "tus-js-client." So, if you've made it to where my code above leaves off, instead of using the above functions you could just pass the link (in this example, "upload_link") and the file (in this example, "accepted") to:
async function uploadVideo(upload_link : string) {
// Create the tus upload similar to the example from above
var upload = new tus.Upload(accepted, {
uploadUrl: upload_link,
onError: function(error) {
console.log("Failed because: " + error)
},
onProgress: function(bytesUploaded, bytesTotal) {
var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
console.log(bytesUploaded, bytesTotal, percentage + "%")
},
onSuccess: function() {
console.log("Download %s from %s", upload.file.path, upload.url)
}
})
// Start the upload
upload.start()
}
And here's the server-side code to get the "upload_link":
export const actions: Actions = {
upload: async ({ request }) => {
const uploadFormData = await request.formData();
const accepted = uploadFormData.get('accepted-file') as File;
const response = await fetch(`https://api.vimeo.com/me/videos`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `bearer ${import.meta.env.VITE_VIMEO_ACCESS_TOKEN}`,
'Accept': 'application/vnd.vimeo.*+json;version=3.4'
},
body: JSON.stringify({
upload: {
"approach": "tus",
"size": accepted.size
}
})
});
const dataResponse = await response.json();
return {
upload: dataResponse.upload
}
}
}
This server response is returned to a client-side "handleSubmit" function, which in turn calls the "uploadVideo" function, like so uploadVideo(result.data.upload.upload_link).
I was initially using "vimeo-upload" to accomplish this. The problems with vimeo-upload are (1) it exposes your access token to the browser and (2) the code base is outdated. I'd advise to stay away from vimeo-upload at all costs!
For what it's worth, this is a SvelteKit implementation.
If you're using SvelteKit, best to not use an import.meta.env.VITE prefixed environment variable; it should be a "private" environment variable as shown here:
https://joyofcode.xyz/sveltekit-environment-variables
I had such a hard time figuring out how to do this. I hope that this example will help someone in the future.
I am struggling to understand how to use the Shopify App Proxy feature.
We have a store using Shopify Pay and multi currency, but have offsite landing pages on Unbounce and the CRO people want to use direct checkout links, ie
https://our-shopify-store.myshopify.com/cart/36485954240671:1
Which is a nice idea, but the product gets added to the cart and then redirected to checkout in the store default currency, and it needs added in an appropriate currency based on the user location.
There seems to be no way to pass currency as a parameter in the direct checkout links so I am trying to create an intermediary app running on an app proxy to intercept this request;
https://my-cunning-proxy.com/36485954240671:1
And use a 3rd party API to get the user geoip before trying to create a checkout in the user currency by posting the variant, quantity and currency to the checkout API and receiving back a checkout url to redirect the visitor to.
What I've tried
I've got an app working in development.
The app is on https://our-shopify-store.myshopify.com with an app proxy of https://my-cunning-proxy.com/
I can access the app on https://my-cunning-proxy.com?host=our-shopify-store.myshopify.com but if I try to post to the checkout API in an included .jsx file;
const dataBody = "{\"checkout\":{\"line_items\":[{\"variant_id\":7699511831234,\"quantity\":5,\"presentment_currency\": \"USD\"}]}}";
const authtoken = 'xxxxx';
const shopifyDomain = 'https://our-shopify-store.myshopify.com/admin/api/2022-10/checkouts.json';
const response = await axios({
url: shopifyDomain,
method: 'POST',
headers: {
"X-Shopify-Access-Token": authtoken,
"Content-Type": "application/json",
"Access-Control-Allow-Origin":"*"
},
data: {
dataBody
}
});
console.log(response.data);
It rejects the post based on CORS policy. I'm not sure where the Subpath prefix and Subpath even come into things. None of the following urls work, they all 404;
const shopifyDomain = '/admin/api/2022-10/checkouts.json';
const shopifyDomain = 'https://our-shopify-store.myshopify.com/apps/proxy-subpath/admin/api/2022-10/checkouts.json';
const shopifyDomain = 'https://our-shopify-store.myshopify.com/apps/admin/api/2022-10/checkouts.json';
const shopifyDomain = '/apps/proxy-path/admin/api/2022-10/checkouts.json';
Any pointers/suggestions/observations/criticisms much appreciated, it's my first public Shopify app and it has been something of a struggle to even get to this lowly position.
I will inform you that you are indeed using App Proxy in a manner that induces head-scratching. But nonetheless, carry on.
If you wanted to create a checkout with more correctness, you can leverage Storefront API. It is meant to provide you with access to both your products and checkout, without actually forcing your customers to use your Shopify store. You should pivot to trying that out. While it is not perfect, it is far superior to simply hitting a checkout with a variant ID, because as you have indicated, that does not work at all with multi-currency. Or does it?
Since Shopify hacked on languages and markets recently, have you looked into markets, where you can sell to your "market" in their currency?
Anyway, long story short, and the answer, you are getting CORS because you are doing App Proxy all wrong, and no, it cannot help you with your checkout issue!
As mentioned in the comments, I realised the easy solution to the problem (although not necessarily the answer to this question) was to do it using JS and not use an app at all.
Create a custom page template that includes a div <div id="direct-checkout"></div>. In this example it has the url /pages/direct-checkout
Assuming there is a currency switcher form template in the theme in this format;
{%- if localization.available_countries.size > 1 -%}
<div class="currency-switcher-form">
<localization-form>
{% form 'localization' %}
<div class="select-country" data-input-name="country2" data-selected-country="{{ localization.country.iso_code }}"></div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
{% endform %}
</localization-form>
</div>
{%- endif -%}
You would use the following JS for both general currency switching (rather than using the badly performing and impossible to tweak Shopify Geolocation App) and also to handle the direct-to-checkout links passing product variant and quantity parameters.
It uses a cookie to reduce the geoip API calls and would redirect users who had previously been on the site to the currency they had previously been assigned/selected.
/*-----------------------------------------------------------------------------------*/
/* GeoIP currency switching
/*-----------------------------------------------------------------------------------*/
function setCurrencyCookie(countryCode) {
var cookieArguments = {
expires: 30,
path: '/',
domain: 'your-domain.com'
}
Cookies.set('_your-domain-geoip-currency', countryCode, cookieArguments);
}
var cookieName = '_your-domain-geoip-currency';
if (!Cookies.get(cookieName)) {
autoCurrencySwitch();
} else {
instantBuy();
}
function autoCurrencySwitch() {
$.ajax( {
url: 'https://api.ipgeolocation.io/',
type: 'GET',
dataType: 'json',
success: function(location) {
var currencyCountry= location.country_code2;
$('input[name="country_code"]').val(currencyCountry);
$(".select-country").attr('data-selected-country', currencyCountry);
var form = $('form#localization_form');
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(),
success: function(data){
setCurrencyCookie(currencyCountry);
instantBuy();
},
error: function(errorData){
console.log('currency switch error', errorData);
}
});
}
});
}
/*-----------------------------------------------------------------------------------*/
/* Direct Checkout Redirect
/*-----------------------------------------------------------------------------------*/
function instantBuy( ){
var directCheckoutElement = document.getElementById("direct-checkout");
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Example URL
// https://your-domain.com/pages/direct-checkout?variant=417239912345&quantity=1
let variantId = params.variant;
let qty = params.quantity;
if (directCheckoutElement && variantId && qty) {
$.ajax({
url: "/cart/add.js",
type: "POST",
data : { id: variantId, quantity: qty },
dataType: 'json',
success: function(data){
window.location.href = "/checkout";
},
error: function(errorData){
console.log('checkout redirect error', errorData);
}
});
} else {
return false;
}
}
Hopefully this can help someone with the same requirement I had.
I'm using the following code to send a notification from one device to another using FCM. Everything works fine until before return admin.messaging().sendToDevice(...). The 'Token ID: ' log displays token ID of the receiver, but when I set the variable token_id to the sendToDevice function, the notification is not called, therefore the notification is not sent. Can someone tell me what's wrong?
var firebase = require("firebase-admin");
var serviceAccount = require("./julla-tutorial.json");
console.log("enter in then Firebase Api");
const firebaseToken = [
'e0T6j1AiRjaa7IXweJniJq:APA91bHNznSHSIey08s-C-c3gchci6wepvhP1QxQyYbmZ8LySI3wnu64iW7Q23GhA6VCdc4yodZoCFOgynfAb5C8O8VE81OcSv_LL-K3ET1IKGZ_6h35n-_q5EKFtfJWlzOqZr4IvpiB',
'dNWnSqyCQbufzv1JutNEWr:APA91bFcI9FDyRxHRBEcdw4791X0e-V0k1FjXcSstUA67l94hSojMRCd6LWr2b57azNEt3z_XLwLljMX4u2mc9cZDrAVm55Mw9CHGyue-09KofWnnHNR9XWBibc4T76xOV_DWX7T2RvW',
'cq65rtuaTCKGk5lHk7UabN:APA91bFR3kAArg6lhuBq7ktNuBk7Z9MXXk3PskqhYa8CgNaEl6MX4TQ5lo35d6XhnCQ4fEkCkyZ_j08evxE9Y4oVCRTEdqsrkccCVTE8Di47lfmDR3i1NdoL3re9oLw6F_uNsnvRoQcq'
]
firebase.initializeApp({
credential: firebase.credential.cert(serviceAccount)
})
const payload = {
notification: {
title: 'Demo 2345',
body: 'dfghj',
sound: 'default',
color: 'yellow',
android_channel_id: 'default',
channel_id: 'default'
},
data: { id: 'broadcast', channelId: 'default' }
}
const options = {
priority: 'high',
timeToLive: 60 * 60 * 24, // 1 day
};
console.log('------payload---',payload);
console.log('-----TOKEN_Array----',firebaseToken);
console.log('-------options-----',options);
firebase.messaging().sendToDevice(firebaseToken, payload, options).then(function (response) {
console.log('--------response',response);
}) .catch(function (error) {
console.log('-------rejet',reject);
});
It looks like you did not change the code from this tutorial:
https://medium.com/#jullainc/firebase-push-notifications-to-mobile-devices-using-nodejs-7d514e10dd4
you will need to change the 2nd line of code:
var serviceAccount = require("./julla-tutorial.json");
to actually point to your own firebase-push-admin.json file which holds your private keys registering your backend app with the firebase cloud messaging api. you can download this file from the firebase console as mentioned in the above article.
I recommend hiding this file from your git history by adding it to .gitignore so you dont accidentally push your private keys to a public repo.
I will link you another resource in addition to above link which helped me implement firebase push notifications in a nodeJS backend app.
https://izaanjahangir.medium.com/setting-schedule-push-notification-using-node-js-and-mongodb-95f73c00fc2e
https://github.com/izaanjahangir/schedule-push-notification-nodejs
Further I will also link you another repo where I am currently working on a fully functional firebase push notification implementation. Maybe it helps to actually see some example code.
https://gitlab.com/fiehra/plants-backend
I'm doing a SPA project using Vanilla JS. It is a kind of notice board platform where there are categories. Each category will have a list of posts that users have uploaded.
This is the URL format for each category: base_URL/{category}/{pageNum}.
This is the URL format for each post: base_URL/board/${board_id}.
I have to extract the board_id some how upon the user clicking it and use it in the URL (ex: http://example.com/board/31890adfa).
From searching I found out I'll be using the history API.
Then I'll extract the board_id from the URL and send a request to view that post:
const fetchBoardDetails = async (board_id) => {
await fetch(`http://${base_URL}/board/${board_id}`, {
method: "GET",
headers: { "Content-Type": "application/json" },
}).then(async (res) => {
const data = await res.json();
root.innerHTML = `
<h1>${data.title}</h1>
<ul>
<li>${data.category}</li>
<li>${data.date}</li>
<li>${data.place}</li>
<li>${data.fee}</li>
</ul>
`
}
My problem is, how do I get the board_id in step 1 to use in step 2? I think it has to do with URL routing and I've tried to figure it out but can't wrap my head around it.
I am a bit new to VueJS and I am using Laravel as API only and VueJS as a separate project.
In my App.vue, I have following setup:
http://api.com is my virtual host!
<script>
import axios from 'axios';
export default {
data () {
return {
}
},
created() {
const postData = {
grant_type: "password",
client_id: 2,
client_secret: 'MvEyvm3MMr0VJ5BlrJyzoKzsjmrVpAXp9FxJHsau',
username: 'mail#gmail.com',
password: '**********',
scope: ''
}
axios.post('http://api.com/oauth/token', postData)
.then(response => {
const header = {
'Accept': 'application/json',
'Authorization': 'Bearer ' + response.data.access_token,
};
axios.get('http://api.com/api/user', { headers: header })
.then(response => {
console.log(response.data)
})
})
}
}
</script>
But this file is totally visible to front-end which is not good due to security reasons.
What I did, I made a new route in Laravel as Route::post('get_client_creds', MyController#index); and then made a request from axios as:
axios.post('http://api.com/get_client_creds')
.then(response => {
this.client_secret = response.client_secret;
});
And but then I thought anyone can also access the route using Postman or may be through console using axois, so can someone give me some suggestions about where to store these secrets???
Thanks in Advance!
There are two different ways to specify config settings for vue
#1 Vue.js non-cli projects, you can use src/config.js
Create a new file src/config.js and add as following
export const API_CLIENT_ID = '123654';
To use this, try import like:
import { API_CLIENT_ID } from '../config'
// in your code
console.log(API_CLIENT_ID);
#2 For Vue CLi projects follow these steps.
You must use the .env files hold the configuration variables.
It could be structured like
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
Here is how you can specify the variable.
FOO=bar
API_CLIENT_ID=123456
And you can use this as:
console.log(process.env.API_CLIENT_ID)
Please follow the documentation for more details.
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables