Can I use my own custom PayPal button with Express Checkout and REST API?

I have successfully integrated PayPal REST API and am now able to create payments. The next step is to enable payment approval. I followed the documentation found here:

https://developer.paypal.com/docs/integration/web/accept-paypal-payment/

It seems that using approval_url is considered a legacy method as it opens the approval page in a separate tab. A more modern approach is described in this document here:

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/advanced-integration/#set-up-your-client

This newer method requires rendering the PayPal button using the checkout.js library script. I prefer using my own custom button, but I'm unsure how to trigger the payment approval process or if it's even allowed. I've searched extensively for answers without success. Any assistance would be greatly appreciated.

javascriptrestpaypalpayment

Answer №1

It's not easy to customize with the limited options provided by PayPal. Most developers want full control over button choices and API interactions, but currently PayPal only allows for minor changes like color and size adjustments. Additionally, using their checkout.js means giving up some user privacy as they track your users. It's best to avoid it if you can.

Your current options are:

  1. Use express checkout with PayPal’s checkout.js for limited customization and tracking.

  2. Stick with basic checkout that requires redirects, but still gets the job done.

  3. Attempt to work around the restrictions of checkout.js to create a more customized button.

Personally, I chose option 2.

Answer №2

I've had a breakthrough and managed to make this work...

Utilizing 

https://www.paypalobjects.com/api/checkout.js
, I structured my form as follows:

paypal.checkout.setup('{{ $paypalMerchantID }}', {
   environment: '{{ $paypalEnvironment }}',
   container: 'paypal-payment-form',
      buttons: [{
         container: 'paypal-payment-form',
            type: 'checkout',
               color: 'gold',
               size: 'responsive',
               shape: 'pill'
      }]
});

This code snippet generates the button inside the designated container...however, you can also have a pre-existing button within the container like this:

<button data-paypal-button="true">Pay via Paypal</button>

Following some experimentation, it turns out the only necessary property is data-paypal-button="true".

To conceal the unattractive default button, proceed with:

.paypal-button-widget { display: none; }

A bit of a workaround, but why must using your own button on Paypal be such a challenge? :^)

Answer №3

Increase your flexibility by customizing buttons according to your needs.

For instance, if you only require a single button without extraneous information like "visa," you can utilize the following code:

                <script
                    src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.id') }}">
                </script>
                <div id="paypal-button-container"></div>
                <script>
                  paypal.Buttons({
                        style: {
                            layout: 'horizontal',
                            size: 'small',
                            color:  'blue',
                            shape:  'pill',
                            label:  'pay',
                            height: 40,
                            tagline: 'false'
                        },
                        createOrder: function(data, actions) {
                          return actions.order.create({
                            purchase_units: [{
                              amount: {
                                value: '0.01'
                              }
                            }]
                          });
                        }
                    }).render(
                        '#paypal-button-container'
                    );
                </script>

https://i.sstatic.net/Qve04.png

Explore detailed documentation for customization options.

Answer №4

As illustrated in the documentation provided by PayPal:

https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings/?mark=checkout.setup#

Furthermore, following the example presented in the link, once you select "Pay With PayPal" and proceed to confirm, it will initiate the payment process. Feel free to customize the design of the confirm button as desired, without the need for checkbox conditions or checkboxes:

https://plnkr.co/edit/XS7EvmrCY1UlkF1nHe8x?p=preview

Answer №5

If you're looking to completely cover the Paypal button's iFrame with a custom button, you can achieve this by applying "pointer-events: none" to allow users to click through it. Check out my creative solution at

Cheers!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get the username from Parse instead of using the ObjectID

When using angular and Parse for JavaScript, I have implemented a search field where an admin can input the objectid of a user to display their details. However, I would like to modify this functionality so that the admin can enter the username instead of ...

javascriptjqueryhtmlangularjsparse-platform

combine jquery to simultaneously crossfade two divs in a single function

My jquery script successfully creates a rotating/fading effect for one div on the page, but I am struggling to implement the same effect for a second div. Here is my current code: $(window).load(function() { setInterval('cycleImages()', 5000); } ...

javascriptjqueryhtml

Navigate to the same destination with React Router Dom while passing state as a parameter

Let's talk about a scenario with a Link setup like this: <Link to={`/samelocation/${id}`} state={{ state1: 'hello' }}> This link is nested in a sub-component within the main component situated at /samelocation/:id. To ensure that the ...

javascriptreactjsreact-router-dom

Solve woff file imports using Rollup

I am currently working on bundling a theme package using Rollup.js. The theme contains some global styles, specifically @font-face. I am importing the fonts and planning to inject them using styled-components injectGlobal. However, I am encountering an is ...

javascriptcssnode.jsstyled-componentsrollup

Passing a Variable Amount of Arguments to a Python Script from Node.js through the Command Line

I have a node server that is responsible for running an external python script using child_process execFile() When I know the exact number of arguments, passing them like this works perfectly fine: const { execFile } = require('node:child_process& ...

javascriptnode.jscommand-lineargumentschild-process

Adjusting the Global Position of a Child Element in Three.js

Is it possible to manipulate the global position of a child object in Three.js? My main objective is to: 1) Unlink the child from its parent (without changing its location) 2) Move the parent to a different position 3) Reconnect the child (without al ...

javascript3dthree.js

Transferring JavaScript code from Node Express to an Angular service

I am currently working on creating a unified JavaScript endpoint for utility methods that can be used on both the client and server sides. Despite conducting research, I am finding it difficult to fully understand the concepts involved. I have been consi ...

javascriptangularjsnode.jsexpress

How to properly fill state values for testing components with React Testing Library?

Introducing my custom component -> export default() => { const [list, setList] = useState([]) const handleAddToList = () => { // Executes an API call and updates the list state. setList(response); } return ( <div> ...

javascriptreactjsreact-testing-library

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

javascripthtmlcssangulartypescript

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

javascripthtmlcssreactjsweb

The console is displaying 'undefined' when attempting to render the JSON response in Vue

In my vue.js application, I'm trying to display text using TypeScript. Here is an example of the JSON response: { "data": [ { "firstName": "Foo", "lastName": "Smith" }, { "firstName": "Mi ...

javascripttypescriptvue.js

Server-side error encountered during a file upload using Ajax

I am attempting to set up ajax file upload using the HTML5 File API, following Afzaal Ahmad Zeeshan's guidance in response to this query. Even though I have replicated the entire code he provided, I am unable to make it function. The primary objecti ...

javascriptphpjqueryajaxhtml

Setting the Page Title in AngularJS 1.4.4: A Quick Guide

I'm faced with the code below <!doctype html> <html lang="en" data-ng-app="AlexsApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{$scop ...

javascripthtmlangularjsangular-routing

How to update a deeply nested object within a mongoose document

I've been struggling to update a specific object within a Mongodb document using the findOneAndUpdate() method. Here is a snippet of my collection structure: { _id: new ObjectId("61da0ab855483312e8f4483b"), products: [ { creat ...

javascriptnode.jsmongodbmongooseodm

What are the distinctions between utilizing util.inherits() and prototypes for inheritance in node.js?

The method util.inherits() allows for the inheritance of methods from one function to another. Prototypes are also a way to achieve inheritance in JavaScript. I am wondering when it is best to use .inherits() versus changing the prototype chain. Any advi ...

javascriptnode.jsprototypeprototypal-inheritance

The issue of asynchronous behavior causing malfunctioning of the PayPal button

import { PayPalButton } from 'react-paypal-button-v2' <PayPalButton amount={total} onSuccess={tranSuccess} /> const tranSuccess = async(payment) => { c ...

javascriptmongodbpaypale-commercemern

Sorting data in Javascript can be done efficiently by utilizing the .filter method

Can someone help me identify what I might be doing incorrectly? I have a chained filter under computed that is giving me an error message stating 'product.topic.sort' is not a function. My intention is to use 'select' to provide sortin ...

javascriptsortingvue.js

Ramda represents a distinct alternative to traditional vanilla JavaScript

I'm feeling a bit confused about how Ramda really works. I found this code and I'm not entirely sure how it functions. const render = curry( (renderer, value) => is(Function, renderer) && renderer(value) ); I just need to grasp an ...

javascriptramda.js

effectively showcasing information in a datatable by converting JSON data into objects

I am looking for a way to display balance information in datatables, but I have not been able to find a solution yet. <!DOCTYPE html> <html lang="en"> <head> <title>Comment</title> <meta charset="u ...

javascriptjsonajaxobjectdatatable

What is the best way to create a React component that renders a class component as a functional component?

My Objective: At the moment, I am in the process of developing an AuthUserRole HOC component to manage user roles like Manager and Employee. However, I encountered a tutorial that uses a functional component to return a class component as referenced here. ...

javascriptreactjstypescriptauthenticationhigher-order-components