[BUG] Must pass vault=true to sdk to use createSubscription

[crohde7707]

To Do First

• [x ] Did you try latest release?
• [ x] Did you look for existing matching issues?

Software Package Version: latest

Describe the bug Must pass vault=true to sdk to use createSubscription

Just trying to set up a Paypal Smart button, but getting this error, even though i am passing vault=true in the options prop

<PayPalButton
        options={{
            'client-id': '/*...*/',
            vault: true
        }}
        createSubscription={(data, actions) => {
            return actions.subscription.create({
                plan_id: 'P-XXXXXXXXXXXXXXX'
            });
        }}
        onApprove={(data, actions) => {
            // Capture the funds from the transaction
            return actions.subscription.get().then(function(details) {
                  // Show a success message to your buyer
                  alert("Subscription completed");
                });
        }}
/>

[TST-akimond]

Me too. Uncaught Error: Must pass vault=true to sdk to use createSubscription

Same error was caused on my project. I also used the latest version.

[parmesh-shiroya]

For fix this you have to manually import paypal js file.

Add this in index.html or import this with HOC.

<script
    src="https://www.paypal.com/sdk/js?client-id={CLIENT_ID}&vault=true">
    </script>

[crohde7707]

While this might fix the issue, i disagree with this workaround, as the documentation on this module states that it accepts the vault parameter, which should bubble down to the script being pulled in. Adding the script manually also would cause it to load twice, since PaypalButton pulls in the script as well

[offaxis]

To fix this issue, just pass vault={true} as button base props: <PayPalButton vault={true} {...props} />

[offaxis]

Not totally fixed...

In my case the error occurs when i first pass vault=false, and then after user actions, i pass vault=true, the script loaded by component didn't update the option value: Script url "https://www.paypal.com/sdk/js" still get the vault query parameter set to false...

But the button component get the good value....

[yurist38]

To fix this issue, just pass vault={true} as button base props: <PayPalButton vault={true} {...props} />

This isn't correct actually, because the vault prop must be nested into the options like this:

<PayPalButton options={{ vault: true, ...otherOptions }} />

[angelesjimaresp]

Hola, alguien pudo solucionar ese problema, en estos momentos lo estoy teniendo.

[CodeSuite]

Defining it within load script vs paypal.Buttons works. Documentation is obviously weak here. Try this:

import { loadScript } from "@paypal/paypal-js";

loadScript({ "vault": true, "client-id": 'XXXXXXX' }) .then((paypal) => { paypal.Buttons({}).render('...'); })