PayPal Checkout

Standard Card Fields

Standard Card Fields intelligently present the most relevant credit card payment types to your buyers, automatically. This makes it easier for them to complete their purchase using methods like Visa, Mastercard, Discover, Maestro, and so on.

With Standard Card Fields, the card fields for the checkout flow display in-line beneath the Smart Payment Buttons when your buyer selects a credit card. Your buyers can conveniently and seamlessly pay with their credit card anywhere vertical Smart Payment Buttons display.

Standard Card Fields example

Before you begin

  • Standard Cards Fields display in a vertical Smart Payment Buttons integration.
  • JavaScript parameters in your integration override merchant account settings.
  • Availability for Standard Card Fields varies according to country and buyer eligibility.

What is the checkout experience if Standard Card Fields isn't available?

Your buyers are presented with the PayPal guest checkout experience in the pop-up window, rather than in-line beneath the vertical Smart Payment Buttons.

Optimize the card fields

Card processing with Standard Card Fields is automatically presented with Smart Payment Buttons; however, here are some recommendations to optimize your buyer's checkout experience.

  • Smart Payment Buttons with Standard Card Fields should not be placed in a fixed-height container on a website. Leave space beneath the credit card buttons to display the card fields.

  • Pass the billing address, shipping address, phone number, and email to PayPal:

    <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
    <script>paypal.Buttons({
      enableStandardCardFields: true,
      createOrder: function(data, actions) {
        return actions.order.create({
          intent: 'CAPTURE',
          payer: {
            name: {
              given_name: "PayPal",
              surname: "Customer"
            },
            address: {
              address_line_1: '123 ABC Street',
              address_line_2: 'Apt 2',
              admin_area_2: 'San Jose',
              admin_area_1: 'CA',
              postal_code: '95121',
              country_code: 'US'
            },
            email_address: "customer@domain.com",
            phone: {
              phone_type: "MOBILE",
              phone_number: {
                national_number: "14082508100"
              }
            }
          },
          purchase_units: [
            {
              amount: {
                value: '15.00',
                currency_code: 'USD'
              },
              shipping: {
                address: {
                  address_line_1: '2211 N First Street',
                  address_line_2: 'Building 17',
                  admin_area_2: 'San Jose',
                  admin_area_1: 'CA',
                  postal_code: '95131',
                  country_code: 'US'
                }
              },
            }
          ]
        });
      }
    }).render("body");
    </script>
    

See also

See Customize the SDK for a list of available parameters and values for the PayPal JavaScript SDK.