I am trying to generate an items list response from paypal checkout requests. I am trying to do it dynamically, using my data objects and some computed properties in a for in loop. As far as I have understood, my items_list will always need to be a data variable, never a hard-coded array.
Here is my template element:
<div v-bind:key="plan.key" v-for="plan in plans" >
<PayPal
:amount="plan.price" // all good
currency="GBP" // all good
:client="credentials" // all good
env="sandbox" // all good
:items="[plan]" // this is NOT working
#payment-authorized="payment_authorized_cb" // all good
#payment-completed="payment_completed_cb" // all good
#payment-cancelled="payment_cancelled_cb" // all good
>
</PayPal>
</div>
Here are my data objects on my script:
plans: {
smallPlan: {
name: 'Small Venue',
price: '6',
},
mediumPlan: {
name: 'Medium Department',
price: '22',
},
}
payment_completed: {
payment_completed_cb() {
}
},
payment_authorized: {
payment_authorized_cb() {
}
},
payment_cancelled: {
payment_cancelled_cb() {
}
},
Here are my methods:
methods: {
payment_completed_cb(res, planName){
toastr.success("Thank you! We'll send you a confirmation email soon with your invoice. ");
console.log(res);
},
payment_authorized_cb(res){
console.log(res);
},
payment_cancelled_cb(res){
toastr.error("The payment process has been canceled. No money was taken from your account.");
console.log(res);
},
The documentation of Vue-paypal-checkout is available here https://www.npmjs.com/package/vue-paypal-checkout
If I don't add the items list :items everything works perfectly:
{"id":"PAY-02N9173803167370DLPMKKZY","intent":"sale","state":"approved","cart":"90B34422XX075534E","create_time":"2018-10-30T18:39:51Z","payer":{"payment_method":"paypal","status":"VERIFIED","payer_info":{"email":"joaoalvesmarrucho-buyer#gmail.com","first_name":"test","middle_name":"test","last_name":"buyer","payer_id":"JCZUFUEQV33WU","country_code":"US","shipping_address":{"recipient_name":"test buyer","line1":"1 Main St","city":"San Jose","state":"CA","postal_code":"95131","country_code":"US"}}},"transactions":[{"amount":{"total":"245.00","currency":"GBP","details":{}},"item_list":{},"related_resources":[{"sale":{"id":"2RA79134UX2301839","state":"pending","payment_mode":"INSTANT_TRANSFER","protection_eligibility":"ELIGIBLE","parent_payment":"PAY-02N9173803167370DLPMKKZY","create_time":"2018-10-30T18:39:50Z","update_time":"2018-10-30T18:39:50Z","reason_code":"RECEIVING_PREFERENCE_MANDATES_MANUAL_ACTION","amount":{"total":"245.00","currency":"GBP","details":{"subtotal":"245.00"}}}}]}]}
But if I add :items="[plan]" i get this error message:
Uncaught Error: Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 400 error. Correlation id: 19238526650f5, 19238526650f5
{
"name": "VALIDATION_ERROR",
"details": [
{
"field": "transactions.item_list.items.item_key",
"issue": "This field name is not defined for this resource type"
}
],
"message": "Invalid request - see details",
"information_link": "https://developer.paypal.com/docs/api/payments/#errors",
"debug_id": "19238526650f5"
Any thoughts?
Also if you happen to know, is there a way to sell/implement a subscription instead of a one-off transaction using Vue-paypal-checkout?
Many thanks
Related
I try to create a Non-Inventory Sale item with the NetSuite API.
Here is my request :
Method : POST
Endpoint: /services/rest/record/v1/nonInventorySaleItem
Payload:
{
"itemId": "Test Item",
"IncomeAccount": {
"id": "1315"
},
"deterredRevenueAccount": {
"id": "1343"
},
"itemType": {
"refName": "NonInvtPart"
},
"location": {
"id": "46"
},
"taxSchedule": {"id": "1"}
}
It keeps returning 400 HTTP Error and the message :
Error while accessing a resource. Please enter value(s) for: Tax Schedule.
I tried to work around with a custom entity field and a UserEventScript SuiteScript to update taxSchedule before submit without success.
I spoke with NetSuite support staff and they basically said that the feature isn't supported. If you want you can create a RESTlet and recreate the functionality by accepting the parameters that you want and creating the item that way. Something roughly like this:
define(['N/record'], function(record) {
function post(context) {
if (context.request.method !== 'POST') {
throw {
status: 405,
message: 'Invalid HTTP method',
};
}
// Parse the request body
var requestBody = JSON.parse(context.request.body);
// Create the inventory item record
var itemRecord = record.create({
type: record.Type.INVENTORY_ITEM,
isDynamic: true,
});
// Set the item name, tax schedule, asset account, and cogs account
itemRecord.setValue({
fieldId: 'itemid',
value: requestBody.name,
});
itemRecord.setValue({
fieldId: 'taxschedule',
value: requestBody.taxSchedule,
});
itemRecord.setValue({
fieldId: 'assetaccount',
value: requestBody.assetAccount,
});
itemRecord.setValue({
fieldId: 'cogsaccount',
value: requestBody.cogsAccount,
});
// Save the inventory item record
var itemId = itemRecord.save({
enableSourcing: true,
ignoreMandatoryFields: true,
});
// Return the new inventory item ID
return {
id: itemId,
};
}
return {
post: post,
};
});
Obviously also include any other fields that you want, but I found that the Tax Schedule, COGS account, and asset accounts were all required.
When using Datatables (Ver: 1.10.16), I noticed that the data in the API is not updated immediately via ajax.reload in the callback even though the site says the callback is not called until the new data has arrived and been redrawn.
Notes up front:
All the data is formatted correctly and displays in the table before and after the ajax.reload, including the new data from the reload.
If I click reload twice, the api sees the new data properly and ApplyHeaderFilters works properly.
When I say the API seeing the data properly I mean like so:
$('#dtTbl').DataTable().column('1:visible').data().unique()
The ApplyHeaderFilters is the callback on ajax.reload and uses the above JS command to get unique values from the column. The data returned from the JS command are not reflecting the new data that is returned from the reload.
This is in the Document Ready:
batchDT = $('#dtTbl').DataTable( {
deferLoading: true,
pageLength: 25,
pagingType: 'simple_numbers',
scrollx: true,
initComplete: function () {
ApplyHeaderFilters($(this).attr('id'), this.api());
},
ajax: {
url: "mysite.cfm?method=gettabledata",
type: 'POST'
},
columns: [
{ title: "Description", name: "description", data: "description"},
{ title: "Is Active", name: "isactive", data: "isactive"},
{ title: "List Item ID", name: "listitemid", data: "listitemid"},
{ title: "Name", name: "name", data: "name"},
{ title: "Table Ref ID", name: "tablerefid", data: "tablerefid", orderable: false}
]
} );
$("#reload").on('click',function(){
batchDT.ajax.reload(ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable()));
});
For some reason the callback was being called before the reload was completed. I fixed this by wrapping my callback function in reload in an anon function. If anyone has ideas why this would be this way comment please. I have a feeling it has something to do with closures and how they are handling the callback in the datatables library.
$("#reload").on('click',function(){
batchDT.ajax.reload(function(){
ApplyHeaderFilters('dtTbl', $('#dtTbl').DataTable());
});
});
I have this file containing translations to be used in my game application:
{
"de": {
"gamestate": {
"won": "Gewonnen!",
"lost": "Leider verloren!",
"retry": "Nochmal versuchen"
},
"settings": {
"label": {
"playfieldWidth": "Spielfeldbreite",
"playfieldHeight": "Spielfeldhöhe",
"fieldSize": "Feldbreite",
"bombcount": "Anzahl der Bomben"
}
}
},
"en": {
"gamestate": {
"won": "You won!",
"lost": "Game over!",
"retry": "Retry"
},
"settings": {
"label": {
"playfieldWidth": "playfield width",
"playfieldHeight": "playfield height",
"fieldSize": "field size",
"bombcount": "Number of bombs"
}
}
}
}
I put these in a const messages = require('/i18n/translations.json') and attach it to my data property.
In my VM, I have a data property that contains the iso code for the language:
data () {
return {
language: 'en',
messages
}
}
Now when I want to output messages from this, I'd like to go
<p>{{ message('gamestate.won') }}</p>
For this purpose I wrote a computed:
computed: {
message (key) {
let message = messages[this.language]
key.split('.').forEach(function (keypart) {
message = message.hasOwnProperty(keypart) ? message[keypart] : undefined
})
return message || key
}
}
But unfortunately computed properties don't seem to take arguments, and that's why I get
[Vue warn]: Error in render: "TypeError: key.split is not a function"
Next I tried to implement as a methods property instead of a computed, which changes the error to
[Vue warn]: Error in render: "TypeError: _vm.message is not a function"
How can I achieve my goal using Vue.js 2x?
As someone proved via a codepen, my code works. The problem was that before I implemented the translation stuff, I was already using a property message which my endGame() method was trying to fill:
endGame () {
this.winLoseSymbol = '😡'
this.message = 'GAME OVER!' // this was the cause of the problem
this.gamestate = 'lost'
this.stopTimer()
}
Since in the new version message is supposed to be a function, overwriting it with a string causes those parts of the application that were using the function to fail.
PayPal's Express Checkout documentation says that you can customize the checkout using the Experience API. And when you go to the Experience API documentation, you see the ability to set a custom name, logo_image, and more.
In our implementation, hiding the shipping fields (no_shipping: 1) works - and that uses the Experience API - but setting the name and logo_image does not.
Code below. Does anyone know if there's a way to set name and/or logo_image?
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '9.99', currency: 'USD' }
}
]
},
experience: {
name: 'Custom Name',
presentation: {
logo_image: 'https://i.imgur.com/customimage.png'
},
input_fields: {
no_shipping: 1
}
}
});
},
So, I will go straight to the point. I am getting such data from api:
[
{
id: 123,
email: asd#asd.com
},
{
id: 456,
email: asdasd.com
},
{
id: 789,
email: asd#asd
},
...
]
and I should validate email and show this all info in a list, something like this:
asd#asd.com - valid
asdasd.com - invalid
asd#asd - invalid
...
My question is what is the best way to store validation data in a store? Is it better to have something like "isValid" property by each email? I mean like this:
store = {
emailsById: [
123: {
value: asd#asd.com,
isValid: true
},
456: {
value: asdasd.com,
isValid: false
},
789: {
value: asd#asd,
isValid: false
}
...
]
}
or something like this:
store = {
emailsById: [
123: {
value: asd#asd.com
},
456: {
value: asdasd.com
},
789: {
value: asd#asd
}
...
],
inValidIds: ['456', '789']
}
which one is better? Or maybe there is some another better way to have such data in store? Have in mind that there can be thousands emails in a list :)
Thanks in advance for the answers ;)
I recommend reading the article "Avoiding Accidental Complexity When Structuring Your App State" by Tal Kol which answers exactly your problem: https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a
Your example is quite simplistic and everything really depends on your needs but personally I would go with something like this (based on linked article):
var store = {
emailsById: {
123: {
value: '123#example.com',
},
456: {
value: '456#example.com',
},
789: {
value: '789#example.com',
},
// ...
},
validEmailsMap: {
456: true, // true when valid
789: false, // false when invalid
},
};
So your best option would be to create a separate file that will contain all your validations methods. Import that into the component you're using and then when you want to use the logic for valid/invalid.
If its something that you feel you want to put in the store from the beginning and the data will never be in a transient state you could parse your DTO through an array map in your reducer when you get the response from your API.
export default function (state = initialState, action) {
const {type, response} = action
switch (type) {
case DATA_RECIEVED_SUCCESS:
const items = []
for (var i = 0; i < response.emailsById.length; i++) {
var email = response.emailsById[i];
email.isValid = checkEmailValid(email)
items.push(email)
}
return {
...state,
items
}
}
}
However my preference would be to always check at the last moment you need to. It makes it a safer design in case you find you need to change you design in the future. Also separating the validation logic out will make it more testable
First of all, the way you defined an array in javascript is wrong.
What you need is an array of objects like,
emails : [
{
id: '1',
email: 'abc#abc.com',
isValid: true
},
{
id: '2',
email: 'abc.com',
isValid: false;
}
];
if you need do access email based on an id, you can add an id property along with email and isValid. uuid is a good way to go about it.
In conclusion, it depends upon your use case.
I believe, the above example is a good way to keep data in store because it's simple.
What you described in your second example is like maintaining two different states. I would not recommend that.