Checkout with PayPal Demo

Using Orders v2 REST API with PayPal JavaScript SDK

Server-side Integration

Item


BLACK DIGITAL CAMERA
with 18-55mm Zoom Lens

Pricing Details



Readme


  1. Enter REST API credentials in common/config/config.json. Note: generate your own REST app and credentials with the steps here.
  2. Click on 'PayPal Checkout’ button and see the experience.
  3. Checkout with PayPal using a buyer sandbox account. Note: generate your own sandbox buyer accounts with the steps here.
  4. In the guest checkout experience, the buyer country can be switched. When switched to one of Germany, Poland, Austria, Netherlands, Italy and Spain, you will be able to choose the alternative payment methods offered in those countries.

  5. For example: Selecting 'Germany' in the country drop down will pre-fill the shipping address on the Shipping Information page. For countries not mentioned in step 4, enter the address manually.

In-Context Checkout integration steps with PayPal JavaScript SDK


  1. Copy the files and folders in the package to the same location where you have your shopping cart page.
  2. In order to view Alternative Payment Methods as part of the guest checkout flow, you must add query parameters intent=capture, commit=true, vault=false and buyer-country= and you must provide a supported buyer country
  3. Include the following script on your shopping cart page: (For APMs, the layout must be vertical and setting up the payment in the alternative payment method supported currency is required for the alternative payment method to render.)
    
            paypal.Buttons({
            env: 'sandbox', // sandbox | production
        
                // Set style of buttons
                style: {
                    layout: 'vertical',   // horizontal | vertical <-Must be vertical for APMs
                    size:   'responsive',   // medium | large | responsive
                    shape:  'pill',         // pill | rect
                    color:  'gold',         // gold | blue | silver | black,
                    fundingicons: false,    // true | false,
                    tagline: false          // true | false,
                },
        
            // payment() is called when the button is clicked
            createOrder: function() {
        
                return fetch('/my-server/create-paypal-transaction')
                    .then(function(res) {
                        return res.json();
                    }).then(function(data) {
                        return data.orderID;
                    });
            },
        
            // onAuthorize() is called when the buyer approves the payment
            onApprove: function(data, actions) {
        
                return fetch('/my-server/capture-paypal-transaction', {
                        body: JSON.stringify({
                        orderID: data.orderID
                        })
                    }).then(function(res) {
                        return res.json();
                    }).then(function(details) {
                        alert('Transaction funds captured from ' + details.payer_given_name);
                    });
            }
        }).render('#paypal-button-container');
                    
  4. Open your browser and navigate to your Shopping cart page. Click on 'Checkout with PayPal' button and complete the flow.
  5. You can use the sample Buyer Sandbox credentials provided on index/home page.
  6. Refer to PayPal Developer site for detailed guidelines.
  7. Click here for the API reference.