Cuando intente agregar un botón de suscripción de PayPal y un botón de captura/pedido para pagos únicos en la misma página, debe importar el archivo Javascript de PayPal dos veces con diferentes parámetros ( intent=subscription&vault=true versus solo intent=capture )
Si intenta importar ambos botones, no se procesarán.
¿Cómo puede mostrar una suscripción de PayPal y un botón inteligente de pago único de PayPal en la misma página?
Ejemplo de código para reproducir el problema:
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD"></script> <script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD&intent=subscription&vault=true"></script> <div id="some-container"></div> <div id="some-subscription-container"></div> <script> paypal.Buttons().render('#some-container'); paypal.Buttons().render('#some-subscription-container'); </script>Después de luchar con esto durante horas, encontré una solución que funciona muy bien para mostrar ambos botones en la misma página (o incluso muchos de cada uno) y quiero compartirlo para poder ahorrarle a otros el dolor.
El primer problema es cómo importar ambos archivos Javascript de PayPal al mismo tiempo con diferentes parámetros. La solución es usar data-namespace en las etiquetas de script como esta:
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD" data-namespace="paypal_one_time"></script> <script src="https://www.paypal.com/sdk/js?client-id={{YOUR CLIENT ID}}¤cy=USD&intent=subscription&vault=true" data-namespace="paypal_subscriptions"></script> Ahora, para representar los botones, necesita usar esos espacios de nombres en lugar de la variable de paypal . Por ejemplo:
paypal_one_time.Buttons().render('#some-container'); paypal_subscriptions.Buttons().render('#some-subscription-container');El último problema que encontrará es que al hacer clic en los botones de pago único se rompen los botones de suscripción. Si intenta hacer clic en la suscripción después del botón único, no funcionará (diciendo que no tiene suficiente autorización y cerrando la ventana emergente).
Para solucionar esto, la forma más fácil es volver a mostrar los botones de suscripción en su página cada vez que finaliza un flujo de pago único (en los métodos onApproved/onCancelled/onError dentro de las opciones Buttons() para sus botones de pago único) .
onApprove: function(data, actions) { return actions.order.capture().then(function(orderData) { // process your one time payment // re-render subscription buttons because now they are broken! reRenderSubscriptionButtons(); }); }, onCancel: function(data) { reRenderSubscriptionButtons(); },En esos eventos en one_time_button, simplemente llame a una función que haga algo como:
function reRenderSubscriptionButtons() { // remove everything from the container document.getElementById("some-subscription-container").innerHTML=''; // render the subscription buttons again (you can call the same function you use to render it the first time too) paypal_subscriptions.Buttons().render('#some-subscription-container'); }