Checkout

Use the JavaScript SDK to create checkout for your site. The JavaScript SDK is a library that runs on the client side of your website and helps your payers pay with PayPal using payment buttons, advanced credit and debit cards, and more.

Payment buttons

Payment buttons present various payment methods to your payers, such as PayPal Credit, credit card payments, iDEAL, and Bancontact.

To render the payment buttons, pass your client ID as a query parameter to the JavaScript SDK. Use your sandbox client ID to run test transactions.

Sample script

1<script src="https://www.paypal.com/sdk/js?client-id=CLIENT-ID&merchant-id=MERCHANT-ID¤cy=USD&intent=capture" data-partner-attribution-id="BN-CODE"></script>
2<div id="paypal-button-container"></div>
3<script>paypal.Buttons().render('#paypal-button-container');</script>

Modify the code

Modify the code as follows:

• Pass the merchant ID of the merchant you're facilitating a payment for in the merchant-id. The merchant ID is the merchant's PayPal account ID. To get the merchant ID:
  • Read the merchantIdInPayPal query parameter attached to the return URL when the merchant finishes onboarding and is redirected back to your site.
  • Query the tracking_id you specified in the partner referrals call by calling GET /v1/customer/partners/partner_id/merchant-integrations?tracking_id=TRACKING-ID.
• Set data-partner-attribution-id to your partner attribution ID to receive revenue attribution.
• Set intent to capture to immediately capture funds or set it to authorize to authorize your buyers' funds before you capture them.

Implement the createOrder and onApprove functions when rendering the buttons:

• createOrder is called when the payer clicks on one of the payment buttons and returns an order ID to render the checkout flow.
• onApprove is called when the payer completes checkout by approving the order and calls your server to either immediately capture the order or authorize the order.

Customization

You can customize your checkout integration to enhance the end-user experience. For more information about the customizations available, refer to Customize the Checkout experience.

You can also:

• Customize the SDK
• Save payment methods
• Implement alternative payment methods

Advanced credit and debit cards

Advanced credit and debit cards helps you accept credit and debit cards directly on your website while remaining PCI compliant.

1. Request client token

You need a client token to render the card fields. To request a client token:

Sample request

1curl -v -X POST https://api-m.sandbox.paypal.com/v1/identity/generate-token/ 
2   -H 'Accept: application/json' 
3   -H 'Accept-Language: en_US' 
4   -H 'Authorization: Bearer ACCESS-TOKEN' 
5   -H 'Content-Type: application/json'

Sample response

A successful request returns a client token and the number of seconds before the token expires.

1{
2    "client_token": "CLIENT-TOKEN",
3    "expires_in": 3600
4}

To render the advanced credit and debit cards, load the JavaScript SDK. Pass your client ID as a query parameter, set the components to hosted-fields, and set the data-client-token to your client token. Use your sandbox client ID to run test transactions.

1<script src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=CLIENT-ID&merchant-id=MERCHANT-ID¤cy=USD&intent=capture" data-partner-attribution-id="BN-CODE"></script>
2<div id="paypal-button-container"></div>
3<script>paypal.Buttons().render('#paypal-button-container');</script>

Modify the code

Modify the code as follows:

• Pass the merchant ID of the merchant you're facilitating a payment for in the merchant-id. The merchant ID is the merchant's PayPal account ID. To get the merchant ID:
  • Read the merchantIdInPayPal query parameter attached to the return URL when the merchant finishes onboarding and is redirected back to your site.
  • Query the tracking_id you specified in the partner referrals call by calling GET /v1/customer/partners/partner_id/merchant-integrations?tracking_id=TRACKING-ID.
• Set data-partner-attribution-id to your partner attribution ID to receive revenue attribution.
• Set intent to capture to immediately capture funds or set it to authorize to authorize your buyers' funds before you capture them.

2. Render card fields

Next, render the advanced credit and debit cards on your page:

1<script src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=CLIENT-ID&merchant-id=MERCHANT-ID¤cy=USD&intent=capture" data-partner-attribution-id="BN-CODE"></script>
2<div id="paypal-button-container"></div>
3<script>paypal.Buttons().render('#paypal-button-container');</script>
4<form id="my-sample-form">
5  <label for="card-number">Card Number</label>
6  <div id="card-number"></div>
7  <label for="expiration-date">Expiration Date</label>
8  <div id="expiration-date"></div>
9  <label for="cvv">CVV</label>
10  <div id="cvv"></div>
11  <button value="submit" id="submit" class="btn">Pay with Card</button>
12</form>
13<script>
14if (paypal.HostedFields.isEligible() === true) {
15  paypal.HostedFields.render({
16    createOrder: function(data, actions) {
17      return fetch('/my-server/create-order', {
18        method: 'POST'
19      }).then(function(res) {
20        return res.json();
21      }).then(function(data) {
22        // Handle the response data
23      });
24    },
25    styles: {
26      input: {
27        'font-size': '14px',
28        'font-family': 'Product Sans',
29        'color': '#3a3a3a'
30      },
31      'focus': {
32        'color': 'black'
33      }
34    },
35    fields: {
36      number: {
37        selector: '#card-number',
38        placeholder: 'Credit Card Number',
39      },
40      cvv: {
41        selector: '#cvv',
42        placeholder: 'CVV',
43      },
44      expirationDate: {
45        selector: '#expiration-date',
46        placeholder: 'MM/YYYY',
47      }
48    }
49  }).then(function(hostedFields) {
50    document.querySelector('#my-sample-form').addEventListener('submit', function(event) {
51      event.preventDefault();
52      hostedFields.submit().then(function(payload) {
53        return fetch('/my-server/handle-approve/' + payload.orderId, {
54          method: 'POST'
55        }).then(function(response) {
56          if (!response.ok) {
57            alert('Something went wrong');
58          }
59        });
60      });
61    });
62  });
63}
64</script>

Modify the code

• Specify where to render card fields using the fields key. This renders iframes hosted by PayPal that collects the buyer’s credit card information. These iframes allow you to customize the look and feel of your web page while ensuring that you are compliant with PCI requirements - SAQ A.
• To authorize or capture funds using the buyer’s credit card information, you must implement a function to return an order ID for the value of the createOrder key. This function is called during the operation of hostedFields.submit(). In this example, the value of createOrder is a function that calls your server in order to get the order ID.
• Upon fulfilling hostedFields.submit(), the order status is set to APPROVED and funds are ready to be authorized or captured from the buyer. In this example, your server is called to either immediately capture the order or authorize the order.

Customization

You can customize your checkout integration to enhance the end-user experience. For more information about the customizations available, refer to Customize the Checkout experience.

You can also:

• Customize the SDK
• Save payment methods