# 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 alvo dos Elementos Alterar o atributo 'id' do alvo dos Elementos A integração "Elementos de Cartão" do Easy Digital Downloads exigia que houvesse uma tag <div> com o id 'edd-stripe-card-element'. Pode parecer assim em suas personalizações: ``` // Alvo div dos Elementos de Cartão <div id="edd-stripe-card-element" class="edd-stripe-card-element"></div> ``` Os novos Elementos de Pagamento usam um atributo 'id' diferente, então você precisa alterar esta linha para: ``` // Alvo div dos Elementos de Pagamento <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 necessá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ê "reconstrua" seus scripts, pois o Javascript e o Estilo CSS para os elementos de cartão mudaram. ### Plugins ou serviços de cache Ao mudar para o Elemento de Pagamento, certifique-se de limpar quaisquer caches 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 sejam carregados. Easy Digital Downloads -- Stripe 2.9 adiciona suporte ao [Elemento de Pagamento](https://stripe.com/docs/payments/payment-element) do Stripe, que permite uma experiência de checkout aprimorada, mais eficiente e mais personalizável. Isso está disponível para usuários que usam nosso Gateway Pro Stripe, 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 Checkout EDD 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 núcleo do EDD, então procure lá por código completo e links para 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' ); /** * Registra um arquivo de origem CSS personalizado para o Stripe usar para renderizar fontes personalizadas. * * @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' ); /** * Adiciona uma fonte personalizada às variáveis do Stripe. * * @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 do Stripe. Por exemplo, os rótulos do formulário podem ser `flutuantes` nos campos do formulário, em vez de acima deles, com este pequeno filtro: ``` add_filter( 'edds_stripe_payment_elements_label_style', 'prefix_modify_stripe_label_style' ); /** * Altera o estilo do rótulo do Stripe para flutuante. * * @return string */ function prefix_modify_stripe_label_style() { return 'floating'; } ```