How to redirect user to paypal checkout form for card payment?

mercha
Contributor
Contributor

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')

});
},
Login to Me Too
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.