The paypal developer docs show how to implement the Paypal Button into Vue.js but I don't understand the code. At this point I'm not even sure if this is vue 2 or vue 3 or angular?? code.
1: import script in parent blade:
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
2: use button in script tag of component?
paypal.Buttons.driver("vue", window.Vue);
3: this is where I get lost, use this in app.js??:
#ng.core.Component({
selector: 'my-app',
template:
<div id="app">
<paypal-buttons [props]="{
createOrder: createOrder,
onApprove: onApprove
}"></paypal-buttons>
</div>
,
})
class AppComponent {
createOrder(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
}
onApprove(data, actions) {
return actions.order.capture();
}
}
#ng.core.NgModule({
imports: [
ng.platformBrowser.BrowserModule,
paypal.Buttons.driver('angular2', ng.core)
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
class AppModule {}
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(AppModule);
Could it be that this isn't even vue code but angular code?
4: and put this in the vue component??:
<div id="container">
<app></app>
</div>
<script>
const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
Vue.component("app", {
// The style prop for the PayPal button should be passed in as `style-object` or `styleObject` to avoid conflict with Vue's `style` reserved prop.
template: `
<paypal-buttons :on-approve="onApprove" :create-order="createOrder" :on-shipping-change="onShippingChange" :on-error="onError" :style-object="style" />
`,
components: {
"paypal-buttons": PayPalButton,
},
computed: {
createOrder: function () {
return (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: "10",
},
},
],
});
}
},
onApprove: function () {
return (data, actions) => {
return actions.order.capture();
}
},
onShippingChange: function () {
return (data, actions) => {
if (data.shipping_address.country_code !== 'US') {
return actions.reject();
}
return actions.resolve();
}
},
onError: function () {
return (err) => {
console.error(err);
window.location.href = "/your-error-page-here";
}
},
style: function () {
return {
shape: 'pill',
color: 'gold',
layout: 'horizontal',
label: 'paypal',
tagline: false
}
},
},
});
const vm = new Vue({
el: "#container",
});
</script>
My question is, how would I create a simple paypal button in Vue 3's script setup? The paypal cdn is imported in the parent blade file.
Something like:
<script setup>
import {onMounted} from "vue";
onMounted(() => {
//create component from -> paypal.Buttons.driver("vue", window.Vue);
})
</script>
<template>
<div id="checkout" class="checkout">
<paypal-buttons></paypal-buttons>
</div>
</template>
I would recommend the following implementation:
Install official paypal-js npm package: npm install #paypal/paypal-js
Then you can write your PaypalButtons Component as follows:
<script setup>
import {Inertia} from '#inertiajs/inertia';
import {loadScript} from '#paypal/paypal-js';
import {onMounted} from 'vue';
const props = defineProps({
// Some kind of reference if you like
reference: Object
});
onMounted(async() => {
try {
const paypal = await loadScript({
'client-id': <your-paypal-client-id>
});
await paypal.Buttons({
createOrder: function() {
function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
// e.g reference.price
value: '<your-price>',
},
}],
});
},
onApprove: function(data) {
return actions.order.capture().then(function(orderData) {
// Successful capture!
// e.g. Inertia.post(route('order.update', reference.orderId)
});
},
style: {
// Adapt to your needs
layout: 'vertical',
color: 'gold',
shape: 'rect',
label: 'paypal',
},
// The following is optional and you can
// limit the buttons to those you want to
// provide
fundingSource: paypal.FUNDING.PAYPAL,
}).render('#paypal-button-container');
} catch (error) {
// Add proper error handling
console.error(error);
}
});
</script>
<template>
<div id="paypal-button-container"></div>
</template>
Now use it as:
<PaypalButtons :reference="reference" />
Paypal documentation is a huge mess. The server integration seems to work like so:
if you're using laravel as backend, import this into app.blade.php/welcome.blade.php file:
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
and then your vue component can look like this:
<script setup>
import {onMounted} from "vue";
onMounted(() => {
paypal.Buttons({
// Call your server to set up the transaction
createOrder: function(data, actions) {
return fetch('/demo/checkout/api/paypal/order/create/', {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(orderData) {
return orderData.id;
});
},
// Call your server to finalize the transaction
onApprove: function(data, actions) {
return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(orderData) {
// Three cases to handle:
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
// (2) Other non-recoverable errors -> Show a failure message
// (3) Successful transaction -> Show confirmation or thank you
// This example reads a v2/checkout/orders capture response, propagated from the server
// You could use a different API or structure for your 'orderData'
var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
return actions.restart(); // Recoverable state, per:
// https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
}
if (errorDetail) {
var msg = 'Sorry, your transaction could not be processed.';
if (errorDetail.description) msg += '\n\n' + errorDetail.description;
if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
return alert(msg); // Show a failure message (try to avoid alerts in production environments)
}
// Successful capture! For demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
var transaction = orderData.purchase_units[0].payments.captures[0];
alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
// Replace the above to show a success message within this page, e.g.
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '';
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
}
}).render('#paypal-button-container');
})
</script>
<template>
<div id="checkout" class="checkout">
<div id="paypal-button-container"></div>
</div>
</template>
Which payment methods are displayed is determined automatically and depends on your IP (???). You can hide payment methods by manipulating the script import like so:
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&disable-funding=card,giropay,sepa,sofort"></script>
Related
I am trying to make Paypal Checkout work with Vue.JS 3 (using the loader)
Right now I got this far:
setPaypal() {
const script = document.createElement('script');
script.src = 'https://www.paypal.com/sdk/js?client-id=AdlvqGHWrrwVpGXreZuf5VHBXjIeUWGLHBJmDzbI44Ib2w1MMN7P-UJysCHFb_W7BWTvpz0ofji0SiYB';
document.body.appendChild(script);
script.addEventListener('load', this.setLoaded())
}
This function is called in the mounted(): and inserts the script tag in my page.
setLoaded() {
window.paypal.Buttons({
createOrder: (actions) => {
return actions.order.create({
purchase_units: [
{
description: this.prestation.courtedescription,
amount: {
currency_code: "EUR",
value: this.total
}
}
]
});
},
onApprove: async () => {
this.paidFor = true;
this.loading = false;
},
onError: err => {
console.log(err)
}
})
.render(this.$refs.paypal)
}
This is the setLoaded() function called when the script is loaded.
Well obviously window.paypal is undefined
I tried using the official docs and same shit, they ask you to
const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
But hey, paypal is not defined
For reference, this is the official docs
Add the SDK <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
Vue integration
<div id="container">
<app></app>
</div>
<script>
const PayPalButton = paypal.Buttons.driver("vue", window.Vue);
Vue.component("app", {
template: `
<paypal-buttons :on-approve="onApprove" :create-order="createOrder" />
`,
components: {
"paypal-buttons": PayPalButton,
},
computed: {
createOrder: function () {
return (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: "10",
},
},
],
});
}
},
onApprove: function () {
return (data, actions) => {
return actions.order.capture();
}
},
},
});
const vm = new Vue({
el: "#container",
});
</script>
Instead of using this in your setPaypal() function
script.addEventListener('load', this.setLoaded())
Use this
script.addEventListener('load', () => this.setLoaded())
I finished my app and I am planning to host it online. Can my clients use sandbox accounts to make real transactions? This is my first time developing an app and making it have real online transactions using Paypal. Does it have something to do with coding or I have to change a setting in Paypal itself?
Payments.vue
<template>
<div>
<div ref="paypal"></div>
</div>
</template>
mounted()
{
const script = document.createElement("script");
script.src =
"https://www.paypal.com/sdk/js?client-MY-CLIENT-ID";
script.addEventListener("load", this.setLoaded);
document.body.appendChild(script);
}
methods: {
setLoaded: function () {
this.loaded = true;
window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
// description: this.product.description,
amount: {
currency_code: "USD",
value: this.product.price,
},
},
],
});
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.$q.notify({
message: "Transaction Successful!",
color: "green",
actions: [
{
label: "Dismiss",
color: "white",
handler: () => {
/* ... */
},
},
],
});
let dateObj = new Date();
let month = dateObj.getMonth();
let day = dateObj.getDate();
let year = dateObj.getFullYear();
let output = month + "" + day + "" + year;
this.$store
.dispatch("SAVE_ENTRY", {
username: this.username,
password: this.password,
confirmPass: this.confirmPass,
access_id: output + this.newAccData,
chosenSchoolId: this.chosenSchoolId,
})
.then((res) => {
if (res.data === "Success1") {
this.$q.notify({
message:
"Transaction Successful! Please complete your registration process inside the website.",
color: "green",
actions: [
{
label: "Dismiss",
color: "white",
handler: () => {
/* ... */
},
},
],
});
}
});
console.log(order);
},
onError: (err) => {
console.log(err);
},
})
.render(this.$refs.paypal);
},
}
I believe there's a sandbox environment, on https://sandbox.paypal.com/ . You have to change the API endpoint to something like that. The sandbox uses separate accounts that can be made in the developer environment on PayPal API pages.
You should be able to set up sandbox accounts here:
https://developer.paypal.com/developer/accounts/
However I dont think this is supposed to be a Javascript/Vue question, you'd want your PayPal API calls to take place on the server side as much as possible.
I'm studying javascript and mithril.js 1.1.6. I'm writing down a simple web app in which users land on a page where he can login. Users who already did login land on a different page. I'm trying this using conditional routing, here is the main component:
const m = require("mithril");
...
import Eventbus from './whafodi/eventbus.js';
import WelcomePage from './ui/welcome.js';
import User from './model/user.js';
var eventbus = new Eventbus();
function MyApp() {
return {
usrAuth: function() {
m.route(document.body, "/", {
"/": { view: () => m("p", "hello")}
})
},
usrNotAuth: function() {
m.route(document.body, "/", {
"/": { render: v => m(WelcomePage, eventbus) }
})
},
oninit: function(vnode) {
vnode.state.user = new User();
eventbus.subscribe({
type: "login",
handle: function(action) {
vnode.state.user.token = action.token;
console.log(JSON.stringify(vnode.state.user));
}
});
},
view: function(vnode) {
if(vnode.state.user.token) {
this.usrAuth();
} else {
this.usrNotAuth();
}
}
}
};
m.mount(document.body, MyApp);
MyApp is the main component. It check if user has a token, then return the proper route. This is the component that is in charge to let users login:
const m = require("mithril");
const hellojs = require("hellojs");
function TopBar(node) {
var bus = node.attrs.eventbus;
function _login() {
hellojs('facebook').login({scope:'email'});
}
return {
oninit: function(vnode) {
hellojs.init({
facebook: XXXXXXX,
}, {
redirect_uri: 'http://localhost'
});
hellojs.on('auth.login', auth => {
var fbtoken = auth.authResponse.access_token;
m.request({
method:"POST",
url:"./myapp/login/fb/token",
data:auth.authResponse,
background: true
}).then(function(result){
console.log(result);
bus.publish({ type: "login", token: result.jwttoken });
m.route.set("/");
}, function(error){
console.log(error);
bus.publish({ type: "login", token: "" });
});
});
},
view: function(vnode) {
return m("div", [
m("button", { onclick: _login }, "Login")
]);
}
}
}
export default TopBar;
TopBar component occurs in the WelcomePage component mentioned in the main one. TopBar renders a button and use hello.js to login. It uses the EventBus bus parameter to tell main component user logged in (there is an handler in main component to update the user model). Once user logins, event is fired and main component updates the user model. Good. Now, how can trigger the main component to load the right route?
I read mithril'docs again and I found that RouteResolvers perfectly suit my needs. Here is an example:
var App = (function() {
var login;
function isLoggedIn(component) {
if(login) {
return component;
} else {
m.route.set("/hey");
}
}
return {
oninit: function(vnode) {
EventBus.subscribe({
type: "login",
handle: function(action) {
console.log("incoming action: " + JSON.stringify(action));
login = action.value;
}
});
},
oncreate: function(vnode) {
Foo.eventbus = EventBus;
Bar.eventbus = EventBus;
Hey.eventbus = EventBus;
m.route(document.body, "/hey", {
"/foo": {
onmatch: function(args, requestedPath, route) { return isLoggedIn(Foo); }
},
"/bar": {
onmatch: function(args, requestedPath, route) { return isLoggedIn(Bar); }
},
"/hey": Hey
});
},
view: function(vnode) {
return m("div", "home..");
}
};
})();
Eventbus is used to let components communicate with App. They fire events (login type events) that App can handle. I found convenient to pass Eventbus the way oncreate method shows, I can use Eventbus in each component's oncreate to let components fire events.
I try to use Mixins with Vue.js. But I encounter several issues with them :/
This is my current code for my two test modules :
ErrorBaseMixin.vue
<script>
import ErrorAlert from './ErrorAlert';
export const ErrorBaseMixin = {
data() {
return {
// Errors management
error_display: true,
error_data: {
level: "warning",
time: 0,
status: 200,
message: ""
}
}
},
methods: {
// ------------------------------------------------------------------------
// Errors management functions
// ------------------------------------------------------------------------
error_function_show_error: function() {
try {
this.$refs.error_component.launch();
}
catch {}
},
callback_error_catched: function(e) {
if(e.message === 'Network Error'){
this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
this.error_data.level = "danger";
}
else {
this.error_data.message = "An error occured : " + e.message;
this.error_data.level = "warning";
}
this.error_function_show_error();
},
},
components: {
ErrorAlert
}
}
export default ErrorBaseMixin;
</script>
Test.vue
<template>
<ErrorAlert
:error_display="error_display"
:error="error_data"
ref="error_component"
/>
</div>
</template>
<script lang="js">
import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.vue';
export default {
mixins: [ErrorBaseMixin],
name: 'Test_elt',
created() {
this.REST_ADDR = "test/test";
},
data() {
return {
field: {
id: '55',
name: 'test'
}
}
},
methods: {
}
}
</script>
But when I compile the last module, I have the following errors in my browser console :
[Vue warn]: Property or method "error_data" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option or for class-based components, by
initializing the property.
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
But... Everything is working fine. So I don't understand why I have these errors
You must change ErrorBaseMixin.vue to ErrorBaseMixin.js:
import ErrorAlert from './ErrorAlert';
const ErrorBaseMixin = {
data() {
return {
// Errors management
error_display: true,
error_data: {
level: "warning",
time: 0,
status: 200,
message: ""
}
}
},
methods: {
// ------------------------------------------------------------------------
// Errors management functions
// ------------------------------------------------------------------------
error_function_show_error: function() {
try {
this.$refs.error_component.launch();
}
catch {}
},
callback_error_catched: function(e) {
if(e.message === 'Network Error'){
this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
this.error_data.level = "danger";
}
else {
this.error_data.message = "An error occured : " + e.message;
this.error_data.level = "warning";
}
this.error_function_show_error();
},
},
components: {
ErrorAlert
}
}
export default ErrorBaseMixin;
And then import in your component:
import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.js';
export default {
mixins: [ErrorBaseMixin],
...
Note: Take care how import and export, I have changed the way.
I am in the process of integrating AmazonPay into a React SPA. The classic integration relies on script tags and callbacks (docs).
Here is one example from the button widget:
<head>
<script type='text/javascript'>
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('CLIENT-ID');
};
window.onAmazonPaymentsReady = function() {
showButton();
};
</script>
<script async="async" src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>
</head>
<body>
. . .
<div id="AmazonPayButton">
</div>
...
<script type="text/javascript">
function showButton(){
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "SELLER-ID", {
type: "TYPE",
color: "COLOR",
size: "SIZE",
authorization: function() {
loginOptions = {scope: "SCOPES",
popup: "POPUP-PARAMETER"};
authRequest = amazon.Login.authorize (loginOptions,
"REDIRECT-URL");
},
onError: function(error) {
// your error handling code.
// alert("The following error occurred: "
// + error.getErrorCode()
// + ' - ' + error.getErrorMessage());
}
});
};
</script>
. . .
<script type="text/javascript">
document.getElementById('Logout').onclick = function() {
amazon.Login.logout();
};
</script>
</body>
When using React, the div with id="AmazonPayButton" isn't on the page until React mounts the div, causing the window.showButton() function to fail.
To circumvent this issue, I've wrapped the function showButton() definition inside window.showButton():
window.onAmazonPaymentsReady = function() {
window.showButton = function () {
var authRequest;
// eslint-disable-next-line no-undef
OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%", {
type: "PwA",
color: "Gold",
size: "medium",
authorization: function () {
loginOptions = {
scope: "profile postal_code payments:widget payments:shipping_address",
popup: true
};
authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
},
onError: function (error) {
console.log(error.toString())
}
});
};
};
The component which contains the AmazonPay div can now be called on componentDidMount:
import React, {Component} from 'react'
class AmazonMethod extends Component {
componentDidMount () {
window.showButton()
}
render() { return <div id="AmazonPayButton"></div>}
}
export default AmazonMethod
I am confused how to access the onError callback from inside my React component. How do I listen for the callback and respond appropriately?
This question applies to AddressWidget and WalletWidget as well; they all rely on script tag callbacks.
Update:
I've written a post which summarizes how to integrate AmazonPay with client side React.
Why don't you just pass in a function to your showButton function in componentDidMount that onError can call?
Something like this:
window.onAmazonPaymentsReady = function() {
window.showButton = function (errorFunc) {
var authRequest;
// eslint-disable-next-line no-undef
OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%", {
type: "PwA",
color: "Gold",
size: "medium",
authorization: function () {
loginOptions = {
scope: "profile postal_code payments:widget payments:shipping_address",
popup: true
};
authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
},
onError: function (error) {
console.log(error.toString())
errorFunc(error)
}
});
};
};
import React, {Component} from 'react'
class AmazonMethod extends Component {
componentDidMount () {
window.showButton(this.errorFunc)
}
errorFunc = (error) => {
console.log(error);
this.setState({
amazonError: error
});
}
render() { return <div id="AmazonPayButton"></div>}
}
export default AmazonMethod