{"id":3442,"date":"2024-06-05T23:18:26","date_gmt":"2024-06-05T21:18:26","guid":{"rendered":"https:\/\/bloom-advisory.co\/?page_id=3442"},"modified":"2024-06-13T10:41:33","modified_gmt":"2024-06-13T08:41:33","slug":"personal-branding-checkout","status":"publish","type":"page","link":"https:\/\/bloom-advisory.co\/en\/personal-branding-system\/personal-branding-checkout\/","title":{"rendered":"Personal Branding &#8211; 2.Checkout"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3442\" class=\"elementor elementor-3442\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-276327d e-flex e-con-boxed e-con e-parent\" data-id=\"276327d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2224101 e-con-full e-flex e-con e-child\" data-id=\"2224101\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-23a6a1c e-con-full e-flex e-con e-child\" data-id=\"23a6a1c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65edd2e elementor-widget elementor-widget-html\" data-id=\"65edd2e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<form id=\"payment-form\" action=\"\">\n  <div id=\"prices\">\n    <p class=\"old-price\" id=\"old-price\">200.00 EUR<\/p>\n    <div class=\"price-line\"><\/div>\n    <div class=\"price-details\" id=\"discount-section\" style=\"display: none;\">\n      <p class=\"subtotal-text\">Subtotal: <span id=\"subtotal\">200.00 EUR<\/span><\/p>\n      <p class=\"discount-text\">Discount: <span id=\"discount\">0.00 EUR off<\/span> <span id=\"remove-discount\">\u00d7<\/span><\/p>\n      <p class=\"due-now-text\">Due Now: <span id=\"due-now\">200.00 EUR<\/span><\/p>\n    <\/div>\n  <\/div>\n  <div id=\"coupon-code-container\">\n    <input type=\"text\" id=\"coupon-code\" name=\"coupon-code\" placeholder=\"Coupon Code\" \/>\n    <button type=\"button\" id=\"apply-coupon-button\">Apply<\/button>\n  <\/div>\n  <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Email Address\" required \/>\n  <div class=\"payment-method card-method\">\n    <input type=\"radio\" id=\"card\" name=\"payment_method\" value=\"card\" \/>\n    <label for=\"card\">\n      <span><img decoding=\"async\" src=\"https:\/\/www.svgrepo.com\/show\/513398\/credit-card.svg\" alt=\"Card Icon\" class=\"payment-icon\" \/>Card<\/span>\n    <\/label>\n  <\/div>\n  <div id=\"card-details\">\n    <div id=\"card-number-container\">\n      <label for=\"card-element\">Card number<\/label>\n      <div id=\"card-element\"><\/div> <!-- Stripe.js injects the Card Element -->\n      <div id=\"card-icon\" class=\"card-icon\"><\/div>\n    <\/div>\n    <div class=\"expiration-cvc\">\n      <div class=\"expiration\">\n        <label for=\"card-expiry-element\">Expiration<\/label>\n        <div id=\"card-expiry-element\"><\/div> <!-- Stripe.js injects the Card Expiry Element -->\n      <\/div>\n      <div class=\"cvc\">\n        <label for=\"card-cvc-element\">Security code<\/label>\n        <div id=\"card-cvc-element\"><\/div> <!-- Stripe.js injects the Card CVC Element -->\n      <\/div>\n    <\/div>\n    <label for=\"card-country\">Country<\/label>\n    <div class=\"country-container\">\n      <select id=\"card-country\" name=\"country\" required>\n        <option value=\"US\">United States<\/option>\n        <option value=\"FR\">France<\/option>\n        <!-- Add other countries as needed -->\n      <\/select>\n    <\/div>\n  <\/div>\n  <div class=\"payment-method apple-pay-method\">\n    <input type=\"radio\" id=\"apple-pay\" name=\"payment_method\" value=\"apple-pay\" \/>\n    <label for=\"apple-pay\">\n      <span><img decoding=\"async\" src=\"https:\/\/www.svgrepo.com\/show\/341610\/apple-pay.svg\" alt=\"Apple Pay Icon\" class=\"payment-icon\" \/>Apple Pay<\/span>\n    <\/label>\n  <\/div>\n  <div id=\"apple-pay-details\">\n    <div id=\"apple-pay-button\"><\/div>\n    <p>Apple Pay selected.<\/p>\n    <div>\n      <img decoding=\"async\" src=\"https:\/\/www.svgrepo.com\/show\/341610\/apple-pay.svg\" alt=\"Apple Pay Icon\" class=\"icon\" \/>\n      <p>Another step will appear to securely submit your payment information.<\/p>\n    <\/div>\n  <\/div>\n  <div class=\"payment-method paypal-method\">\n    <input type=\"radio\" id=\"paypal\" name=\"payment_method\" value=\"paypal\" \/>\n    <label for=\"paypal\">\n      <span><img decoding=\"async\" src=\"https:\/\/www.svgrepo.com\/show\/475665\/paypal-color.svg\" alt=\"PayPal Icon\" class=\"payment-icon\" \/>PayPal<\/span>\n    <\/label>\n  <\/div>\n  <button type=\"submit\" id=\"submit-button\">Start Growing Your LinkedIn Now<\/button>\n  <div id=\"card-errors\" role=\"alert\"><\/div>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n<script>\n  jQuery(document).ready(function($) {\n    const STRIPE_PUBLIC_KEY = 'pk_live_51PNxksCiM6tgtbm0wLQWaufNtA7GVrD0JYLsSoBd1LpqHUskJIpdVnRMQCJEeYROL6mLeXHWcvyFgWxtUIRpOGDU00jHtzEIqF';\n    const stripe = Stripe(STRIPE_PUBLIC_KEY);\n    const elements = stripe.elements();\n    const style = {\n      base: {\n        color: '#32325d',\n        fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n        fontSmoothing: 'antialiased',\n        fontSize: '16px',\n        '::placeholder': {\n          color: '#aab7c4'\n        }\n      },\n      invalid: {\n        color: '#fa755a',\n        iconColor: '#fa755a'\n      }\n    };\n\n    const cardNumber = elements.create('cardNumber', {style: style});\n    const cardExpiry = elements.create('cardExpiry', {style: style});\n    const cardCvc = elements.create('cardCvc', {style: style});\n\n    cardNumber.mount('#card-element');\n    cardExpiry.mount('#card-expiry-element');\n    cardCvc.mount('#card-cvc-element');\n\n    function updateCardIcon(cardBrand) {\n      const cardIcon = document.getElementById('card-icon');\n      cardIcon.className = 'card-icon'; \/\/ reset the class\n\n      switch (cardBrand) {\n        case 'visa':\n          cardIcon.classList.add('visa');\n          break;\n        case 'mastercard':\n          cardIcon.classList.add('mastercard');\n          break;\n        case 'amex':\n          cardIcon.classList.add('amex');\n          break;\n        default:\n          cardIcon.classList.remove('visa', 'mastercard', 'amex');\n          break;\n      }\n      cardIcon.style.display = cardBrand ? 'block' : 'none'; \/\/ Show the icon only if a brand is detected\n    }\ncardNumber.on('change', function(event) {\n  var displayError = document.getElementById('card-errors');\n  if (event.error) {\n    displayError.textContent = event.error.message;\n  } else {\n    displayError.textContent = '';\n  }\n\n  console.log('Event:', event);\n\n  if (event.brand) {\n    updateCardIcon(event.brand);\n    stopCardAnimation();\n  } else {\n    updateCardIcon('');\n    if (event.empty) {\n      console.log('Field is empty, starting animation');\n      startCardAnimation();\n    } else {\n      console.log('Field is not empty and no brand detected, stopping animation');\n      stopCardAnimation();\n      startCardAnimation(); \/\/ Ensure animation starts again if no brand is detected\n    }\n  }\n});\n\n\/\/ New functions for animation\nlet animationInterval;\n\nfunction startCardAnimation() {\n  clearInterval(animationInterval); \/\/ Clear any existing interval\n  const cardIcon = document.getElementById('card-icon');\n  const cardBrands = ['visa', 'mastercard', 'amex'];\n  let currentBrandIndex = 0;\n\n  cardIcon.className = 'card-icon'; \/\/ Reset the class\n  cardIcon.classList.add(cardBrands[currentBrandIndex]);\n  cardIcon.style.display = 'block';\n\n  animationInterval = setInterval(() => {\n    cardIcon.className = 'card-icon'; \/\/ Reset the class\n    currentBrandIndex = (currentBrandIndex + 1) % cardBrands.length;\n    cardIcon.classList.add(cardBrands[currentBrandIndex]);\n    cardIcon.style.display = 'block';\n  }, 5000);\n  console.log('Animation started');\n}\n\nfunction stopCardAnimation() {\n  clearInterval(animationInterval); \/\/ Clear the interval\n  console.log('Animation stopped');\n}\n\nstartCardAnimation(); \/\/ Start the animation when the page loads\n\n\n\n    var form = document.getElementById('payment-form');\n    form.addEventListener('submit', function(event) {\n      event.preventDefault();\n      stripe.createToken(cardNumber).then(function(result) {\n        if (result.error) {\n          var errorElement = document.getElementById('card-errors');\n          errorElement.textContent = result.error.message;\n        } else {\n          stripeTokenHandler(result.token);\n        }\n      });\n    });\n\n    function stripeTokenHandler(token) {\n      var form = document.getElementById('payment-form');\n      var hiddenInput = document.createElement('input');\n      hiddenInput.setAttribute('type', 'hidden');\n      hiddenInput.setAttribute('name', 'stripeToken');\n      hiddenInput.setAttribute('value', token.id);\n      form.appendChild(hiddenInput);\n      form.submit();\n    }\n\n    $('#card-details').hide();\n    $('#apple-pay-details').hide();\n    $('input[name=\"payment_method\"]').prop('checked', false);\n\n    $('input[name=\"payment_method\"]').change(function(event) {\n      var cardDetails = $('#card-details');\n      var applePayDetails = $('#apple-pay-details');\n      var paymentMethods = $('.payment-method');\n\n      paymentMethods.removeClass('no-bottom-border selected'); \/\/ Remove class from all methods\n      paymentMethods.css('border-bottom', ''); \/\/ Reset border-bottom for all methods\n\n      var selectedPaymentMethod = $(event.target).closest('.payment-method');\n      selectedPaymentMethod.addClass('selected'); \/\/ Add selected class to the clicked method\n\n      if (event.target.value === 'card') {\n        cardDetails.show();\n        applePayDetails.hide();\n        selectedPaymentMethod.addClass('no-bottom-border'); \/\/ Add class to selected method\n      } else if (event.target.value === 'apple-pay') {\n        cardDetails.hide();\n        applePayDetails.show();\n        selectedPaymentMethod.addClass('no-bottom-border'); \/\/ Add class to selected method\n        initializeApplePay();\n      } else {\n        cardDetails.hide();\n        applePayDetails.hide();\n      }\n    });\n\n    function initializeApplePay() {\n      if ($('#apple-pay-button').children().length) {\n        return; \/\/ Apple Pay already initialized\n      }\n\n      var paymentRequest = stripe.paymentRequest({\n        country: 'US',\n        currency: 'eur',\n        total: {\n          label: 'Total',\n          amount: 9900, \/\/ Amount in cents\n        },\n        requestPayerName: true,\n        requestPayerEmail: true,\n      });\n\n      paymentRequest.on('source', function(event) {\n        stripeTokenHandler(event.source);\n        event.complete('success');\n      });\n\n      var elements = stripe.elements();\n      var prButton = elements.create('paymentRequestButton', {\n        paymentRequest: paymentRequest,\n      });\n\n      paymentRequest.canMakePayment().then(function(result) {\n        if (result) {\n          prButton.mount('#apple-pay-button');\n        } else {\n          $('#apple-pay-button').hide();\n        }\n      });\n    }\n\n    $('#apply-coupon-button').click(function() {\n      const couponCode = $('#coupon-code').val();\n      const validCoupons = {\n        'DISCOUNT2024': 9900\n      };\n\n      if (validCoupons[couponCode] !== undefined) {\n        const newPrice = validCoupons[couponCode];\n        $('#old-price').addClass('crossed-out');\n        $('#subtotal').text('200.00 EUR');\n        $('#discount').text('101.00 EUR off');\n        $('#due-now').text('99.00 EUR');\n        $('#discount-section').show();\n        $('#coupon-code-container').hide();\n        $('#coupon-code').removeClass('error');\n        updatePaymentRequest(newPrice); \/\/ Update payment request total amount\n      } else {\n        $('#coupon-code').addClass('error');\n        alert('Invalid coupon code. Please try again.');\n      }\n    });\n\n    $('#remove-discount').click(function() {\n      $('#old-price').removeClass('crossed-out');\n      $('#subtotal').text('200.00 EUR');\n      $('#discount').text('0.00 EUR off');\n      $('#due-now').text('200.00 EUR');\n      $('#discount-section').hide();\n      $('#coupon-code-container').show();\n      updatePaymentRequest(20000); \/\/ Reset payment request total amount\n    });\n\n    function updatePaymentRequest(amount) {\n      if (window.paymentRequest) {\n        paymentRequest.update({\n          total: {\n            label: 'Total',\n            amount: amount,\n          }\n        });\n      }\n    }\n\n    fetch('https:\/\/ipapi.co\/json\/')\n      .then(response => response.json())\n      .then(data => {\n        const countryCode = data.country;\n        const countrySelect = document.getElementById('card-country');\n        if (countrySelect) {\n          countrySelect.value = countryCode;\n        }\n      })\n      .catch(error => console.error('Error fetching location data:', error));\n  });\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-699b281 e-flex e-con-boxed e-con e-parent\" data-id=\"699b281\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>200.00 EUR Subtotal: 200.00 EUR Discount: 0.00 EUR off \u00d7 Due Now: 200.00 EUR Apply Card Card number Expiration Security code Country United StatesFrance Apple Pay Apple Pay selected. Another step will appear to securely submit your payment information. PayPal Start Growing Your LinkedIn Now<\/p>","protected":false},"author":1,"featured_media":0,"parent":969,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3442","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/pages\/3442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/comments?post=3442"}],"version-history":[{"count":449,"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/pages\/3442\/revisions"}],"predecessor-version":[{"id":4068,"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/pages\/3442\/revisions\/4068"}],"up":[{"embeddable":true,"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/pages\/969"}],"wp:attachment":[{"href":"https:\/\/bloom-advisory.co\/en\/wp-json\/wp\/v2\/media?parent=3442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}