turnstile

taler-turnstile-payment-button.html.twig (12906B)

---

 <div class="taler-turnstile-payment-container"
      data-merchant-backend="{{ merchant_backend }}"
      data-template-id="{{ template_id }}"
      data-fulfillment-url="{{ fulfillment_url }}"
      data-confirm-url="{{ confirm_url }}"
      data-paivana-uri="{{ paivana_uri }}"
      data-max-pickup-delay="{{ max_pickup_delay }}">
   <div class="taler-turnstile-payment-info">
     <h3>{{ 'Payment required'|t }}</h3>
     <p>{{ 'Please pay to access'|t }} <strong>{{ node_title }}</strong>.</p>
   </div>
 
   <div class="taler-turnstile-payment-actions">
     <div class="taler-turnstile-payment-qr">
       <div class="taler-turnstile-qr-taler-frame">
         <div class="taler-turnstile-qr-inner">
           <div class="taler-turnstile-qr-code-container"></div>
         </div>
         <div class="taler-turnstile-qr-taler-logo" aria-hidden="true">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 95" fill="none" version="1.1"><g><g fill="none"><rect width="200" height="95" x="0" style="fill: rgb(255, 255, 255); fill-opacity: 1;" ry="47.5" rx="47.5" y="0"/><g><path d="M87.60791015625,8.12158203125C101.56881713867188,8.12158203125,113.69378662109375,16.55859375,119.81179809570312,28.943603515625L114.60223388671875,28.943603515625C108.9432373046875,19.34130859375,98.96926879882812,12.96484375,87.60791015625,12.96484375C69.97454833984375,12.96484375,55.679962158203125,28.32177734375,55.679962158203125,47.265380859375C55.679962158203125,56.53759765625,59.105865478515625,64.94921875,64.67062377929688,71.121826171875C63.468505859375,72.1279296875,62.188629150390625,73.031494140625,60.841827392578125,73.8203125C54.84014892578125,66.8427734375,51.1715087890625,57.515380859375,51.1715087890625,47.265380859375C51.1715087890625,25.64697265625,67.48464965820312,8.12158203125,87.60791015625,8.12158203125ZM119.71417236328125,65.7861328125C113.56512451171875,78.06298828125,101.49423217773438,86.409423828125,87.60791015625,86.409423828125C86.66519165039062,86.409423828125,85.73080444335938,86.370849609375,84.80609130859375,86.29541015625C87.53939819335938,84.894287109375,90.10183715820312,83.171875,92.45233154296875,81.17333984375C101.69497680664062,79.661865234375,109.63381958007812,73.891845703125,114.48382568359375,65.7861328125Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M67.50363159179688,8.12158203125C68.44625854492188,8.12158203125,69.380615234375,8.16015625,70.305419921875,8.235595703125C67.57211303710938,9.63671875,65.00958251953125,11.35888671875,62.659088134765625,13.357666015625C47.324951171875,15.865234375,35.575653076171875,30.091064453125,35.575653076171875,47.265380859375C35.575653076171875,60.06689453125,42.10455322265625,71.228759765625,51.77911376953125,77.1220703125C50.351959228515625,77.362060546875,48.8892822265625,77.4873046875,47.399322509765625,77.4873046875C46.289306640625,77.4873046875,45.19500732421875,77.416015625,44.118560791015625,77.281494140625C36.14129638671875,70.10107421875,31.067230224609375,59.32080078125,31.067230224609375,47.265380859375C31.067230224609375,25.64697265625,47.38037109375,8.12158203125,67.50363159179688,8.12158203125ZM72.34814453125,81.17333984375C81.5909423828125,79.661865234375,89.52969360351562,73.8916015625,94.3797607421875,65.78564453125L99.61007690429688,65.78564453125C93.46109008789062,78.062744140625,81.39016723632812,86.409423828125,67.50363159179688,86.409423828125C66.56088256835938,86.409423828125,65.62661743164062,86.370849609375,64.70181274414062,86.29541015625C67.4349365234375,84.89404296875,69.99777221679688,83.172119140625,72.34814453125,81.17333984375ZM94.497802734375,28.943603515625C91.6864013671875,24.174072265625,87.81045532226562,20.2001953125,83.22808837890625,17.40869140625C84.65524291992188,17.1689453125,86.11785888671875,17.04345703125,87.60791015625,17.04345703125C88.71786499023438,17.04345703125,89.81222534179688,17.114990234375,90.888671875,17.249267578125C94.485107421875,20.486572265625,97.49151611328125,24.455810546875,99.70870971679688,28.943603515625Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M47.399322509765625,8.12158203125C48.352447509765625,8.12158203125,49.296783447265625,8.161376953125,50.23150634765625,8.238525390625C47.5032958984375,9.637451171875,44.945098876953125,11.356689453125,42.59844970703125,13.35107421875C27.242950439453125,15.839111328125,15.47137451171875,30.074951171875,15.47137451171875,47.265380859375C15.47137451171875,66.208984375,29.766082763671875,81.56591796875,47.399322509765625,81.56591796875C58.68267822265625,81.56591796875,68.59854125976562,75.277587890625,74.27731323242188,65.78564453125L79.50582885742188,65.78564453125C73.35687255859375,78.062744140625,61.285888671875,86.409423828125,47.399322509765625,86.409423828125C27.276123046875,86.409423828125,10.963043212890625,68.884033203125,10.963043212890625,47.265380859375C10.963043212890625,25.64697265625,27.276123046875,8.12158203125,47.399322509765625,8.12158203125ZM74.39288330078125,28.943603515625C73.218017578125,26.950927734375,71.857666015625,25.096435546875,70.337158203125,23.40966796875C71.53936767578125,22.40380859375,72.81900024414062,21.49951171875,74.1656494140625,20.7109375C76.29071044921875,23.181640625,78.12283325195312,25.947021484375,79.60369873046875,28.943603515625Z" style="fill-rule: evenodd; fill: rgb(0, 66, 179);"/><path d="M78.18096923828125,37.995361328125L86.3848876953125,37.995361328125L86.3848876953125,33.469482421875L65.39480590820312,33.469482421875L65.39480590820312,37.995361328125L73.59881591796875,37.995361328125L73.59881591796875,61.259765625L78.18096923828125,61.259765625Z" style="fill: rgb(0, 66, 179);"/><path d="M92.96798706054688,54.550537109375L105.19992065429688,54.550537109375L107.82388305664062,61.259765625L112.62802124023438,61.259765625L101.24588012695312,33.27099609375L97.03329467773438,33.27099609375L85.651123046875,61.259765625L90.30743408203125,61.259765625ZM103.53701782226562,50.222900390625L94.63125610351562,50.222900390625L99.06564331054688,39.10693359375Z" style="fill: rgb(0, 66, 179);"/><path d="M120.87139892578125,33.469482421875L116.76959228515625,33.469482421875L116.76959228515625,61.259765625L135.17013549804688,61.259765625L135.17013549804688,56.853271484375C130.4039306640625,56.853271484375,125.63763427734375,56.853271484375,120.87139892578125,56.853271484375Z" style="fill: rgb(0, 66, 179);"/><path d="M159.07958984375,33.469482421875L139.93722534179688,33.469482421875L139.93722534179688,61.259765625L159.264404296875,61.259765625L159.264404296875,56.853271484375L144.445556640625,56.853271484375L144.445556640625,49.428955078125L157.41665649414062,49.428955078125L157.41665649414062,45.0224609375L144.445556640625,45.0224609375L144.445556640625,37.876220703125L159.07958984375,37.876220703125Z" style="fill: rgb(0, 66, 179);"/><path d="M181.21524047851562,42.541259765625C181.21524047851562,43.976806640625,180.73483276367188,45.121826171875,179.767822265625,45.968505859375C178.80709838867188,46.822265625,177.5074462890625,47.245361328125,175.87518310546875,47.245361328125L169.20486450195312,47.245361328125L169.20486450195312,37.876220703125L175.83828735351562,37.876220703125C177.54434204101562,37.876220703125,178.86849975585938,38.2666015625,179.80490112304688,39.053955078125C180.74722290039062,39.8349609375,181.21524047851562,40.999267578125,181.21524047851562,42.541259765625ZM186.64749145507812,61.259765625L179.6632080078125,50.739013671875C180.5745849609375,50.474365234375,181.40618896484375,50.09765625,182.15771484375,49.607666015625C182.908935546875,49.1181640625,183.55581665039062,48.5224609375,184.09768676757812,47.8212890625C184.63983154296875,47.11962890625,185.06466674804688,46.312744140625,185.37261962890625,45.399658203125C185.68048095703125,44.486572265625,185.83438110351562,43.447509765625,185.83438110351562,42.282958984375C185.83438110351562,40.93310546875,185.61279296875,39.709228515625,185.16928100585938,38.610595703125C184.72586059570312,37.512451171875,184.09158325195312,36.5859375,183.26632690429688,35.83154296875C182.44088745117188,35.077392578125,181.43087768554688,34.4951171875,180.236083984375,34.084716796875C179.04104614257812,33.67431640625,177.70452880859375,33.469482421875,176.22647094726562,33.469482421875L164.696533203125,33.469482421875L164.696533203125,61.259765625L169.20486450195312,61.259765625L169.20486450195312,51.572998046875L174.91445922851562,51.572998046875L181.28903198242188,61.259765625Z" style="fill: rgb(0, 66, 179);"/></g></g></g></svg>
         </div>
       </div>
       <p class="taler-turnstile-qr-help">{{ 'Scan with your GNU Taler wallet'|t }}</p>
     </div>
 
     <div class="taler-turnstile-payment-or show-if-taler-supported hidden">
       <span>{{ 'or'|t }}</span>
     </div>
 
     <a href="#"
        class="button button--primary taler-turnstile-pay-button show-if-taler-supported hidden">
       {{ 'Open GNU Taler payment Web page'|t }}
     </a>
   </div>
   <div class="taler-turnstile-payment-pricing">
     <h4>{{ 'Price per article'|t}}</h4>
     <p class="taler-turnstile-hint-price">{{ price_hint }}</p><br>
     <h4>{{ 'Acceptable subscriptions'|t}}</h4>
     <p class="taler-turnstile-hint-subscriptions">{{ subscription_hint }}</p>
   </div>
 
   <div class="taler-turnstile-payment-status">
     <p class="taler-turnstile-status-message">{{ 'Waiting for payment...'|t }}</p>
   </div>
 
 </div>
 
 <style>
 .taler-turnstile-payment-container {
   border: 2px solid #e0e0e0;
   border-radius: 8px;
   padding: 2rem;
   margin: 2rem 0;
   background: #f9f9f9;
 }
 
 .taler-turnstile-payment-info h3 {
   margin-top: 0;
   color: #333;
 }
 
 .taler-turnstile-price {
   font-size: 1.2rem;
   font-weight: bold;
   color: #0066cc;
   margin: 1rem 0;
 }
 
 .taler-turnstile-payment-actions {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
 }
 
 .taler-turnstile-payment-qr {
   text-align: center;
 }
 
 .taler-turnstile-qr-taler-frame {
   position: relative;
   display: inline-block;
   max-width: 260px;
   padding: 10px;
   border-radius: 20px;
   background: conic-gradient(
       from var(--taler-turnstile-angle),
       #0042b3 0deg,
       #f1f1f4 20deg,
       #f1f1f4 150deg,
       #f1f1f4 160deg,
       #0042b3 180deg,
       #f1f1f4 200deg,
       #f1f1f4 330deg,
       #f1f1f4 340deg,
       #0042b3
     )
     padding-box;
   animation: taler-turnstile-rotate 10s linear 0s infinite normal none running;
 }
 
 .taler-turnstile-qr-inner {
   background: #ffffff;
   border-radius: 14px;
   padding: 10px;
 }
 
 .taler-turnstile-qr-code-container {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 5px;
 }
 
 .taler-turnstile-qr-code-container svg,
 .taler-turnstile-qr-code-container img,
 .taler-turnstile-qr-code-container canvas {
   display: block;
 }
 
 .taler-turnstile-qr-taler-logo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
   height: 40px;
   background: transparent;
   pointer-events: none;
 }
 
 .taler-turnstile-qr-taler-logo svg {
   width: 100%;
   height: 100%;
   display: block;
 }
 
 @property --taler-turnstile-angle {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
 }
 
 @keyframes taler-turnstile-rotate {
   to {
     --taler-turnstile-angle: 360deg;
   }
 }
 
 @supports not (background: conic-gradient(from 0deg, #000, #fff)) {
   .taler-turnstile-qr-taler-frame {
     background: #0042b3;
     animation: none;
   }
 }
 
 .taler-turnstile-qr-help {
   margin: 0.75rem 0 0 0;
   font-size: 0.9rem;
   color: #666;
 }
 
 .taler-turnstile-payment-or {
   margin: 0.5rem 0;
   color: #666;
   font-weight: bold;
 }
 
 .taler-turnstile-pay-button {
   display: inline-block;
   padding: 0.75rem 2rem;
   background: #0066cc;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   font-weight: bold;
   transition: background 0.3s;
 }
 
 .taler-turnstile-pay-button:hover {
   background: #0052a3;
   color: white;
 }
 
 .taler-turnstile-payment-status {
   margin-top: 1.5rem;
   padding: 1rem;
   background: #e3f2fd;
   border: 1px solid #90caf9;
   border-radius: 4px;
   text-align: center;
 }
 
 .taler-turnstile-status-message {
   margin: 0;
   color: #1565c0;
   font-style: italic;
 }
 
 .taler-turnstile-access-message {
   padding: 1rem;
   margin: 1rem 0;
   background: #fff3cd;
   border: 1px solid #ffc107;
   border-radius: 4px;
 }
 
 .taler-turnstile-teaser-wrapper {
   position: relative;
   max-height: 400px;
   overflow: hidden;
 }
 
 .taler-turnstile-teaser-wrapper::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100px;
   background: linear-gradient(to bottom, transparent, white);
 }
 
 /* Make sure we have a rule with high specificity. */
 .show-if-taler-supported.hidden {
   display: none !important;
 }
 
 /* Responsive design */
 @media (min-width: 768px) {
   .taler-turnstile-payment-actions {
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
 
   .taler-turnstile-payment-or {
     margin: 0 1rem;
   }
 }
 </style>