Personalizar Elementos de Pagamento Universais do Stripe

Migrando para Elementos de Pagamento

Se você usou nossa integração Stripe antes da introdução dos Elementos de Pagamento, demos a você acesso temporário a uma configuração chamada “Modo de Elementos” em Downloads > Configurações > Pagamentos > Stripe. Após a atualização, sua loja permanecerá nos Elementos de Cartão e permitirá que você mude para os Elementos de Pagamento somente após confirmar que seu checkout funciona com eles. Aqui estão algumas personalizações comuns que você pode precisar alterar ou remover para otimizar sua experiência com os Elementos de Pagamento.

Alterar o atributo ‘id’ do destino dos Elementos

Alterar o atributo ‘id’ do destino dos Elementos
A integração ‘Card Elements’ do Easy Digital Downloads exigia que houvesse uma tag <div> com o id ‘edd-stripe-card-element’. Pode parecer assim, em suas personalizações:

// Card Elements target div
<div id="edd-stripe-card-element" class="edd-stripe-card-element"></div>

O novo Elemento de Pagamento usa um atributo ‘id’ diferente, então você precisa alterar esta linha para:

// Payment Elements target div
<div id="edd-stripe-payment-element"></div>
<p class="edds-field-spacer-shim"></p>

Campo Nome do Cartão não é mais necessário

Graças ao novo Elemento de Pagamento, o campo nome do cartão não é mais obrigatório. Se o Elemento de Pagamento do Stripe detectar que o método de pagamento escolhido requer um nome, ele solicitará um.

Plugins de concatenação de scripts e estilos

Se você estava usando um plugin ou recurso para juntar todos os arquivos Javascript ou arquivos CSS, você vai querer garantir que você ‘reconstruiu’ seus scripts, pois o Javascript e o Estilo CSS para os elementos do cartão mudaram.

Plugins ou serviços de cache

Ao mudar para o Elemento de Pagamento, certifique-se de limpar qualquer cache que você possa ter, incluindo cache de página, cache de objeto e serviços como Cloudflare, para garantir que os arquivos Javascript e CSS corretos estão sendo carregados.

Easy Digital Downloads — Stripe 2.9 adiciona suporte ao Elemento de Pagamento do Stripe, que permite uma experiência de checkout aprimorada, mais eficiente e personalizável. Isso está disponível para usuários que utilizam nosso Stripe Pro Gateway, versão 2.9 ou superior. Novos usuários usarão automaticamente os elementos de pagamento; usuários existentes que se conectaram ao Stripe poderão optar por participar quando estiverem prontos, permitindo tempo para testar quaisquer personalizações que você fez em seu EDD Checkout em um ambiente local ou de staging. Se você personalizou seu modelo de Checkout, você vai querer ler mais sobre a migração do elemento de cartão legado para o Elemento de Pagamento.

Os filtros para os elementos de pagamento estão todos em easy-digital-downloads/includes/gateways/stripe/includes/elements/payment-elements.php no core do EDD, então procure lá por código completo e links para a documentação específica do Stripe.

Registrar uma Fonte Personalizada para Usar com os Elementos de Pagamento do Stripe

Você pode configurar o Stripe para usar uma fonte personalizada, mesmo de fontes externas como Google ou Adobe Fonts, com dois filtros:

add_filter( 'edds_stripe_payment_elements_fonts', 'prefix_add_google_font_stripe' );
/**
 * Registers a custom CSS source file for Stripe to use to render custom fonts.
 *
 * @param array $fonts
 * @return array
 */
function prefix_add_google_font_stripe( $fonts ) {
	$fonts[] = array(
		'cssSrc' => 'https://fonts.googleapis.com/css2?family=Gajraj+One',
	);

	return $fonts;
}

add_filter( 'edds_stripe_payment_elements_variables', 'prefix_add_custom_font_stripe_variables' );
/**
 * Add a custom font to the Stripe variables.
 *
 * @param array $variables
 * @return array
 */
function prefix_add_custom_font_stripe_variables( $variables ) {
	$variables['fontFamily'] = 'Gajraj One';

	return $variables;
}

Existem muitas opções diferentes possíveis para adicionar às variáveis para personalizar todos os aspectos do formulário de pagamento Stripe. Por exemplo, os rótulos do formulário podem ser flutuantes nas entradas do formulário, em vez de acima delas, com este pequeno filtro:

add_filter( 'edds_stripe_payment_elements_label_style', 'prefix_modify_stripe_label_style' );
/**
 * Changes the Stripe label style to floating.
 *
 * @return string
 */
function prefix_modify_stripe_label_style() {
	return 'floating';
}