File Content: paypal.js jQuery(function ($) { const containerSelector = 'paypal-standard-container'; let orderReceivedUrl = ''; let orderId = ''; let orderKey = ''; let productPageCartData = {}; function renderButtons() { const container = document.getElementById( containerSelector ); if ( ! container ) { return; } // If PayPal is not loaded, don't try to render the buttons. if ( typeof paypal === 'undefined' ) { return; } applyStyles(); /** * Manage the cart contents when placing an order from the product page. * * @returns {Promise<boolean>} */ const manageCartForProductPageOrder = async () => { // Get product ID from the value of the "add-to-cart" button. const addToCartBtn = document.querySelector('[name="add-to-cart"]'); let productId = addToCartBtn ? addToCartBtn.value : null; const variationIdField = document.querySelector( '[name="variation_id"]' ); const variationId = variationIdField ? variationIdField.value : null; if ( variationId ) { productId = variationId; } if ( ! productId ) { return false; } // Get quantity from the value of the "quantity" input field. const quantityField = document.querySelector( '[name="quantity"]' ); const quantity = quantityField ? quantityField.value : '1'; if ( quantity === '' ) { return false; } // Clearing the cart and re-adding the item causes the current WooCommerce draft order to be lost. // If the user is re-opening the payment modal and has not changed anything, do nothing; // we want to resume the existing draft order if the cart has not changed. if ( orderId && productPageCartData.id === productId && productPageCartData.quantity === quantity ) { return true; } try { // Empty the cart before adding the product. const emptyCartResponse = await window.wp.apiFetch( { method: 'DELETE', path: '/wc/store/v1/cart/items', } ); // Expected response is an empty array. if ( ! emptyCartResponse || emptyCartResponse.length != 0 ) { throw new Error( 'Failed to empty cart' ); } // Add the product to the cart. const addToCartResponse = await window.wp.apiFetch( { method: 'POST', path: '/wc/store/v1/cart/items', data: { id: productId, quantity, }, } ); if ( ! addToCartResponse || ! addToCartResponse.key ) { throw new Error( 'Failed to add product to cart' ); } } catch ( error ) { return false; } // Remember what we added to the cart, so we don't have to repeat the action // when the user re-opens the payment modal. productPageCartData = { id: productId, quantity, }; return true; } const buttons = paypal.Buttons( { appSwitchWhenAvailable: true, async createOrder( data ) { // If we're inside the product page, we need to manage the cart contents // ourselves. if ( paypal_standard.is_product_page ) { const cartSuccess = await manageCartForProductPageOrder(); if ( ! cartSuccess ) { return null; } } let responseData; try { // Create a draft order in WooCommerce. responseData = await window.wp.apiFetch( { method: 'GET', path: '/wc/store/v1/checkout', headers: { Nonce: paypal_standard.wc_store_api_nonce, }, } ); if ( ! responseData.order_id || ! responseData.order_key ) { // eslint-disable-next-line no-console console.error( 'Failed to create WooCommerce order', responseData ); return null; } // Create a PayPal order. const paypalResponseData = await window.wp.apiFetch( { method: 'POST', path: '/wc/v3/paypal-buttons/create-order', headers: { Nonce: paypal_standard.create_order_nonce, }, data: { order_id: responseData.order_id, order_key: responseData.order_key, payment_source: data.paymentSource || '', app_switch_request_origin: paypal_standard.app_switch_request_origin, }, } ); orderId = paypalResponseData.order_id; orderKey = responseData.order_key; orderReceivedUrl = paypalResponseData.return_url; return paypalResponseData.paypal_order_id; } catch ( error ) { // eslint-disable-next-line no-console console.error( 'Failed to create order', error ); return null; } }, onApprove() { if ( orderReceivedUrl ) { window.location.href = orderReceivedUrl; } }, async onCancel( data ) { if ( ! orderId ) { // When coming back from App Switch, the order ID may not be available in the // client-side data. Check the URL for the order ID. orderId = new URLSearchParams( window.location.search ).get( 'order_id' ); } if ( ! orderId ) { return; } try { await window.wp.apiFetch( { method: 'POST', path: '/wc/v3/paypal-buttons/cancel-payment', headers: { Nonce: paypal_standard.cancel_payment_nonce, }, data: { order_id: orderId, paypal_order_id: data.orderID, }, } ); orderReceivedUrl = ''; } catch ( error ) { // eslint-disable-next-line no-console console.error( 'Failed to cancel PayPal payment', error ); } }, onError: function ( error ) { const sanitizedErrorMessage = $( '<div>' ).text( error.message || paypal_standard.generic_error_message ).html(); const messageWrapper = '<ul class="woocommerce-error" role="alert"><li>' + sanitizedErrorMessage + '</li></ul>'; const $noticeContainer = $( '.woocommerce-notices-wrapper' ).first(); if ( ! $noticeContainer.length ) { return; } $( '.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message' ).remove(); $noticeContainer.prepend( messageWrapper ); }, }); if ( buttons.hasReturned() ) { // App Switch resume flow. buttons.resume(); } buttons.render( container ).catch( function ( err ) { // eslint-disable-next-line no-console console.error( 'Failed to render PayPal buttons', err ); }); } // Align the PayPal buttons to the center of the container on classic checkout page. function applyStyles() { const paypalContainer = document.getElementById( containerSelector ); const containerWidth = paypalContainer.offsetWidth; // PayPal buttons have max-width: 750px inside the iframe. // Calculate the left margin to center a 750px button container. const leftMargin = Math.max( 0, ( containerWidth - 750 ) / 2 ); paypalContainer.style.marginLeft = leftMargin + 'px'; } // Re-render when cart is updated and the html is rerendered on the Cart page. $( document.body ).on( 'updated_cart_totals', function () { // If the container was replaced, re-render PayPal buttons const buttonsContainer = document.getElementById( containerSelector ); if ( buttonsContainer && ! buttonsContainer.querySelector( 'iframe' ) ) { renderButtons(); } } ); renderButtons(); }); Submit