Save PayPal with the JavaScript SDK

Current

Last updated: Oct 22nd, 7:30am

After customers save their PayPal Wallet, they can select it for faster checkout. Customers won't have to enter payment details for future transactions.

To vault PayPal Wallets, payers need to log in to your site, make a purchase, and remain on your site when transactions take place.

Customers with a PayPal Wallet can:

Review PayPal transactions and transaction history

Review, add, or remove funding sources

Review and cancel recurring payments

Hold a balance in their PayPal account

Use PayPal to send and receive money

Withdraw money to a linked bank account

Use PayPal to transact with merchants

Availability

The list of supported countries:

Australia

Austria

Belgium

Bulgaria

Canada

China

Cyprus

Czech Republic

Denmark

Estonia

Finland

France

Germany

Hong Kong

Hungary

Ireland

Italy

Japan

Latvia

Liechtenstein

Lithuania

Luxembourg

Malta

Netherlands

Norway

Poland

Portugal

Romania

Singapore

Slovakia

Slovenia

Spain

Sweden

United Kingdom

United States

Know before you code

This integration requires a PayPal Developer account.
You'll need to onboard sellers before you can save payment methods with the SDK.
This procedure modifies an existing standard payments or advanced credit and debit card payments integration.
Your payments integration must have a server-side capture call or a server-side authorization and capture call.
To save payment methods, you must be able to uniquely identify payers. For example, payers create an account and log in to your site.
Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:
- Your sandbox account login information
- Your access token

How it works

PayPal encrypts payment method information and stores it in a digital vault for that customer.

The payer saves their payment method.

For a first-time payer, PayPal creates a customer ID. Store this within your system for future use.

When the customer returns to your website and is ready to check out, pass their PayPal-generated customer ID to the JavaScript SDK. The customer ID tells the JavaScript SDK to save or reuse a saved payment method.

The payer completes a billing agreement.

The JavaScript SDK populates the checkout page with each saved payment method. Each payment method appears as a one-click button next to other ways to pay.

The checkout process is now shorter because it uses saved payment information.

Return payer experience

The following is an example of what a payer sees after they save their PayPal Wallet on your site. Returning payers can select their saved payment method at checkout to pay faster.

The payer uses a credit card in their PayPal Wallet in the following example:

Use cases

Businesses save payment methods if they want customers to:

Check out without re-entering a payment method
Pay after use, for example, ride-sharing and food delivery

Get vetted to save PayPal Wallets

To go live, you'll need to be vetted for PayPal Wallet. You can start the vetting process from the Merchant Servicing Dashboard.

Only your sandbox business account is enabled for vaulting payment methods.
Your developer account remains unaffected.You'll complete production onboarding when you're ready to go live.

Generate user ID token for payer

The OAuth 2.0 API to retrieve an access_token has an additional parameter, response_type, that can be set to id_token. Include the id_token and access_token in the response.

Platform

First-time payer

A payer wants to save a payment method for the first time. Modify the following code to generate a user ID token:

Sample server-side user ID token request

1curl -s -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
2 -u CLIENT_ID:CLIENT_SECRET \
3 -H "Content-Type: application/x-www-form-urlencoded" \
4 -d "grant_type=client_credentials" \
5 -d "response_type=id_token"

Modify the code Copy the sample request code.
Change CLIENT_ID to your client ID.
Change CLIENT_SECRET to your client secret.

Returning Payer

A payer wants to use a saved payment method. Use the saved PayPal-generated customer ID in the POST body parameter target_customer_id as shown in the following sample request. The customer ID is a unique ID for a customer that is generated when the payment_source is saved into the vault. This customer ID is available when capturing the order or retrieving the saved payment information.

Note: Use the customer identifier generated by PayPal and not the identifier that you use to identify the customer in your system.

Sample server-side user ID token request with a PayPal-generated customer ID

1curl -s -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
2 -u CLIENT_ID:CLIENT_SECRET \
3 -H "Content-Type: application/x-www-form-urlencoded" \
4 -d "grant_type=client_credentials" \
5 -d "response_type=id_token" \
6 -d "target_customer_id=674817847" // PayPal-generated customer ID

Modify the code Copy the sample request code.
Change CLIENT_ID to your client ID.
Change CLIENT_SECRET to your client secret.
Replace the PayPal-generated CUSTOMER_ID with the actual customer ID that was stored in your system.

Merchant

First-time payer

A payer wants to save a payment method for the first time. Modify the following code to generate a user ID token:

Sample server-side user ID token request

1curl -s -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
2 -u CLIENT_ID:CLIENT_SECRET \
3 -H "Content-Type: application/x-www-form-urlencoded" \
4 -d "grant_type=client_credentials" \
5 -d "response_type=id_token"

Modify the code Copy the sample request code.
Change CLIENT_ID to your client ID.
Change CLIENT_SECRET to your client secret.

Returning Payer

Note: Use the customer identifier generated by PayPal and not the identifier that you use to identify the customer in your system.

1curl -s -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
2 -u CLIENT_ID:CLIENT_SECRET \
3 -H "Content-Type: application/x-www-form-urlencoded" \
4 -d "grant_type=client_credentials" \
5 -d "response_type=id_token" \
6 -d "target_customer_id=674817847" // PayPal-generated customer ID

Modify the code Copy the sample request code.
Change CLIENT_ID to your client ID.
Change CLIENT_SECRET to your client secret.
Replace the PayPal-generated CUSTOMER_ID with the actual customer ID that was stored in your system.

A successful request returns fields including an access_token, id_token, and the number of seconds the access_token is valid.

The id_token:

Uniquely identifies each payer.

Expires in a few minutes because it's meant to be used during checkout. Generate new tokens if the current tokens expire.

Tip: Each buyer session is unique. Set up your server to generate a new client token each time payment fields render on your page.

Pass user ID token to JavaScript SDK

Pass the id_token from your server into the JavaScript SDK using the data-user-id-token.

1<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-user-id-token="YOUR-ID-TOKEN"></script>

If you are processing PayPal transactions on behalf of another merchant, include the merchant_id parameter as described in the JavaScript SDK script configuration.

Add PayPal button

Add the JavaScript SDK code to show the PayPal button on your product and checkout pages.
Determine where the SDK should show the PayPal button. Use configuration attributes to control the layout of the button.

Set up container element
Include JavaScript SDK
Render PayPal buttons

1<!-- Set up a container element for the button -->
2<div id="paypal-button-container"></div>

1<!-- Include the JavaScript SDK. Replace '<YOUR_CLIENT_ID>' with your client ID.-->
2<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID" data-user-id-token="YOUR-ID-TOKEN"></script>

1<script>
2  // Render the PayPal buttons within the #paypal-button-container
3  paypal.Buttons().render('#paypal-button-container')
4</script>

Create order

Include client-side callbacks to:

Manage interactions with APIs
Manage payer approval flows
Handle any events that lead to cancellation or error during payer approval

Client-side code snippet
Server-side sample request - Platform
Server-side sample request - Merchant
Server-side sample response - Platform
Server-side sample response - Merchant

1<script>
2  paypal.Buttons({
3      // Call your server to set up the transaction
4      createOrder: function(data, actions) {
5        return fetch('/yourserver.com/createOrder', {
6          method: 'post',
7          body: JSON.stringify({
8            source: data.paymentSource, // PayPal, Venmo, and so on
9          }),
10        }).then(function(res) {
11          return res.json();
12        }).then(function(orderData) {
13          return orderData.id;
14        });
15      },
16      // Authorize or capture the transaction after payer approves
17      onApprove: (data, actions) => {
18        return fetch('/yourserver.com/order/' + data.orderID + '/capture/', {
19          method: 'post'
20        });
21      },
22      onCancel(data, actions) {
23        console.log(`Order Canceled - ID: ${data.orderID}`);
24      },
25      onError(err) {
26        console.error(err);
27      }
28  }).render('#paypal-button-container');
29</script>

Server-side code snippet

Set up your server to call the Create Order API. The button that the payer selects determines payment_source sent in the sample.

This SDK uses the Orders v2 API to save payment methods in the background. Use the server-side sample request to add attributes needed to save a PayPal Wallet.

Request

In the sample request, payment_source.paypal.attributes.vault.store_in_vault with the value ON_SUCCESS means the PayPal button is saved with a successful authorization or capture.

Pass payment_source.paypal.experience_context and include return_url and cancel_url to redirect the payer after they approve or cancel the order.

To allow a payer to save payment tokens for both PayPal and Venmo, pass permit_multiple_payment_tokens value as true in payment_source.paypal.attributes.vault.

To save payments at the platform level, set usage_type to PLATFORM under the vault attribute.

To save payments at the merchant level:

The Orders API call must contain the PayPal-Auth-Assertion field.

Set usage_type to MERCHANT under the vault attribute.

For returning payers, also pass shipping_preference.

Platform Response

Return the id to your client to call the payer approval flow if payment_source needs payer approval.

Note: The request to save the PayPal button is made when the order is created through payment_source.attributes.vault.store_in_vault. Vault details are available only after an order is authorized or captured.

Platform

To save payments at the platform level, set the usage_type to PLATFORM under the vault attribute.

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
2 -H "Content-Type: application/json" \
3 -H "Prefer: return=representation" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -H "PayPal-Request-ID: REQUEST-ID" \
6 -H "Authorization: Bearer ACCESS-TOKEN" \
7 -d '{
8    "intent": "CAPTURE",
9    "payment_source": {
10        "paypal": {
11            "attributes": {
12                "vault": {
13                    "store_in_vault": "ON_SUCCESS",
14                    "usage_type": "PLATFORM"
15                }
16            }
17        }
18    },
19    "purchase_units": [
20        {
21            "description": "Camera Shop",
22            "amount": {
23                "currency_code": "USD",
24                "value": "10.00",
25                "breakdown": {
26                    "item_total": {
27                        "currency_code": "USD",
28                        "value": "10.00"
29                    }
30                }
31            },
32            "payee": {
33                "merchant_id": "U6UEX8PG8RRHY"
34            },
35            "items": [
36                {
37                    "name": "Camera",
38                    "unit_amount": {
39                        "currency_code": "USD",
40                        "value": "10.00"
41                    },
42                    "quantity": "1"
43                }
44            ],
45            "shipping": {
46                "address": {
47                    "address_line_1": "123 Main St.",
48                    "address_line_2": "Unit B",
49                    "admin_area_1": "CA",
50                    "admin_area_2": "Anytown",
51                    "postal_code": "12345",
52                    "country_code": "US"
53                }
54            }
55        }
56    ]
57}'

Platform

Sample response

Return the id to your client to call the payer approval flow if the payment_source needs payer approval.

Note: The request to save the PayPal button is made when the order is created through payment_source.attributes.vault.store_in_vault. Vault details are available only after an order is authorized or captured.

1{
2    "id": "8UJ74029WW491462L",
3    "intent": "CAPTURE",
4    "status": "PAYER_ACTION_REQUIRED",
5    "payment_source": {
6        "paypal": {}
7    },
8    "purchase_units": [
9        {
10            "reference_id": "default",
11            "amount": {
12                "currency_code": "USD",
13                "value": "10.00",
14                "breakdown": {
15                    "item_total": {
16                        "currency_code": "USD",
17                        "value": "10.00"
18                    }
19                }
20            },
21            "payee": {
22                "email_address": "payee@example.com"
23            },
24            "description": "Camera Shop",
25            "soft_descriptor": "XYZ ENTERPR",
26            "items": [
27                {
28                    "name": "Camera",
29                    "unit_amount": {
30                        "currency_code": "USD",
31                        "value": "10.00"
32                    },
33                    "quantity": "1"
34                }
35            ],
36            "shipping": {
37                "address": {
38                    "address_line_1": "123 Main St.",
39                    "address_line_2": "Unit B",
40                    "admin_area_2": "Anytown,
41                    "admin_area_1": "CA",
42                    "postal_code": "12345",
43                    "country_code": "US"
44                }
45            }
46        }
47    ],
48    "links": [
49        {
50            "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/8UJ74029WW491462L",
51            "rel": "self",
52            "method": "GET"
53        },
54        {
55            "href": "https://www.sandbox.paypal.com/checkoutnow?token=8UJ74029WW491462L",
56            "rel": "payer-action",
57            "method": "GET"
58        }
59    ]
60}

Merchant

To save payments at the merchant level:

The Orders API call must contain the PayPal-Auth-Assertion field.
Set the usage_type to MERCHANT under the vault attribute.

For returning payers, also pass the shipping_preference.

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
2 -H "Content-Type: application/json" \
3 -H "Prefer: return=representation" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -H "PayPal-Request-ID: REQUEST-ID" \
6 -H "PayPal-Auth-Assertion: AUTH-ASSERTION-TOKEN" \
7 -H "Authorization: Bearer ACCESS-TOKEN" \
8 -d '{
9    "intent": "CAPTURE",
10    "payment_source": {
11        "paypal": {
12            "attributes": {
13                "vault": {
14                    "store_in_vault": "ON_SUCCESS",
15                    "usage_type": "MERCHANT"
16                }
17            }
18        }
19    },
20    "purchase_units": [
21        {
22            "description": "Camera Shop",
23            "amount": {
24                "currency_code": "USD",
25                "value": "10.00",
26                "breakdown": {
27                    "item_total": {
28                        "currency_code": "USD",
29                        "value": "10.00"
30                    }
31                }
32            },
33            "items": [
34              {
35                "name": "Camera",
36                "unit_amount": {
37                  "currency_code": "USD",
38                  "value": "10.00"
39                },
40                "quantity": "1"
41              }
42            ],
43            "shipping": {
44                "address": {
45                    "address_line_1": "123 Main St.",
46                    "address_line_2": "Unit B",
47                    "admin_area_1": "CA",
48                    "admin_area_2": "San Jose",
49                    "postal_code": "95131",
50                    "country_code": "US"
51                }
52            }
53        }
54    ]
55}'

Sample Response

1{
2    "id": "50W46108PJ859502B",
3    "intent": "CAPTURE",
4    "status": "PAYER_ACTION_REQUIRED",
5    "payment_source": {
6        "paypal": {}
7    },
8    "purchase_units": [
9        {
10            "reference_id": "default",
11            "amount": {
12                "currency_code": "USD",
13                "value": "10.00",
14                "breakdown": {
15                    "item_total": {
16                        "currency_code": "USD",
17                        "value": "10.00"
18                    }
19                }
20            },
21            "payee": {
22                "email_address": "payee@example.com"
23            },
24            "description": "Camera Shop",
25            "soft_descriptor": "XYZ ENTERPR",
26            "items": [
27                {
28                    "name": "Camera",
29                    "unit_amount": {
30                        "currency_code": "USD",
31                        "value": "10.00"
32                    },
33                    "quantity": "1"
34                }
35            ],
36            "shipping": {
37                "address": {
38                    "address_line_1": "123 Main St.",
39                    "address_line_2": "Unit B",
40                    "admin_area_2": "Anytown",
41                    "admin_area_1": "CA",
42                    "postal_code": "12345",
43                    "country_code": "US"
44                }
45            }
46        }
47    ],
48    "links": [
49        {
50            "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/50W46108PJ859502B",
51            "rel": "self",
52            "method": "GET"
53        },
54        {
55            "href": "https://www.sandbox.paypal.com/checkoutnow?token=50W46108PJ859502B",
56            "rel": "payer-action",
57            "method": "GET"
58        }
59    ]
60}

Payer approval

If payer approval is required, the client SDK calls the payer approval flow. The approval flow takes the payer through PayPal Checkout.

Authorize or capture order

After the payer approves, the onApprove function is called in the JavaScript SDK. Depending on the intent passed, the server calls the following APIs:

Capture Order API if the intent passed was CAPTURE

Authorize Order API if the intent passed was AUTHORIZE as part of your Create Order call.

If authorization or capture is successful, a vault.id is also created.

Authorize order request

Platform

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/8UJ74029WW491462L/authorize \
2 -H "Content-Type: application/json" \
3 -H "Authorization: Bearer ACCESS-TOKEN" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -d '{}'

Merchant

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders//50W46108PJ859502B/authorize \
2 -H "Content-Type: application/json" \
3 -H "Authorization: Bearer ACCESS-TOKEN" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -H "PayPal-Auth-Assertion: AUTH-ASSERTION-TOKEN" \
6 -d '{}'

Capture order request

Platform

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/8UJ74029WW491462L/capture \
2 -H "Content-Type: application/json" \
3 -H "Authorization: Bearer ACCESS-TOKEN" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -d '{}'

Merchant

1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/50W46108PJ859502B/capture \
2 -H "Content-Type: application/json" \
3 -H "Authorization: Bearer ACCESS-TOKEN" \
4 -H "PayPal-Partner-Attribution-ID: BN-CODE" \
5 -H "PayPal-Auth-Assertion: AUTH-ASSERTION-TOKEN" \
6 -d '{}'

Capture order response

The HTTP response codes HTTP 2xx or HTTP 200 are returned for a successful request. The capture is successful if the purchase_units[0].payments.captures.status is COMPLETED. You can confirm with the payer that the payment has been captured.

In the response from the authorize or capture request, the Orders v2 API interacts with the Payment Method Tokens v3 API. The Payment Method Tokens v3 API allows a PayPal Wallet to be saved. The response from the Orders v2 API contains the:

vault.id
customer.id
vault.status
links for the payment token of a recently saved PayPal Wallet.

Returning user experience

When the payer returns to the checkout page, the JavaScript SDK is pre-populated with the PayPal-generated customer ID. The JavaScript SDK renders the PayPal button, which displays the payer's preferred payment method.

Capture Order

1{
2    "id": "50W46108PJ859502B",
3    "status": "COMPLETED",
4    "payment_source": {
5        "paypal": {
6            "email_address": "buyer@example.com",
7            "account_id": "7LH1E2ACVS7VN",
8            "name": {
9                "given_name": "Firstname",
10                "surname": "Lastname"
11            },
12            "address": {
13                "country_code": "US"
14            },
15            "attributes": {
16                "vault": {
17                    "id": "3sxjmg00",
18                    "status": "VAULTED",
19                    "customer": {
20                        "id": "674817847"
21                    },
22                    "links": [
23                        {
24                            "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/3sxjmg00",
25                            "rel": "self",
26                            "method": "GET"
27                        },
28                        {
29                            "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/3sxjmg00",
30                            "rel": "delete",
31                            "method": "DELETE"
32                        },
33                        {
34                            "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/50W46108PJ859502B",
35                            "rel": "up",
36                            "method": "GET"
37                        }
38                    ]
39                }
40            }
41        }
42    },
43    "purchase_units": [
44        {
45            "reference_id": "default",
46            "shipping": {
47                "name": {
48                    "full_name": "Firstname Lastname"
49                },
50                "address": {
51                    "address_line_1": "500 Main Street",
52                    "address_line_2": "#1000",
53                    "admin_area_2": "San Jose",
54                    "admin_area_1": "CA",
55                    "postal_code": "95131",
56                    "country_code": "US"
57                }
58            },
59            "payments": {
60                "captures": [
61                    {
62                        "id": "1W078284S2377034L",
63                        "status": "COMPLETED",
64                        "amount": {
65                            "currency_code": "USD",
66                            "value": "10.00"
67                        },
68                        "final_capture": true,
69                        "disbursement_mode": "INSTANT",
70                        "seller_protection": {
71                            "status": "ELIGIBLE",
72                            "dispute_categories": [
73                                "ITEM_NOT_RECEIVED",
74                                "UNAUTHORIZED_TRANSACTION"
75                            ]
76                        },
77                        "seller_receivable_breakdown": {
78                            "gross_amount": {
79                                "currency_code": "USD",
80                                "value": "10.00"
81                            },
82                            "paypal_fee": {
83                                "currency_code": "USD",
84                                "value": "0.84"
85                            },
86                            "net_amount": {
87                                "currency_code": "USD",
88                                "value": "9.16"
89                            }
90                        },
91                        "links": [
92                            {
93                                "href": "https://api-m.sandbox.paypal.com/v2/payments/captures/1W078284S2377034L",
94                                "rel": "self",
95                                "method": "GET"
96                            },
97                            {
98                                "href": "https://api-m.sandbox.paypal.com/v2/payments/captures/1W078284S2377034L/refund",
99                                "rel": "refund",
100                                "method": "POST"
101                            },
102                            {
103                                "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/50W46108PJ859502B",
104                                "rel": "up",
105                                "method": "GET"
106                            }
107                        ],
108                        "create_time": "2022-11-04T21:39:37Z",
109                        "update_time": "2022-11-04T21:39:37Z"
110                    }
111                ]
112            }
113        }
114    ],
115    "payer": {
116        "name": {
117            "given_name": "Firstname",
118            "surname": "Lastname"
119        },
120        "email_address": "buyer@example.com",
121        "payer_id": "7LH1E2ACVS7VN",
122        "address": {
123            "country_code": "US"
124        }
125    },
126    "links": [
127        {
128            "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/50W46108PJ859502B",
129            "rel": "self",
130            "method": "GET"
131        }
132    ]
133}

Save approved payment source

If the payment has been authorized or captured, the payer does not need to be present to save a payment_source. To keep checkout times as short as possible, the Orders API responds as soon as payment is captured.

If the attributes.vault.status returned after payment is APPROVED, you won't have a vault.id yet. An example of the attributes object from this scenario is in the following sample:

1"attributes": {
2        "vault": {
3          "status": "APPROVED",
4          "links": [
5            {
6              "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T",
7              "rel": "up",
8              "method": "GET"
9            }
10          ]
11        }
12      }

The Payment Method Tokens API still saves the payment source even after the Orders API returns its response and sends a webhook after the payment source is saved.

In order to retrieve a vault_id when an APPROVED status is returned, you'll need to subscribe to the VAULT.PAYMENT-TOKEN.CREATED webhook.

The Payment Method Tokens API sends a webhook after the payment source is saved. An example of the VAULT.PAYMENT-TOKEN.CREATED webhook payload is shown in the following sample:

1{
2  "id": "WH-72S4353495632143A-68K769747M133873M",
3  "event_version": "1.0",
4  "create_time": "2022-08-27T01:25:57.462Z",
5  "resource_type": "payment_token",
6  "resource_version": "3.0",
7  "event_type": "VAULT.PAYMENT-TOKEN.CREATED",
8  "summary": "A payment token has been created.",
9  "resource": {
10    "time_created": "2022-08-26T18:25:57.449PDT",
11    "links": [
12      {
13        "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/7vrxmrw",
14        "rel": "self",
15        "method": "GET",
16        "encType": "application/json"
17      },
18      {
19        "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/7vrxmrw",
20        "rel": "delete",
21        "method": "DELETE",
22        "encType": "application/json"
23      }
24    ],
25    "id": "3nqvjt3n",
26    "payment_source": {
27      "paypal": {
28        "permit_multiple_payment_tokens": false,
29        "usage_type": "MERCHANT",
30        "customer_type": "CONSUMER",
31        "email_address": "buyer@example.com",
32        "payer_id": "VTR4JYK7STE7J"
33      }
34    },
35    "customer": {
36      "id": "208743798"
37    }
38  },
39  "links": [
40    {
41      "href": "https://api-m.sandbox.paypal.com/v1/notifications/webhooks-events/WH-72S4353495632143A-68K769747M133873M",
42      "rel": "self",
43      "method": "GET"
44    },
45    {
46      "href": "https://api-m.sandbox.paypal.com/v1/notifications/webhooks-events/WH-72S4353495632143A-68K769747M133873M/resend",
47      "rel": "resend",
48      "method": "POST"
49    }
50  ]
51}

In the previous example, the resource.id field is the vault ID. The resource.customer.id is the PayPal-generated customer ID.

Test your integration

Run the following tests in the PayPal sandbox to ensure you can save PayPal Wallets.

Save payment method
On your checkout page, click the PayPal button.
Log in to the payer account and approve the payment and billing agreement.
Capture the transaction.Store the PayPal-generated customer ID in your system.
Log in to sandbox with your merchant account and verify the transaction.
Refresh the page that contains the PayPal button. Ensure the JavaScript SDK is initialized with the PayPal-generated customer ID.
Ensure the PayPal button displays the payer's preferred payment method.
Ensure that the payment method you just saved is visible with the other buttons.
Select the PayPal button again to test the return payer flow.

Next steps

Test and go live with this integration.
Change the credentials and API URLs from api-m.sandbox.paypal.com to api-m.paypal.com when going live with your integration.
You can create orders without the payment_source.paypal.attributes.vault for subsequent or recurring transactions.
You can get a payment token, list all payment tokens, delete a payment token, and more with the Payment Method Tokens API.

Save PayPal with the JavaScript SDK

Availability

Know before you code

How it works

Return payer experience

Use cases

Get vetted to save PayPal Wallets

Generate user ID token for payer

Platform

First-time payer

Modify the code

Returning Payer

Sample server-side user ID token request with a PayPal-generated customer ID

Modify the code

Merchant

First-time payer

Modify the code

Returning Payer

Modify the code

Pass user ID token to JavaScript SDK

Add PayPal button

Create order

Server-side code snippet

Request

Platform Response

Platform

Platform

Sample response

Merchant

Sample Response

Payer approval

Authorize or capture order

Authorize order request

Platform

Merchant

Capture order request

Platform

Merchant

Capture order response

Returning user experience

Capture Order

Save approved payment source

Test your integration

Next steps

See also

Sample response