Post

Replies

Boosts

Views

Activity

Apple pay button not showing correctly
I'm implementing a payment-checkout which is a white-label of ACI and the payment provider is VR-payment. So far everything worked smooth except the displaying of the apple pay button. The button works correctly and I can pay with it but it doesn't have the correct styling. ACI/VR-payment are saying in their documenation that the button doesn't need any styling just like the credit card and gpay. I'm using React as Framework and as far as I know the HTML-Script-Tags doesn't work. That's why I implemented it with a workaround which is shown below. Maybe someone used the same Framework and also used ACI/VR-payment for implementing the payment. This is how the button looks like: Here is the documentation of VR-payment: https://vr-pay-ecommerce.docs.oppwa.com/tutorials/integration-guide/fast-checkout/apple-pay ` import * as React from "react" import {useEffect} from "react"; import {FaRegCreditCard} from'react-icons/fa'; import "../../styles/shoppingBag.css"; export function RenderPaymentScript({checkoutId,orderId}) { console.log(checkoutId); const id = localStorage.getItem("restaurantUid"); const isSafari = window.safari !== undefined; useEffect(async ()=>{ window.wpwlOptions={ applePay: { displayName: "example", total: { label: "example" }, style: "white-with-line" }, style: "plain", locale:"de", googlePay:{ } }; const script = document.createElement("script"); script.src =`${process.env.REACT_APP_VR_PAYMENT_URL}${checkoutId}`; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } },[]); return ( <div> <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="APPLEPAY" /*data-brands={`${paymentMethod}`}*//> <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="GOOGLEPAY"/> <div className="paymentBox"> <text>Kreditkarte</text> <FaRegCreditCard size={25} color={'#6C5AF2'} className="paymentIcon"/> </div> <form action={`${process.env.REACT_APP_SIZZLY_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="VISA MASTER"/> </div> ) } export default RenderPaymentScript;
1
0
2.1k
Jun ’21