Default Credit Card Country using Client Side Express Checkout

[GrahamC99]

I'm implementing C/S Express Checkout in a similar way to the Demo (https://developer.paypal.com/demo/checkout/#/pattern/experience). If the purchaser selects 'Pay with Debit or Credit Card', is there a way to set the default Country displayed? How is this Country determined?

Thanks.

[MTS_Andre]

Hi, To make your cehckout land on the card checkout page you need to pass an experience profile object with:

    flow_config: { landing_page_type: 'billing' }

Also make sure to pass these input_fields if you want to "force" an address and record it into the transaction:

    input_fields: { no_shipping: 2, address_override: 1 }

To pass then the auto-filling details like name, address etc.. pass the item_list object inside the transaction object:


    item_list: {shipping_address: { recipient_name: 'Andre', line1: '4th Floor', line2: 'Unit #34', city: 'Milano', country_code: 'IT', postal_code: '95131', phone: '011862212345678', state: 'MI' }

And finally, to automatically pass the country to show for the card payment page just pass the 5 character (not the 2 character) locale code under the environment declaration:

    env: 'sandbox or production',
    locale: 'it_IT'

You can find the locale codes (pick the 5 characters one) here: https://developer.paypal.com/docs/classic/api/locale_codes/

Here would be an example of all that together:

    paypal.Button.render({
        env: 'sandbox', // sandbox | production
        locale: 'it_IT',

        client: {
            sandbox:    'AZDxjDS*******************************************************XlkA59kJXE7M6R',
            production: '<insert production client id>'
        },

        payment: function(data, actions) {

            return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: {
                                total: '0.01',
                                currency: 'USD'
                                
                            },
                            item_list: {
                                shipping_address: {
                                    recipient_name: 'Andre',
                                    line1: '4th Floor',
                                    line2: 'Unit #34',
                                    city: 'Milano',
                                    country_code: 'IT',
                                    postal_code: '20134',
                                    phone: '0039024545455',
                                    state: 'MI'
                                }
                            }
                        }
                    ]
                },

                experience: {
                    input_fields: {
                        no_shipping: 2,
                        address_override: 1
                    },
                    flow_config: {
                        landing_page_type: 'billing'
                    }
                }
            });
        },

        onAuthorize: function(data, actions) {

            return actions.payment.execute().then(function() {
                window.alert('Payment Complete!');
            });
        }

    }, '#paypal-button-container');

[GrahamC99]

Andre, you are a star, sir.

That 'locale' value is indeed the secret I was looking for. The experience / flow_config aspects look interesting too. I shall work through your example to see if there are any other gems I can make use of. Is there any documentation on the 'environment' object that shows that 'locale' usage, or indeed any other useful parameters?

And while I'm speaking to you, does the sandbox support negative testing using Client Side Express Checkout?

All the best,

Graham

[MTS_Andre]

Happy it worked out. Here the documentation links I used for this example:

- Experience profile, you can see the variables in the example on the left side of the page: Web Experience Profile

- Payment details, like the transaction object: Payment

- the "locale" usage is not in the guide but when you render the button at the beginning it works for assigning a specific country

For the negative testing you can use it on the server side as from client-side you go via the JS.

- References for Negative Testing here