Save cards with the JavaScript SDK

CURRENT

Last updated: Feb 10th, 6:39pm

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

Use the JavaScript SDK to save a payer's card if you aren't PCI Compliant - SAQ A but want to save credit or debit cards during checkout.

Availability

See 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 have an existing advanced credit and debit card payments integration. PayPal must approve your account to process advanced credit and debit card payments.
  • Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:
    • The sandbox client ID and secret ofyour REST app.
    • An access token to use the PayPal REST API server.
  • This client-side and server-side integration uses the following:

How it works?

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

  1. The payer saves their payment method.
  2. For a first-time payer, PayPal creates a customer ID. Store this within your system for future use.
  3. 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.
  4. The payer completes a billing agreement.
  5. 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.

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

1. Set up sandbox to save payment methods

Set up your sandbox and live business accounts to save payment methods:

  1. Log in to the Developer Dashboard.
  2. Under REST API apps, select your app name.
  3. Under Sandbox App Settings > App Feature Options, check Accept payments.
  4. Expand Advanced options. Confirm that Vault is selected.

2. Add checkbox for payers to save card

Add a checkbox element grouped with your card collection fields to give payers the option to save their card.

    1<div>
    2 <input type="checkbox" id="save" name="save">
    3 <label for="save">Save your card</label>
    4</div>

    3. Pass Checkbox Value

    Pass document.getElementById("save").checked to your server with the following details in the createOrder() method:

    • Value of the checkbox
    • Optional: Card name
    • Optional: Billing address

    No Verification

      1const cardFields = paypal.CardFields({
      2 createOrder: (data) => {
      3 // Create the order on your server and return the order ID
      4 const saveCheckbox = document.getElementById("save");
      5 return fetch("/api/paypal/order/create/", {
      6 method: "POST",
      7 body: JSON.stringify({
      8 // Include the saveCheckbox.checked value
      9 // Optionally, include the card name and billing address
      10 }),
      11 }).then((res) => {
      12 return res.json();
      13 }).then((orderData) => {
      14 // Return the order ID that was created on your server
      15 return orderData.id;
      16 });
      17 },
      18 onApprove: function (data) {
      19 // Authorize or capture the order on your server
      20 const { orderID } = data;
      21 return fetch('/api/paypal/orders/${orderID}/capture/', {
      22 method: "POST"
      23 }).then((res) => {
      24 return res.json();
      25 }).then((orderData) => {
      26 // Retrieve vault details from the response
      27 const vault = orderData?.paymentSource?.card?.attributes?.vault;
      28 if (vault) {
      29 // Save the vault.id and vault.customer.id for future use
      30 }
      31 // Handle successful transaction
      32 });
      33 },
      34 onError: function (error) {
      35 // Handle any error that may occur
      36 }
      37});
      38if (cardFields.isEligible()) {
      39 cardFields.NameField().render("#card-name-field-container");
      40 cardFields.NumberField().render("#card-number-field-container");
      41 cardFields.ExpiryField().render("#card-expiry-field-container");
      42 cardFields.CVVField().render("#card-cvv-field-container");
      43} else {
      44 // Handle the workflow when credit and debit cards are not available
      45}
      46const submitButton = document.getElementById("submit-button");
      47submitButton.addEventListener("click", () => {
      48 cardFields.submit().then(() => {
      49 // Handle successful transaction
      50 }).catch((error) => {
      51 // Handle any error that may occur
      52 });
      53});

      3D Secure

      To trigger the authentication, pass the required contingency with the verification method in the create orders payload. The verification method can be contingencies parameter with SCA_ALWAYS or SCA_WHEN_REQUIRED.

      SCA_ALWAYS triggers an authentication for every transaction, while SCA_WHEN_REQUIRED triggers an authentication only when a regional compliance mandate such as PSD2 is required. 3D Secure is supported only in countries with a PSD2 compliance mandate.
        1const cardFields = paypal.CardFields({
        2 createOrder: (data) => {
        3 // Create the order on your server and return the order ID
        4 const saveCheckbox = document.getElementById("save");
        5 return fetch("/api/paypal/order/create/", {
        6 method: "POST",
        7 body: JSON.stringify({
        8 // Include the saveCheckbox.checked value
        9 // Optionally, include the card name and billing address
        10 // Pass in the 3DS contingency as a verification attribute along with the payment source
        11 ...
        12 card: {
        13 attributes: {
        14 verification: {
        15 method: "SCA_ALWAYS",//SCA_WHEN_REQUIRED is also another option for the verification method
        16 },
        17 },
        18 experience_context: {
        19 shipping_preference: "NO_SHIPPING",
        20 return_url: "https://example.com/returnUrl",
        21 cancel_url: "https://example.com/cancelUrl",
        22 },
        23 },
        24 }),
        25 }).then((res) => {
        26 return res.json();
        27 }).then((orderData) => {
        28 // Return the order ID that was created on your server
        29 return orderData.id;
        30 });
        31 },
        32 onApprove: function (data) {
        33 // Authorize or capture the order on your server
        34 const { liabilityshift, orderID } = data;
        35 if(liabilityShift) {
        36 /* Handle liability shift. More information in the response parameters */
        37 }
        38 return fetch('/api/paypal/orders/${orderID}/capture/', {
        39 method: "POST"
        40 }).then((res) => {
        41 return res.json();
        42 }).then((orderData) => {
        43 // Retrieve vault details from the response
        44 const vault = orderData?.paymentSource?.card?.attributes?.vault;
        45 if (vault) {
        46 // Save the vault.id and vault.customer.id for future use
        47 }
        48 // Handle successful transaction
        49 });
        50 },
        51 onError: function (error) {
        52 // Handle any error that may occur
        53 }
        54});
        55if (cardFields.isEligible()) {
        56 cardFields.NameField().render("#card-name-field-container");
        57 cardFields.NumberField().render("#card-number-field-container");
        58 cardFields.ExpiryField().render("#card-expiry-field-container");
        59 cardFields.CVVField().render("#card-cvv-field-container");
        60} else {
        61 // Handle the workflow when credit and debit cards are not available
        62}
        63const submitButton = document.getElementById("submit-button");
        64submitButton.addEventListener("click", () => {
        65 cardFields.submit().then(() => {
        66 // Handle successful transaction
        67 }).catch((error) => {
        68 // Handle any error that may occur
        69 });
        70});

        Create Order and Save Card

        Server side

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

        This SDK uses the Orders v2 API to save payment methods in the background. Use the following request using the Orders API to add attributes needed to save a card.

        First Time Player

        Save payment method for first-time payers

        This request is for payers who:

        • Don't have a payment source saved into the vault.
        • Selected the save checkbox. The document.getElementById("save").checked value is true.

        To run 3D Secure on the card, set the payment_source.card.attributes.verification.method to SCA_ALWAYS or SCA_WHEN_REQUIRED.

        SCA_ALWAYS triggers an authentication for every transaction, while SCA_WHEN_REQUIRED triggers an authentication only when a regional compliance mandate such as PSD2 is required. 3D Secure is supported only in countries with a PSD2 compliance mandate. .
          1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
          2 -H "Content-Type: application/json" \
          3 -H "Authorization: Bearer 'ACCESS-TOKEN'" \
          4 -d '{
          5 "intent": "CAPTURE",
          6 "purchase_units": [{
          7 "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
          8 "amount": {
          9 "currency_code": "USD",
          10 "value": "100.00"
          11 }
          12 }],
          13 "payment_source": {
          14 "card": {
          15 "name": "Firstname Lastname",
          16 "billing_address": {
          17 "address_line_1": "123 Main St.",
          18 "address_line_2": "Unit B",
          19 "admin_area_2": "Anytown",
          20 "admin_area_1": "CA",
          21 "postal_code": "12345",
          22 "country_code": "US"
          23 },
          24 "attributes": {
          25 "vault": {
          26 "store_in_vault": "ON_SUCCESS"
          27 },
          28 "verification": {
          29 "method": "SCA_ALWAYS"
          30 }
          31 }
          32 }
          33 }
          34 }

          Returning Player

          Save payment method for returning payers

          This request is for payers who:

          • Already have a payment method saved in the vault.
          • Want to save another payment method to the vault.
          • Selected the save checkbox. The document.getElementById("save").checked value is true.

          Pass the PayPal-generated customer.id as part of this request. Link additional payment_sources to this customer through their customer.id. The customer.id is returned in the response from an authorize or capture request.

            1curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
            2 -H "Content-Type: application/json" \
            3 -H "Authorization: Bearer 'ACCESS-TOKEN'" \
            4 -d '{
            5 "intent": "CAPTURE",
            6 "purchase_units": [{
            7 "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
            8 "amount": {
            9 "currency_code": "USD",
            10 "value": "100.00"
            11 }
            12 }],
            13 "payment_source": {
            14 "card": {
            15 "name": "Firstname Lastname",
            16 "billing_address": {
            17 "address_line_1": "123 Main St.",
            18 "address_line_2": "Unit B",
            19 "admin_area_2": "Anytown",
            20 "admin_area_1": "CA",
            21 "postal_code": "12345",
            22 "country_code": "US"
            23 },
            24 "attributes": {
            25 "customer" : {
            26 "id": "'PayPal-generated customer id'"
            27 },
            28 "vault": {
            29 "store_in_vault": "ON_SUCCESS"
            30 },
            31 }
            32 }
            33 }
            34 }

            Response

            Pass the order id to the JavaScript SDK. The SDK updates the order with the new card details. PayPal handles any PCI compliance issues.

            After the SDK is updated, it triggers the onApprove() method, which receives an object containing the orderID. You can authorize or capture the order when you have the orderID.

              1{
              2 "id": "5O190127TN364715T",
              3 "status": "CREATED",
              4 "intent": "CAPTURE",
              5 "payment_source": {
              6 "card": {
              7 "brand": "VISA",
              8 "last-digits": "1881",
              9 "billing_address": {
              10 "address_line_1": "123 Main St.",
              11 "address_line_2": "Unit B",
              12 "admin_area_2": "Anytown",
              13 "admin_area_1": "CA",
              14 "postal_code": "12345",
              15 "country_code": "US"
              16 }
              17 }
              18 },
              19 "purchase_units": [{
              20 "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
              21 "amount": {
              22 "currency_code": "USD",
              23 "value": "100.00"
              24 }
              25 }],
              26 "create_time": "2021-10-28T21:18:49Z",
              27 "links": [{
              28 "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T",
              29 "rel": "self",
              30 "method": "GET"
              31 },
              32 {
              33 "href": "https://www.sandbox.paypal.com/checkoutnow?token=5O190127TN364715T",
              34 "rel": "approve",
              35 "method": "GET"
              36 },
              37 {
              38 "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T",
              39 "rel": "update",
              40 "method": "PATCH"
              41 },
              42 {
              43 "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T/capture",
              44 "rel": "capture",
              45 "method": "POST"
              46 }
              47 ]
              48 }

              5. Authorize or capture order and save card

              Server side

              Set up your server to call the v2 Orders API:

              Request

              Authorize or capture order request

              Authorize

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

                Capture

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

                  Response

                    1{
                    2 "id": "5O190127TN364715T",
                    3 "status": "COMPLETED",
                    4 "payment_source": {
                    5 "card": {
                    6 "brand": "VISA",
                    7 "last_digits": "4949"
                    8 "attributes": {
                    9 "vault": {
                    10 "id": "nkq2y9g",
                    11 "customer": {
                    12 "id": "695922590"
                    13 },
                    14 "status": "VAULTED",
                    15 "links": [{
                    16 "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/nkq2y9g",
                    17 "rel": "self",
                    18 "method": "GET"
                    19 },
                    20 {
                    21 "href": "https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/nkq2y9g",
                    22 "rel": "delete",
                    23 "method": "DELETE"
                    24 },
                    25 {
                    26 "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T",
                    27 "rel": "up",
                    28 "method": "GET"
                    29 }
                    30 ]
                    31 }
                    32 }
                    33 }
                    34 },
                    35 "purchase_units": [{
                    36 "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
                    37 "payments": {
                    38 "captures": [{
                    39 "id": "3C679366HH908993F",
                    40 "status": "COMPLETED",
                    41 "amount": {
                    42 "currency_code": "USD",
                    43 "value": "100.00"
                    44 },
                    45 "seller_protection": {
                    46 "status": "NOT_ELIGIBLE"
                    47 },
                    48 "final_capture": true,
                    49 "seller_receivable_breakdown": {
                    50 "gross_amount": {
                    51 "currency_code": "USD",
                    52 "value": "100.00"
                    53 },
                    54 "paypal_fee": {
                    55 "currency_code": "USD",
                    56 "value": "3.00"
                    57 },
                    58 "net_amount": {
                    59 "currency_code": "USD",
                    60 "value": "97.00"
                    61 }
                    62 },
                    63 "create_time": "2022-01-01T21:20:49Z",
                    64 "update_time": "2022-01-01T21:20:49Z",
                    65 "processor_response": {
                    66 "avs_code": "Y",
                    67 "cvv_code": "M",
                    68 "response_code": "0000"
                    69 },
                    70 "links": [{
                    71 "href": "https://api-m.sandbox.paypal.com/v2/payments/captures/3C679366HH908993F",
                    72 "rel": "self",
                    73 "method": "GET"
                    74 },
                    75 {
                    76 "href": "https://api-m.sandbox.paypal.com/v2/payments/captures/3C679366HH908993F/refund",
                    77 "rel": "refund",
                    78 "method": "POST"
                    79 }
                    80 ]
                    81 }]
                    82 }
                    83 }],
                    84 "links": [{
                    85 "href": "https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T",
                    86 "rel": "self",
                    87 "method": "GET"
                    88 }]
                    89}

                    In the response from the Authorize or Capture request, the Orders v2 API interacts with the Payment Method Tokens v3 API to save the card.

                    The payment_source.card.attributes.vault stores the card information as the vault.id, which can be used for future payments when the vault.status is VAULTED.

                    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-1KN88282901968003-82E75604WM969463F",
                        3 "event_version":"1.0",
                        4 "create_time":"2022-08-15T14:13:48.978Z",
                        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-15T07:13:48.964PDT",
                        11 "links":[
                        12 {
                        13 "href":"https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/9n6724m",
                        14 "rel":"self",
                        15 "method":"GET",
                        16 "encType":"application/json"
                        17 },
                        18 {
                        19 "href":"https://api-m.sandbox.paypal.com/v3/vault/payment-tokens/9n6724m",
                        20 "rel":"delete",
                        21 "method":"DELETE",
                        22 "encType":"application/json"
                        23 }
                        24 ],
                        25 "id":"nkq2y9g",
                        26 "payment_source":{
                        27 "card":{
                        28 "last_digits":"1111",
                        29 "brand":"VISA",
                        30 "expiry":"2027-02",
                        31 "billing_address":{
                        32 "address_line_1":"123 Main St.",
                        33 "address_line_2":"Unit B",
                        34 "admin_area_2":"Anytown",
                        35 "admin_area_1":"CA",
                        36 "postal_code":"12345",
                        37 "country_code":"US"
                        38 }
                        39 }
                        40 },
                        41 "customer":{
                        42 "id":"695922590"
                        43 }
                        44 },
                        45 "links":[
                        46 {
                        47 "href":"https://api-m.sandbox.paypal.com/v1/notifications/webhooks-events/WH-1KN88282901968003-82E75604WM969463F",
                        48 "rel":"self",
                        49 "method":"GET"
                        50 },
                        51 {
                        52 "href":"https://api-m.sandbox.paypal.com/v1/notifications/webhooks-events/WH-1KN88282901968003-82E75604WM969463F/resend",
                        53 "rel":"resend",
                        54 "method":"POST"
                        55 }
                        56 ]
                        57 }

                        In this example, the resource.id field is the vault ID, and resource.customer.id is the PayPal-generated customer ID.

                        You can now style your card fields and test a purchase.

                        Payment processor codes

                        Payment processors return the following codes when they receive a transaction request. For advanced card payments, the code displays in the authorization object under the response_code field.

                        The following sample shows the processor response codes returned in an authorization (avs_code) and capture call (cvv_code) response:

                          1"processor_response": {
                          2 "avs_code": "Y",
                          3 "cvv_code": "S",
                          4 "response_code": "0000"
                          5 }

                          See the Orders API response_code object to get the processor response code for the non-PayPal payment processor errors.

                          6. Pay with saved payment methods

                          When a payer returns to your site, you can show the payer's saved payment methods with the Payment Method Tokens API.

                          List all saved payment methods

                          Make the server-side list all payment tokens API call to retrieve payment methods saved to a payer's PayPal-generated customer ID. Based on this list, you can show all saved payment methods to a payer to select during checkout.

                          Show saved card to payer

                          Display the saved card to the payer and use the Orders API to make another transaction. Use the vault ID the payer selects as an input to the Orders API.

                          Use supported CSS properties to style the card fields.

                          7. Test your integration

                          Test your vault integration in the PayPal sandbox.

                          1. Copy the sample request code.
                          2. Change 'ACCESS_TOKEN' to your access token.

                          Save payment method

                          1. On the checkout page, enter the card information and select the option to save the card. See the Test Cards section for test cards you can use to test payments in the sandbox.
                          2. Capture the transaction.
                          3. Log in to sandbox with your merchant account and verify the transaction.

                          Pay with a saved payment method

                          1. Use the list all payment tokens API to retrieve all the payment methods saved for the payer.
                          2. Capture the payment by passing the payer-selected vault ID to the Orders API.
                          3. Log in to the sandbox with your merchant account and verify the transaction.

                          8. Integrate front end

                          The following sample shows how a full script to save cards might appear in HTML:

                            1<!DOCTYPE html>
                            2 <head>
                            3 <!-- Add meta tags for mobile and IE -->
                            4 <meta charset="utf-8" />
                            5 </head>
                            6 <body>
                            7 <script src="https://www.paypal.com/sdk/js?components=card-fields&client-id=YOUR-CLIENT-ID&currency=USD&intent=capture&merchant-id=YOUR-MERCHANT-ID"></script>
                            8 <div align="center"> or </div>
                            9 <!-- Advanced credit and debit card payments form -->
                            10 <div class='card_container'>
                            11 <div id='card-number'></div>
                            12 <div id='expiration-date'></div>
                            13 <div id='cvv'></div>
                            14 <div id='card-holder-name'></div>
                            15 <label>
                            16 <input type='checkbox' id='vault' name='vault' /> Vault
                            17 </label>
                            18 <br><br>
                            19 <button value='submit' id='submit' class='btn'>Pay</button>
                            20 </div>
                            21 <!-- Implementation -->
                            22 <script>
                            23 // Create the card fields component and define callbacks
                            24 const cardFields = paypal.CardFields({
                            25 createOrder: async (data) => {
                            26 const result = await fetch("https://api-m.sandbox.paypal.com/v2/checkout/orders", {
                            27 method: "POST",
                            28 body: JSON.stringify({
                            29 intent: "CAPTURE",
                            30 purchase_units: [{
                            31 amount: {
                            32 currency_code: "USD",
                            33 value: "100.00"
                            34 }
                            35 }],
                            36 payment_source: {
                            37 card: {
                            38 attributes: {
                            39 verification: {
                            40 method: "SCA_ALWAYS"
                            41 },
                            42 vault: {
                            43 store_in_vault: "ON_SUCCESS",
                            44 usage_type: "PLATFORM",
                            45 customer_type: "CONSUMER",
                            46 permit_multiple_payment_tokens: true,
                            47 },
                            48 }
                            49 },
                            50 experience_context: {
                            51 shipping_preference: "NO_SHIPPING",
                            52 return_url: "https://example.com/returnUrl",
                            53 cancel_url: "https://example.com/cancelUrl",
                            54 },
                            55 },
                            56 }),
                            57 headers: {
                            58 "Content-Type": "application/json",
                            59 "Authorization": "Bearer ACCESS_TOKEN",
                            60 "PayPal-Request-Id": "UNIQUE_ALPHANUMERIC_KEY"
                            61 },
                            62 })
                            63 const {
                            64 id
                            65 } = await result.json();
                            66 return id;
                            67 },
                            68 onApprove: async (data) => {
                            69 const {
                            70 orderID
                            71 } = data;
                            72 return fetch('https://api-m.sandbox.paypal.com/v2/checkout/orders/${orderID}/capture/', {
                            73 method: "POST",
                            74 body: JSON.stringify({
                            75 payment_source: {
                            76 attributes: {
                            77 vault: {
                            78 store_in_vault: "ON_SUCCESS",
                            79 usage_type: "PLATFORM",
                            80 customer_type: "CONSUMER",
                            81 permit_multiple_payment_tokens: true,
                            82 },
                            83 },
                            84 experience_context: {
                            85 shipping_preference: "NO_SHIPPING",
                            86 return_url: "https://example.com/returnUrl",
                            87 cancel_url: "https://example.com/cancelUrl",
                            88 },
                            89 },
                            90 }),
                            91 headers: {
                            92 "Content-Type": "application/json",
                            93 "Authorization": "Bearer ACCESS_TOKEN",
                            94 "PayPal-Request-Id": "UNIQUE_ALPHANUMERIC_KEY"
                            95 },
                            96 })
                            97 // Retrieve vault details from the response and
                            98 // save vault.id and customer.id for the buyer's return experience
                            99 return await res.json();
                            100 },
                            101 onError: (error) => console.error('Something went wrong:', error)
                            102 });
                            103 // Render each field after checking for eligibility
                            104 // Check eligibility and display advanced credit and debit card payments
                            105 if (cardFields.isEligible()) {
                            106 cardFields.NameField().render("#card-holder-name");
                            107 cardFields.NumberField().render("#card-number");
                            108 cardFields.ExpiryField().render("#expiration-date");
                            109 cardFields.CVVField().render("#cvv");
                            110 } else {
                            111 // Handle workflow when credit and debit cards are not available
                            112 }
                            113 const submitButton = document.getElementById("submit");
                            114 submitButton.addEventListener("click", () => {
                            115 cardFields
                            116 .submit()
                            117 .then(() => {
                            118 console.log("submit was successful");
                            119 })
                            120 .catch((error) => {
                            121 console.error("submit erred:", error);
                            122 });
                            123 });
                            124 </script>
                            125 </html>

                            Test Cards

                            Use the following card numbers to test transactions in the sandbox:

                            Test numberCard type
                            371449635398431American Express
                            376680816376961American Express
                            36259600000004Diners Club
                            6304000000000000Maestro
                            5063516945005047Maestro
                            2223000048400011Mastercard
                            4005519200000004Visa
                            4012000033330026Visa
                            4012000077777777Visa
                            4012888888881881Visa
                            4217651111111119Visa
                            4500600000000061Visa
                            4772129056533503Visa
                            4915805038587737Visa

                            Test Steps

                            If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more