How to redirect user to paypal checkout form for card payment?
mercha
Contributor
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Posted on
Mar-11-2024
03:41 AM
We have an e-commerce web application where users can buy merch. Our technology stack is nuxt and Laravel for frontend and backend. We have integrated PayPal standard checkout in the nuxt js. When a user clicks on the "Debit & Credit Card" button it will automatically populate the card form on the same page. But, we want the user to be redirected to the PayPal card checkout form rather than populating the card payment form on the same page.
We are using this(@paypal/paypal-js) package for integration
Here is the code that we use to integrate PayPal into our website.
initCardFields() {
const self = this;
loadScript({
clientId: 'AYRo7uGEffdXYsqG9OdLKyxmatSVqNQqqqjRMTy_LDrQNng_-0Xx0Y2XRwkZmjzGSBElVso-BUb9zGpY',
components: 'buttons,card-fields',
}).then(paypal => {
const FUNDING_SOURCE = [paypal.FUNDING.CREDIT, paypal.FUNDING.CARD];
// FUNDING_SOURCE.forEach((fundingSource) => {
console.log(paypal.CardFields().isEligible(), 'cardfield');
paypal.Buttons({
async createOrder() {
const details = {
amount: self.amount,
currency: self.currency === 'USDR' ? 'USD' : self.currency,
}
try {
const response = await self.$axios.post('/create-order', details);
if (response.data.id) {
return response.data.id;
} else {
const errorDetail = response?.details?.[0];
const errorMessage = errorDetail
? `${errorDetail.issue} ${errorDetail.description} (${response.debug_id})`
: JSON.stringify(response);
throw new Error(errorMessage);
}
} catch (error) {
self.errorToast('Payment Failed!');
}
},
async onApprove(data, actions) {
try {
let zar_shipping = localStorage.getItem("zar_shipping_price");
let currentCurrencyShipAmount = localStorage.getItem("orderCurrencyShipping");
let paymentMethod = localStorage.getItem("paymentBrand") || null;
let is_pre_order = localStorage.getItem("is_pre_order") || 0;
let user_object;
let artist_id;
let social_platform;
if (new Date().getTime() < localStorage.getItem("social-gust-user")) {
user_object = localStorage.getItem("social-gust-user");
artist_id = localStorage.getItem("artist_id");
social_platform = localStorage.getItem("social_platform");
}
self.$nuxt.$loading.start();
const response = await self.$axios.post(`/capture-order`, {
order_id: data.orderID,
currency: self.currency === 'USDR' ? 'USD' : self.currency,
zarShippingPrice: zar_shipping,
currentCurrencyShipAmount: currentCurrencyShipAmount,
paymentMethod: paymentMethod,
is_pre_order: is_pre_order,
user_object,
artist_id,
social_platform
});
if (response.data.error == false) {
self.successToast(response.data.msg);
}
} catch (error) {
self.errorToast('Payment Failed!');
}
},
}).render('#your-container-element')
});
},
0 REPLIES 0

Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
Related Content
- Is it possible to make payments in RON (Romanian Leu) through PayPal? in REST APIs
- Payments Refunded Automatically After Successful Transactions - PayPal Business Account Issue in REST APIs
- p is not a function error using the example downloaded from Paypal in SDKs
- How to enable on-demand / recurring payments to existing PayPal checkout? in SDKs
- How do you create subscriptions with PayPal Advanced Checkout? in SDKs