Merge pull request #2194 from woocommerce/PCP-3022-v2-fastlane-frontend-improvements

Fastlane improvements (3022)
This commit is contained in:
Emili Castells 2024-05-07 10:39:21 +02:00 committed by GitHub
commit b84d17f0bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 301 additions and 89 deletions

View file

@ -83,6 +83,7 @@ return array(
->condition_element( 'axo_enabled', '1' )
->action_visible( 'axo_gateway_title' )
->action_visible( 'axo_privacy' )
->action_visible( 'axo_name_on_card' )
->action_visible( 'axo_style_heading' )
->action_class( 'axo_enabled', 'active' )
->to_array(),
@ -94,6 +95,7 @@ return array(
->action_visible( 'axo_style_root_bg_color' )
->action_visible( 'axo_style_root_error_color' )
->action_visible( 'axo_style_root_font_family' )
->action_visible( 'axo_style_root_text_color_base' )
->action_visible( 'axo_style_root_font_size_base' )
->action_visible( 'axo_style_root_padding' )
->action_visible( 'axo_style_root_primary_color' )
@ -133,7 +135,7 @@ return array(
'title' => __( 'Privacy', 'woocommerce-paypal-payments' ),
'type' => 'select',
'label' => __(
'Require customers to confirm express payments from the Cart and Express Checkout on the checkout page.
'This setting will control whether Fastlane branding is shown by email field.
<p class="description">PayPal powers this accelerated checkout solution from Fastlane. Since you\'ll share consumers\' email addresses with PayPal, please consult your legal advisors on the apropriate privacy setting for your business.</p>',
'woocommerce-paypal-payments'
),
@ -151,6 +153,17 @@ return array(
'gateway' => array( 'dcc', 'axo' ),
'requirements' => array( 'axo' ),
),
'axo_name_on_card' => array(
'title' => __( 'Display Name on Card', 'woocommerce-paypal-payments' ),
'type' => 'checkbox',
'default' => 'yes',
'classes' => array( 'ppcp-field-indent' ),
'class' => array(),
'label' => __( 'Enable this to display the "Name on Card" field for new Fastlane buyers.', 'woocommerce-paypal-payments' ),
'screens' => array( State::STATE_ONBOARDED ),
'gateway' => array(),
'requirements' => array( 'axo' ),
),
'axo_style_heading' => array(
'heading' => __( 'Advanced Style Settings (optional)', 'woocommerce-paypal-payments' ),
'heading_html' => sprintf(
@ -200,52 +213,9 @@ return array(
'axo_style_root_bg_color' => array(
'title' => __( 'Background Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#ffffff',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#ffffff',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_error_color' => array(
'title' => __( 'Error Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#d9360b',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_font_family' => array(
'title' => __( 'Font Family', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => 'PayPal Open',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_font_size_base' => array(
'title' => __( 'Font Size Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '16px',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_padding' => array(
'title' => __( 'Padding', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '4px',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -255,8 +225,69 @@ return array(
'axo_style_root_primary_color' => array(
'title' => __( 'Primary Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#0057F',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#0057ff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_error_color' => array(
'title' => __( 'Error Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#D9360B',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_font_family' => array(
'title' => __( 'Font Family', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => 'PayPal-Open',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_text_color_base' => array(
'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#010B0D',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_font_size_base' => array(
'title' => __( 'Font Size Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '16px',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_padding' => array(
'title' => __( 'Padding', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '4px',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -278,8 +309,9 @@ return array(
'axo_style_input_bg_color' => array(
'title' => __( 'Background Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#ffffff',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#ffffff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -289,8 +321,9 @@ return array(
'axo_style_input_border_radius' => array(
'title' => __( 'Border Radius', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '0.25em',
'classes' => array( 'ppcp-field-indent' ),
'default' => '0.25em',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -300,8 +333,9 @@ return array(
'axo_style_input_border_color' => array(
'title' => __( 'Border Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#DADDDD',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#dadddd',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -311,8 +345,9 @@ return array(
'axo_style_input_border_width' => array(
'title' => __( 'Border Width', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '1px',
'classes' => array( 'ppcp-field-indent' ),
'default' => '1px',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -322,8 +357,9 @@ return array(
'axo_style_input_text_color_base' => array(
'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#010B0D',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#010b0d',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -333,8 +369,9 @@ return array(
'axo_style_input_focus_border_color' => array(
'title' => __( 'Focus Border Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'placeholder' => '#0057FF',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#0057ff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),

View file

@ -1,13 +1,3 @@
.ppcp-axo-card-icons {
padding: 4px 0 16px 25px;
.ppcp-card-icon {
float: left !important;
max-height: 25px;
}
}
.ppcp-axo-watermark-container {
max-width: 200px;
margin-top: 10px;

View file

@ -162,6 +162,17 @@ class AxoManager {
ev.preventDefault();
}
});
// Listening to status update event
document.addEventListener('axo_status_updated', (ev) => {
const termsField = document.querySelector("[name='terms-field']");
if(termsField) {
const status = ev.detail;
const shouldHide = status.active && status.validEmail === false && status.hasProfile === false;
termsField.parentElement.style.display = shouldHide ? 'none' : 'block';
}
});
}
rerender() {
@ -347,6 +358,8 @@ class AxoManager {
log('Status updated', JSON.parse(JSON.stringify(this.status)));
document.dispatchEvent(new CustomEvent("axo_status_updated", {detail: this.status}));
this.rerender();
}
@ -431,7 +444,6 @@ class AxoManager {
// Move email to the AXO container.
let emailRow = document.querySelector(this.el.fieldBillingEmail.selector);
wrapperElement.prepend(emailRow);
emailRow.querySelector('input').focus();
}
}
@ -463,9 +475,9 @@ class AxoManager {
this.el.gatewayRadioButton.trigger('change');
}
async renderWatermark() {
async renderWatermark(includeAdditionalInfo = true) {
(await this.fastlane.FastlaneWatermarkComponent({
includeAdditionalInfo: true
includeAdditionalInfo
})).render(this.el.watermarkContainer.selector);
}
@ -548,13 +560,16 @@ class AxoManager {
if (authResponse.authenticationState === 'succeeded') {
log(JSON.stringify(authResponse));
// Add addresses
this.setShipping(authResponse.profileData.shippingAddress);
this.setBilling({
address: authResponse.profileData.card.paymentSource.card.billingAddress,
phoneNumber: authResponse.profileData.shippingAddress.phoneNumber.nationalNumber ?? ''
});
this.setCard(authResponse.profileData.card);
const billingAddress = authResponse.profileData?.card?.paymentSource?.card?.billingAddress;
if(billingAddress) {
this.setBilling({
address: billingAddress,
phoneNumber: authResponse.profileData.shippingAddress.phoneNumber.nationalNumber ?? ''
});
this.setCard(authResponse.profileData.card);
}
this.setStatus('validEmail', true);
this.setStatus('hasProfile', true);
@ -562,11 +577,23 @@ class AxoManager {
this.hideGatewaySelection = true;
this.$('.wc_payment_methods label').hide();
await this.renderWatermark(false);
this.rerender();
} else {
// authentication failed or canceled by the customer
// set status as guest customer
log("Authentication Failed")
this.setStatus('validEmail', true);
this.setStatus('hasProfile', false);
await this.renderWatermark(true);
this.cardComponent = (await this.fastlane.FastlaneCardComponent(
this.cardComponentData()
)).render(this.el.paymentContainer.selector + '-form');
}
} else {
@ -577,6 +604,8 @@ class AxoManager {
this.setStatus('validEmail', true);
this.setStatus('hasProfile', false);
await this.renderWatermark(true);
this.cardComponent = (await this.fastlane.FastlaneCardComponent(
this.cardComponentData()
)).render(this.el.paymentContainer.selector + '-form');
@ -620,6 +649,8 @@ class AxoManager {
this.shippingView.toSubmitData(data);
this.cardView.toSubmitData(data);
this.ensureBillingPhoneNumber(data);
this.submit(this.data.card.id, data);
} else { // Gary flow
@ -639,10 +670,15 @@ class AxoManager {
}
cardComponentData() {
return {
fields: {
cardholderName: {} // optionally pass this to show the card holder name
const fields = {
cardholderName: {
enabled: true
}
};
return {
fields: fields,
styles: this.deleteKeysWithEmptyString(this.axoConfig.style_options)
}
}
@ -693,6 +729,9 @@ class AxoManager {
formData.set(key, data[key]);
});
// Set type of user (Ryan) to be received on WC gateway process payment request.
formData.set('fastlane_member', true);
fetch(wc_checkout_params.checkout_url, { // TODO: maybe create a new endpoint to process_payment.
method: "POST",
body: formData
@ -743,6 +782,34 @@ class AxoManager {
return this.axoConfig?.widgets?.email === 'use_widget';
}
deleteKeysWithEmptyString = (obj) => {
for(let key of Object.keys(obj)){
if (obj[key] === ''){
delete obj[key];
}
else if (typeof obj[key] === 'object'){
obj[key] = this.deleteKeysWithEmptyString(obj[key]);
if (Object.keys(obj[key]).length === 0 ) delete obj[key];
}
}
return Array.isArray(obj) ? obj.filter(val => val) : obj;
}
ensureBillingPhoneNumber(data) {
if (data.billing_phone === '') {
let phone = '';
const cc = this.data?.shipping?.phoneNumber?.countryCode;
const number = this.data?.shipping?.phoneNumber?.nationalNumber;
if (cc) {
phone = `+${cc} `;
}
phone += number;
data.billing_phone = phone;
}
}
}
export default AxoManager;

View file

@ -45,9 +45,8 @@ class ShippingView {
<div>${data.value('firstName')} ${data.value('lastName')}</div>
<div>${data.value('street1')}</div>
<div>${data.value('street2')}</div>
<div>${data.value('postCode')} ${data.value('city')}</div>
<div>${valueOfSelect('#shipping_state', data.value('stateCode'))}</div>
<div>${valueOfSelect('#shipping_country', data.value('countryCode'))}</div>
<div>${data.value('city')}, ${valueOfSelect('#billing_state', data.value('stateCode'))} ${data.value('postCode')} </div>
<div>${valueOfSelect('#billing_country', data.value('countryCode'))}</div>
<div>${data.value('phone')}</div>
</div>
`;

View file

@ -68,6 +68,7 @@ return array(
$container->get( 'wcgateway.url' ),
$container->get( 'wcgateway.order-processor' ),
$container->get( 'axo.card_icons' ),
$container->get( 'axo.card_icons.axo' ),
$container->get( 'api.endpoint.order' ),
$container->get( 'api.factory.purchase-unit' ),
$container->get( 'api.factory.shipping-preference' ),
@ -98,6 +99,35 @@ return array(
);
},
'axo.card_icons.axo' => static function ( ContainerInterface $container ): array {
return array(
array(
'title' => 'Dinersclub',
'file' => 'dinersclub-light.svg',
),
array(
'title' => 'Discover',
'file' => 'discover-light.svg',
),
array(
'title' => 'JCB',
'file' => 'jcb-light.svg',
),
array(
'title' => 'MasterCard',
'file' => 'mastercard-light.svg',
),
array(
'title' => 'UnionPay',
'file' => 'unionpay-light.svg',
),
array(
'title' => 'Visa',
'file' => 'visa-light.svg',
),
);
},
/**
* The matrix which countries and currency combinations can be used for AXO.
*/

View file

@ -151,13 +151,13 @@ class AxoManager {
*/
private function script_data() {
return array(
'environment' => array(
'environment' => array(
'is_sandbox' => $this->environment->current_environment() === 'sandbox',
),
'widgets' => array(
'widgets' => array(
'email' => 'render',
),
'insights' => array(
'insights' => array(
'enabled' => true,
'client_id' => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
'session_id' =>
@ -171,6 +171,26 @@ class AxoManager {
'value' => WC()->cart->get_total( 'numeric' ),
),
),
'style_options' => array(
'root' => array(
'backgroundColor' => $this->settings->has( 'axo_style_root_bg_color' ) ? $this->settings->get( 'axo_style_root_bg_color' ) : '',
'errorColor' => $this->settings->has( 'axo_style_root_error_color' ) ? $this->settings->get( 'axo_style_root_error_color' ) : '',
'fontFamily' => $this->settings->has( 'axo_style_root_font_family' ) ? $this->settings->get( 'axo_style_root_font_family' ) : '',
'textColorBase' => $this->settings->has( 'axo_style_root_text_color_base' ) ? $this->settings->get( 'axo_style_root_text_color_base' ) : '',
'fontSizeBase' => $this->settings->has( 'axo_style_root_font_size_base' ) ? $this->settings->get( 'axo_style_root_font_size_base' ) : '',
'padding' => $this->settings->has( 'axo_style_root_padding' ) ? $this->settings->get( 'axo_style_root_padding' ) : '',
'primaryColor' => $this->settings->has( 'axo_style_root_primary_color' ) ? $this->settings->get( 'axo_style_root_primary_color' ) : '',
),
'input' => array(
'backgroundColor' => $this->settings->has( 'axo_style_input_bg_color' ) ? $this->settings->get( 'axo_style_input_bg_color' ) : '',
'borderRadius' => $this->settings->has( 'axo_style_input_border_radius' ) ? $this->settings->get( 'axo_style_input_border_radius' ) : '',
'borderColor' => $this->settings->has( 'axo_style_input_border_color' ) ? $this->settings->get( 'axo_style_input_border_color' ) : '',
'borderWidth' => $this->settings->has( 'axo_style_input_border_width' ) ? $this->settings->get( 'axo_style_input_border_width' ) : '',
'textColorBase' => $this->settings->has( 'axo_style_input_text_color_base' ) ? $this->settings->get( 'axo_style_input_text_color_base' ) : '',
'focusBorderColor' => $this->settings->has( 'axo_style_input_focus_border_color' ) ? $this->settings->get( 'axo_style_input_focus_border_color' ) : '',
),
),
'name_on_card' => $this->settings->has( 'axo_name_on_card' ) ? $this->settings->get( 'axo_name_on_card' ) : '',
);
}

View file

@ -20,6 +20,8 @@ use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
use WooCommerce\PayPalCommerce\Vendor\Dhii\Modular\Module\ModuleInterface;
use WooCommerce\PayPalCommerce\Vendor\Interop\Container\ServiceProviderInterface;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
use WooCommerce\PayPalCommerce\WcGateway\Gateway\CreditCardGateway;
use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
/**
* Class AxoModule
@ -77,6 +79,33 @@ class AxoModule implements ModuleInterface {
9
);
// Hides credit card gateway on checkout when using Fastlane.
add_filter(
'woocommerce_available_payment_gateways',
/**
* Param types removed to avoid third-party issues.
*
* @psalm-suppress MissingClosureParamType
*/
function ( $methods ) use ( $c ): array {
if ( ! is_array( $methods ) || ! $c->get( 'axo.eligible' ) ) {
return $methods;
}
$settings = $c->get( 'wcgateway.settings' );
assert( $settings instanceof Settings );
if ( apply_filters(
'woocommerce_paypal_payments_axo_hide_credit_card_gateway',
$this->hide_credit_card_when_using_fastlane( $methods, $settings )
) ) {
unset( $methods[ CreditCardGateway::ID ] );
}
return $methods;
}
);
add_action(
'init',
static function () use ( $c, $module ) {
@ -221,4 +250,20 @@ class AxoModule implements ModuleInterface {
*/
public function getKey() {
}
/**
* Condition to evaluate if Credit Card gateway should be hidden.
*
* @param array $methods WC payment methods.
* @param Settings $settings The settings.
* @return bool
*/
private function hide_credit_card_when_using_fastlane( array $methods, Settings $settings ): bool {
$is_axo_enabled = $settings->has( 'axo_enabled' ) && $settings->get( 'axo_enabled' ) ?? false;
return ! is_admin()
&& is_user_logged_in() === false
&& isset( $methods[ CreditCardGateway::ID ] )
&& $is_axo_enabled;
}
}

View file

@ -70,6 +70,13 @@ class AxoGateway extends WC_Payment_Gateway {
*/
protected $card_icons;
/**
* The AXO card icons.
*
* @var array
*/
protected $card_icons_axo;
/**
* The order endpoint.
*
@ -120,6 +127,7 @@ class AxoGateway extends WC_Payment_Gateway {
* @param string $wcgateway_module_url The WcGateway module URL.
* @param OrderProcessor $order_processor The Order processor.
* @param array $card_icons The card icons.
* @param array $card_icons_axo The card icons.
* @param OrderEndpoint $order_endpoint The order endpoint.
* @param PurchaseUnitFactory $purchase_unit_factory The purchase unit factory.
* @param ShippingPreferenceFactory $shipping_preference_factory The shipping preference factory.
@ -133,6 +141,7 @@ class AxoGateway extends WC_Payment_Gateway {
string $wcgateway_module_url,
OrderProcessor $order_processor,
array $card_icons,
array $card_icons_axo,
OrderEndpoint $order_endpoint,
PurchaseUnitFactory $purchase_unit_factory,
ShippingPreferenceFactory $shipping_preference_factory,
@ -147,6 +156,7 @@ class AxoGateway extends WC_Payment_Gateway {
$this->wcgateway_module_url = $wcgateway_module_url;
$this->order_processor = $order_processor;
$this->card_icons = $card_icons;
$this->card_icons_axo = $card_icons_axo;
$this->method_title = __( 'Fastlane Debit & Credit Cards', 'woocommerce-paypal-payments' );
$this->method_description = __( 'PayPal Fastlane offers an accelerated checkout experience that recognizes guest shoppers and autofills their details so they can pay in seconds.', 'woocommerce-paypal-payments' );
@ -208,10 +218,13 @@ class AxoGateway extends WC_Payment_Gateway {
public function process_payment( $order_id ) {
$wc_order = wc_get_order( $order_id );
$payment_method_title = __( 'Credit Card (via Fastlane by PayPal)', 'woocommerce-paypal-payments' );
$wc_order->set_payment_method_title( $payment_method_title );
$wc_order->save();
// phpcs:ignore WordPress.Security.NonceVerification.Missing
$fastlane_member = wc_clean( wp_unslash( $_POST['fastlane_member'] ?? '' ) );
if ( $fastlane_member ) {
$payment_method_title = __( 'Debit & Credit Cards (via Fastlane by PayPal)', 'woocommerce-paypal-payments' );
$wc_order->set_payment_method_title( $payment_method_title );
$wc_order->save();
}
$purchase_unit = $this->purchase_unit_factory->from_wc_order( $wc_order );
@ -282,22 +295,25 @@ class AxoGateway extends WC_Payment_Gateway {
* @return string
*/
public function get_icon() {
$icon = parent::get_icon();
$icon = parent::get_icon();
$icons = $this->card_icons;
$icons_src = esc_url( $this->wcgateway_module_url ) . 'assets/images/';
if ( empty( $this->card_icons ) ) {
return $icon;
}
$images = array();
foreach ( $this->card_icons as $card ) {
foreach ( $icons as $card ) {
$images[] = '<img
class="ppcp-card-icon"
title="' . $card['title'] . '"
src="' . esc_url( $this->wcgateway_module_url ) . 'assets/images/' . $card['file'] . '"
src="' . $icons_src . $card['file'] . '"
> ';
}
return '<div class="ppcp-axo-card-icons">' . implode( '', $images ) . '</div>';
return implode( '', $images );
}
/**

View file

@ -803,6 +803,14 @@ return array(
'elo' => _x( 'Elo', 'Name of credit card', 'woocommerce-paypal-payments' ),
'hiper' => _x( 'Hiper', 'Name of credit card', 'woocommerce-paypal-payments' ),
),
'options_axo' => array(
'dinersclub-light' => _x( 'Diners Club (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'discover-light' => _x( 'Discover (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'jcb-light' => _x( 'JCB (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'mastercard-light' => _x( 'Mastercard (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'unionpay-light' => _x( 'UnionPay (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
'visa-light' => _x( 'Visa (light)', 'Name of credit card', 'woocommerce-paypal-payments' ),
),
'screens' => array(
State::STATE_ONBOARDED,
),